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. Ubuntu、Windows 、Linux集合

    一.Ubuntu/Windows双系统修复引导   首先说明:在Windows存在的前提下安装Ubuntu(或者Ubuntu系列)是不需要修复引导的.因为grub会自动搜索存在硬盘中的系统.   而在 ...

  2. MySQL的四种主要存储引擎

    在数据库中存的就是一张张有着千丝万缕关系的表,所以表设计的好坏,将直接影响着整个数据库.而在设计表的时候,我们都会关注一个问题,使用什么存储引擎.等一下,存储引擎?什么是存储引擎? 什么是存储引擎? ...

  3. April 10 2017 Week 15 Monday

    He alone is poor who does not possess knowledge. 没有知识,才是贫穷. Knowledge, as a important part of wisdom ...

  4. MySQL入门很简单: 4 创建 修改删除表

    1. 创建表的方法 1)创建表的语法形式 首先,选择数据库: USE 数据库名: 创建表: CREATE TABLE 表名 (属性名 数据类型 [完整性约束条件], 属性名 数据类型 [完整性约束条件 ...

  5. java集合框架——Map

    一.概述 1.Map是一种接口,在JAVA集合框架中是以一种非常重要的集合.2.Map一次添加一对元素,所以又称为“双列集合”(Collection一次添加一个元素,所以又称为“单列集合”)3.Map ...

  6. 检测浏览器中是否有Flash插件

    由于IE和非IE浏览器检测方式不同,所以代码如下 function hasPlugin(name){ debugger; name = name.toLowerCase(); for(var i=0; ...

  7. mm struct与pgd

    假如该vm_area_struct描述的是一个文件映射的虚存空间,成员vm_file便指向被映射的文件的file结构,vm_pgoff是该虚存空间起始地址在vm_file文件里面的文件偏移,单位为物理 ...

  8. Android OpenGL ES 画球体

    近期由于兴趣所向.開始学习OpenGL绘图. 本文以"画球体"为点,小结一下近期所学. > 初识OpenGL ES 接触OpenGL是从Android開始的.众所周知,And ...

  9. 楔积(Wedge Procut)

    原文链接 由拓扑学中表面(Surface)的定义及实例引入楔积的概念. 基础知识 先看Surface在欧几里得空间内的定义: 所有在Omega中的点w(参数空间中的点)被记作: 对应在R3中(欧几里德 ...

  10. wordpress问题集锦

    1.内容不自动换行 找到对应的样式,添加如下代码,width根据具体情况修改. width:640px;white-space:normal;word-break:break-all;word-wra ...