3 网格 landing page
0.大框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First landing page</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui vertical inverted segment">
header
</div> <div class="ui vertical segment">
content
</div> <div class="ui vertical inverted segment">
footer
</div>
</body>
</html>
添加图片
<div class="ui vertical inverted segment">
<div class="ui image">
<img src="data:images/banner.jpg" alt="" />
</div>
</div>
1.用menu做header部分
(1)添加item和menu
- 菜单用来展示操作集。
<div class="ui menu">
<div class="item">
Home
</div> <div class="item">
About
</div> <div class="item">
Other
</div>
</div>
- fixed 菜单固定
<div class="ui fixed inverted menu">
(2)a标签
<div class="ui fixed inverted menu">
<a href="#" class="item">Home</a>
<a href="#" class="item">About</a>
<a href="#" class="item">Other</a>
</div>
2.用网格系统做内容部分
- 网格系统 https://960.gs/
- 16格
<div class="ui grid"> <div class="ten wide column">我占10格</div>
<div class="six wide column">我占6格</div> </div>
<div class="ui vertical segment">
<div class="ui grid"> <div class="ten wide column">
<div class="ui image">
<img src="data:images/devices2.png" alt="" />
</div>
</div> <div class="six wide column">
<h2 class="u1 header">This is title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p> </div>
</div>
</div>
(2).添加图标 icon
<h2 class="u1 header">
<i class="icon book"></i>
This is title
</h2>
(3)消除多余的黑边
- basic
- 基本段落没有什么特殊的格式
<div class="ui vertical basic segment">
3.用网格系统做页尾
<div class="ui vertical inverted segment">
<div class="ui grid"> <div class="four wide column">
<div class="ui segment"></div>
</div> </div>
</div>
(2)垂直菜单menu->text
- 竖向菜单以竖直的方式显示元素。
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
</div>
</div>
- 修饰垂直菜单
<div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div>
4.完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First landing page</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui fixed inverted menu">
<a href="#" class="item">Home</a>
<a href="#" class="item">About</a>
<a href="#" class="item">Other</a>
</div> <div class="ui vertical basic segment">
<div class="ui image">
<img src="data:images/banner.jpg" alt="" />
</div>
</div> <div class="ui vertical segment">
<div class="ui grid"> <div class="ten wide column">
<div class="ui image">
<img src="data:images/devices2.png" alt="" />
</div>
</div> <div class="six wide column">
<h2 class="u1 header">
<i class="icon star"></i>
This is title
</h2> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p> </div>
</div>
</div> <div class="ui vertical very padded inverted segment">
<div class="ui grid"> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> </div>
</div> </body>
</html>
3 网格 landing page的更多相关文章
- 简约而不简单:网站着陆页的设计(Landing Page Design)
着陆页是一个在线营销的概念,是指当访客点击一个搜索引擎优化的搜索结果进入的第一个页面或“着陆”页面.这是一个重要的页面,它和提供的产品或服务的广告有点类似,提供了与产品相关的精确的信息,告诉客户可以购 ...
- Enhance Magento 404 page
Magento default installation already has a predefined custom 404 page (no-route). But is it enough t ...
- (四)网格(dataGrid)
一.普通网格 前端index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8& ...
- 20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
- PS网页设计教程XXV——使用Photoshop设计的老式组合布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- 11、Grafana 5.0 新功能特性(译文)
Grafana v5.0的新功能 这是Grafana有史以来最重大的更新. 本文将详细介绍主要的新功能和增强功能. New Dashboard Layout Engine enables a mu ...
- Yeoman 官网教学案例:使用 Yeoman 构建 WebApp
STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...
- 后台管理UI的选择
最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
- ASP.NET MVC移动M站建设-使用51Degree 移动设备的识别
上一篇,介绍了移动M站的建设.说的很简单.觉得好像也没把M站给讲清楚.估计是对移动M站 认识还不够深刻吧.这里,在讲一讲51Degree 这个组件. 51degrees 号称是目前最快.最准确的设备检 ...
随机推荐
- 我的ORM框架
任何系统的基础,都可以算是各种数据的增删改查(CRUD).最早操作数据是直接在代码里写SQL语句,后来出现了各种ORM框架.C#下的ORM框架有很多,如微软自己的Entity Framework.第三 ...
- Linux文件属性与权限
一.在Linux里面,任何一个文件都具有“User,Group,Others”(用户.用户组.其他人)三种身份 二.用户组最有用的功能之一,就是当你在团队开发资源的时候,且每个账号都可以有多个用户组的 ...
- oracle-插入到数据库中为日期
oracle中创建一个表,其中一个字段为date,当我们进行插入操作 create table xf_allsalestotal ( xf_txdate date not null, xf_store ...
- PHP : 数据库中int类型保存时间并通过年月份时分秒进行显示
1.表设计: 2.数据库操作页面:将时间戳插入到数据库中 我们到数据库中可以看到: 3.我们将数据进行显示: 页面结果:(二维数组) 4.以为用mysqli_fetch_all得到的是二维数组,那么我 ...
- ubuntu16.4安装 VirtualBox
1) 从oracle官网下载virtual box安装包 2) 安装支持包 sudo apt-get install libqt5x11extras5 libsdl1.2debian 3) sudo ...
- ABI 管理
https://developer.android.google.cn/ndk/guides/abis.html 不同 Android 手机使用不同的 CPU,因此支持不同的指令集.CPU 与指令集的 ...
- 2018.7.23 oracle中的CLOB数据类型
Oarcle中的LOB类型 1.在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这 ...
- EF问题集合
1. 在使用数据迁移的过程中,如果手工删除了本地数据库之后,再次尝试连接被删除的数据库,会有以下提示: System.Data.SqlClient.SqlException (0x80131904): ...
- 为什么实例没有prototype属性?什么时候对象会有prototype属性呢?
为什么实例没有prototype属性?什么时候对象会有prototype属性呢? javascript loudou 1月12日提问 关注 9 关注 收藏 6 收藏,554 浏览 问题对人有帮助,内容 ...
- element-UI时间控件:日期时间的选择范围的控制方法
例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 :当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选:实现如下: <el ...