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的更多相关文章

  1. 简约而不简单：网站着陆页的设计（Landing Page Design）

    着陆页是一个在线营销的概念,是指当访客点击一个搜索引擎优化的搜索结果进入的第一个页面或“着陆”页面.这是一个重要的页面,它和提供的产品或服务的广告有点类似,提供了与产品相关的精确的信息,告诉客户可以购 ...

  2. Enhance Magento 404 page

    Magento default installation already has a predefined custom 404 page (no-route). But is it enough t ...

  3. （四）网格（dataGrid）

    一.普通网格 前端index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8& ...

  4. 20款免费的 PSD 网站模板【免费下载】

    如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...

  5. PS网页设计教程XXV——使用Photoshop设计的老式组合布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  6. 11、Grafana 5.0 新功能特性（译文）

      Grafana v5.0的新功能 这是Grafana有史以来最重大的更新. 本文将详细介绍主要的新功能和增强功能. New Dashboard Layout Engine enables a mu ...

  7. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  8. 后台管理UI的选择

    最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...

  9. ASP.NET MVC移动M站建设-使用51Degree 移动设备的识别

    上一篇,介绍了移动M站的建设.说的很简单.觉得好像也没把M站给讲清楚.估计是对移动M站 认识还不够深刻吧.这里,在讲一讲51Degree 这个组件. 51degrees 号称是目前最快.最准确的设备检 ...

随机推荐

  1. 构建跨平台APP开发的两本书，这里重点推荐下

    第一本是<构建跨平台:jquery Mobile移动应用实战> 是目前jqm开发写的比较入门的一本书,上手很快,但是高手我觉得就没有必要学习了,因为写的比较浅显. 第二本是<构建跨平 ...

  2. SQL Server 2008R2 18456错误解决方案

    SQL Server 2008R2 18456错误解决方案 微软解释说,因密码或用户名错误而使身份验证失败并导致连接尝试被拒时,类似下面的消息将返回到客户端:“用户 '<user_name> ...

  3. Struts_OGNL(Object Graph Navigation Language) 对象图导航语言

    1.访问值栈中的action的普通属性: 请求: <a href="ognl.action?username=u&password=p">访问属性</a& ...

  4. mysql：JDBC url 参数详解

    MySql链接url参数详解 jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值1][&参数名2][=参数值2]... ...

  5. 04、Spark Standalone集群搭建

    04.Spark Standalone集群搭建 4.1 集群概述 独立模式是Spark集群模式之一,需要在多台节点上安装spark软件包,并分别启动master节点和worker节点.master节点 ...

  6. input-file类型accept 属性对性能的影响

    上传图片的时候,有时会加一些限制,如下,进行上传类型的过滤,如 <input type="file" name="pic" id="pic&qu ...

  7. 显示、更改ubuntu linux主机名(计算机名)

    在bash中输入hostname可以显示计算机名.Linux和windows都可以使用这条指令. 主机名保存在/etc/hostname文件中 需要进入Root权限才可以修改该文件. sudo ged ...

  8. 温故而知新：Asp.Net中如何正确使用Session

    原文链接作者:菩提树下的杨过出处:http://yjmyzz.cnblogs.com Asp.Net中的Session要比Asp中的Session灵活和强大很多,同时也复杂很多:看到有一些Asp.Ne ...

  9. python剑指offer数组中出现次数超过一半的数字

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  10. numpy中生成随机矩阵并打印出矩阵的shape

    from numpy import * c=zeros((4,5)) print c.shape print numpy.random.random((2,3))