用网格写一个landing page

ui image # 插入图片
img

ui menu # 导航栏

fixed #一直停留在浏览器的正上方

ui grid # 网格系统
column

icon # 添加图标

basic # 去边框线

vertical text menu # 一列一列的菜单栏

html代码:

<!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="images/banner.jpg" alt="" />
      </div>
    </div>

    <div class="ui vertical basic segment">
      <div class="ui grid">
        <div class="ten wide column">
          <div class="ui image">
            <img src="images\devices2.png" alt="" />
          </div>
        </div>
        <div class="six wide column">
          <h2 class="ui header">
            <i class="icon book"></i>
            This is a 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 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">
              <h3 class="ui  inverted header">Company</h3>
            </div>

            <div class="item">
              address: ON
            </div>

            <div class="item">
              Tel: 15997340559
            </div>

          </div>
        </div>

        <div class="four wide column">
          <div class="ui vertical inverted text menu">
            <div class="item">
              <h3 class="ui inverted header">Company</h3>
            </div>

            <div class="item">
              address: ON
            </div>

            <div class="item">
              Tel: 15997340559
            </div>

          </div>
        </div>

        <div class="four wide column">
          <div class="ui vertical inverted text menu">
            <div class="item">
              <h3 class="ui inverted header">Company</h3>
            </div>

            <div class="item">
              address: ON
            </div>

            <div class="item">
              Tel: 15997340559
            </div>

          </div>
        </div>

        <div class="four wide column">
          <div class="ui vertical inverted text menu">
            <div class="item">
              <h3 class="ui inverted header">Company</h3>
            </div>

            <div class="item">
              address: ON
            </div>

            <div class="item">
              Tel: 15997340559
            </div>

          </div>
        </div>

      </div>
    </div>
  </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS网格布局完整指南
    简介 CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，旨在改变我们基于网格设计的用户界面方式...
    咕咚咚bells阅读 7,384评论 0赞 4
  • awesome-android
    afinalAfinal是一个android的ioc，orm框架 https://github.com/yangf...
    passiontim阅读 15,770评论 2赞 45
  • 我与小鸟友好互访
    早上惊喜地发现梨树上有个鸟窝，我搬来凳子，往里面瞧了几眼，结果好失望，既没小鸟也没鸟蛋，原来是个空巢。这会我坐阳台...
    黯黯红尘一路相伴阅读 2,563评论 0赞 1

友情链接更多精彩内容