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. staticmethod classmethod property方法

    @staticmethod 静态方法 函数修饰符,用来修饰一个函数,类似于装饰器 class Dog(object): def __init__(self,name): self.name = nam ...

  2. 用HttpSessionListener统计在线用户或做账号在线人数管理

    使用HttpSessionListener接口可监听session的创建和失效 session是在用户第一次访问页面时创建 在session超时或调用request.getSession().inva ...

  3. 将 Azure SQL 内数据下载到本地，满足企业的「数据收集」

    嫌长不看版 本文介绍了通过复制和导出两个操作,将 Azure SQL 数据库中的内容转移至其他位置(例如本地环境)的具体做法.借此可以帮助用户在 Azure 中运行数据库的同时,在本地或指定的其他位置 ...

  4. 我的visual studio 配色方案 Rubik c++版

    只是更改了c++的配色,放出来与大家分享,因为大胆地采用了各种颜色,所以我把它取名叫做Rubik,因为Rubik‘s cube也就是魔方,我本人是非常喜欢魔方的,然后也符合颜色丰富多彩的这个特征,希望 ...

  5. iOS开发：小技巧积累

    1.获取全局的Delegate对象,这样我们可以调用这个对象里的方法和变量: [(MyAppDelegate*)[[UIApplication sharedApplication] delegate] ...

  6. url获取MVC域，action，controller的方法

    域:filterContext.RequestContext.RouteData.DataTokens["area"] 控制器:filterContext.RequestConte ...

  7. 数集合有多少个TOJ(2469)

    题目链接:http://acm.tju.edu.cn/toj/showp2469.html 感觉这个题目有点问题,算了不管他了,反正A了. 这里要注意的是求这个集合有多少种,那么就是要剔除重复数后,再 ...

  8. 调用外部EXE文件

    实现效果: 知识运用: Process类的Start方法 实现代码: private void button1_Click(object sender, EventArgs e) { OpenFile ...

  9. MySQL 主从同步 Slave_IO_Running: No

    MariaDB [chen]> show slave status \G *************************** 1. row ************************* ...

  10. 20145238-荆玉茗 《Java程序设计》第10周学习总结

    20145238 <Java程序设计>第10周学习总结 网络编程 ·网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定 ...