zoukankan      html  css  js  c++  java
  • 静态页面复习--用semantic UI写苹果官网

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
      </head>
      <body>
        <div class="ui  inverted fitted borderless fixed nine item menu">
          <a href="#" class="item">
            <div class="ui image">
              <img src="images/appleicon.png" alt="" />
            </div>
          </a>
          <a href="#" class="item">Mac</a>
          <a href="#" class="item">iPad</a>
          <a href="#" class="item">iPhone</a>
          <a href="#" class="item">Watch</a>
          <a href="#" class="item">Music</a>
          <a href="#" class="item">技术支持</a>
          <a href="#" class="item">
            <div class="ui image">
              <img src="images/searchicon.png" alt="" />
            </div>
          </a>
          <a href="#" class="item">
            <div class="ui image">
              <img src="images/buyicon.png" alt="" />
            </div>
          </a>
        </div>
    
        <div class="ui secondary vertical basic segment">
          <div class="ui fluid image">
            <img src="images/banner.png" alt="" />
          </div>
        </div>
    
        <div class="ui secondary vertical basic segment">
          <div class="ui fitted  text menu">
            <div class="item">
              <div class="ui image">
                <img src="images/img1.png" alt="" />
              </div>
            </div>
            <div class="item">
              <div class="ui image">
                <img src="images/img2.png" alt="" />
              </div>
            </div>
            <div class="item">
              <div class="ui image">
                <img src="images/img3.png" alt="" />
              </div>
            </div>
            <div class="item">
              <div class="ui image">
                <img src="images/img4.png" alt="" />
              </div>
            </div>
          </div>
        </div>
    
        <div class="ui vertical very padded segment">
          <div class="ui container">
            <div class="sub header">
              双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色外观仅于 128GB 及以上存储容量的机型提供。
            </div>
    
            <div class="ui divider"></div>
    
            <div class="ui five column grid">
              <div class="ui column">
                <div class="ui vertical text menu">
                  <div class="item">
                    <h4>Apple Store 商店</h4>
                  </div>
                  <a class="item">
                      查找零售店
                  </a>
                  <a class="item">
                      iPad
                  </a>
                  <a class="item">
                      iPhone
                  </a>
                  <a class="item">
                      Watch
                  </a>
                  <a class="item">
                      iPod
                  </a>
                </div>
              </div>
              <div class="column">
              <div class="ui vertical text menu">
                      <div class="item">
                          <h4>Apple Store 商店</h4>
                      </div>
                      <a class="item">
                          查找零售店
                      </a>
                      <a class="item">
                          iPad
                      </a>
                      <a class="item">
                          iPhone
                      </a>
                      <a class="item">
                          Watch
                      </a>
                      <a class="item">
                          iPod
                      </a>
                  </div>
              </div>
              <div class="column">
                  <div class="ui vertical text menu">
                      <div class="item">
                          <h4>Apple Store 商店</h4>
                      </div>
                      <a class="item">
                          查找零售店
                      </a>
                      <div class="item">
    
                      </div>
                      <div class="item">
                          <h4>商务应用</h4>
                      </div>
                      <a class="item">
                          Apple 与商务
                      </a>
                      <a class="item">
                          商务选购
                      </a>
                  </div>
              </div>
              <div class="column">
                  <div class="ui vertical text menu">
                      <div class="item">
                          <h4>Apple Store 商店</h4>
                      </div>
                      <a class="item">
                          查找零售店
                      </a>
                      <div class="item">
    
                      </div>
                      <div class="item">
                          <h4>商务应用</h4>
                      </div>
                      <a class="item">
                          Apple 与商务
                      </a>
                      <a class="item">
                          商务选购
                      </a>
                  </div>
              </div>
    
              <div class="column">
                  <div class="ui vertical text menu">
                      <div class="item">
                          <h4>Apple Store 商店</h4>
                      </div>
                      <a class="item">
                          查找零售店
                      </a>
                      <a class="item">
                          iPad
                      </a>
                      <a class="item">
                          iPhone
                      </a>
                      <a class="item">
                          Watch
                      </a>
                      <a class="item">
                          iPod
                      </a>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

    新用到的样式:

    fitted:去掉padding

    borderless:去掉边框

    secondary:上下多了浅灰色的边

    basic:原始div,去掉各种格式

    sub header:比ui header小一级

    ui fluid image:图片填充满容器

  • 相关阅读:
    (mysql)卸载5.0安装6.05出现“Error Nr. 2003 : Can't connect to MySQL server on 'localhost' (10061). ”的解决办法
    (Redundancy)关于服务器冗余的几个疑问,请知道的帮忙解答.
    (C#)XML文件操作3
    POJ 3635 Full Tank(最短路径变形 + 优先队列)
    POJ 2286 The Rotation Game(DFS + 迭代加深)
    POJ 1141 Brackets Sequence(区间DP + 打印路径)
    POJ 3460 Booksort(IDA* + 估价函数设计)
    POJ 2908 Quantum(BFS + 优先队列)
    NOI 1997 积木游戏(解题报告)
    NYOJ 110 决斗(区间DP + 黑书例题)
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6166430.html
Copyright © 2011-2022 走看看