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. Javascript基础--数据类型

    一.基本数据类型 1.字符类型:表示字符的类型,例:'aaa',"aaaa",'123456',''(空字符) 2.数字类型:表示数字的类型,例:0,1,3.1415936等 特殊 ...

  2. 微信小程序又一爆炸功能上线-云开发

    云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...

  3. 在android开发中如何使用JavaMail程序

    javaMail,是提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.我们可以基于JavaMail开发出类似于Microsoft  ...

  4. 浏览器中使用calc不识别

    在使用css3中的calc运算函数时,发现浏览器不识别,当时代码是这样的 width:calc(100%-50px); 经过查询官网原来发现这里有个需要注意的地方就是在进行加减运算的时候,必须在运算符 ...

  5. PHP ： url中出现乱码问题

    例子: 在html中,将数据传到url中 当我点击“提交回复”后,跳转页面中将显示: 我们获取这个参数: 但是由于传过来的参数是中文,url会进行自动的解析成二进制的代码,那我们后台接受到的数据是解析 ...

  6. GitLab 的安装及汉化

    系统环境:CentOS7 切记:安装GitLab 时会自动安装GitLab自带的Nginx,为了避免冲突,部署环境时先不要安装Nginx. 官网安装及汉化安装 官网安装最新版GitLab:https: ...

  7. 22 Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  8. Git入门体验

    Git这个东西我也是最近才知道的,然后知道后却发现一个事实:自己真的是太LOW啦!竟然连Git都不知道!!!??? Git 在实际协同工作时会为我们提供巨大帮助, 下面简单介绍一下Git的用法: 一. ...

  9. IOS NSThread 线程间通信

    @interface HMViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageView; @end @im ...

  10. 问题 B: 矩形类中运算符重载【C++】

    题目描述 定义一个矩形类,数据成员包括左下角和右上角坐标,定义的成员函数包括必要的构造函数.输入坐标的函数,实现矩形加法,以及计算并输出矩形面积的函数.要求使用提示中给出的测试函数并不得改动. 两个矩 ...