Week4 hw3: Create a Web as Pinterest

Target

Pintest

Appendix

semantic-ui

Build a Project based on Semantic UI

Copy these basic folder from semantic files.
Here I am using a new TextEdit named "atom" by github.

Start with a empty html

fulfil the header with semantic word:

  <head>
    <meta charset="utf-8">
    <title> Made by Jet </title>
    <link rel="stylesheet" href="css/semantic.css">
    <script src="js/jquery.min.js"></script>
    <script type="js/semantic.js"></script>
  </head>

Add a menu in top

<div class="ui top attached menu">
  <div class="ui item">
  <div class="item">
  <div class="item">
  <div class="right menu">
Top Menu

Add Containers

Here I don't know which container I should use, So get some idea from inspector:

Inspector
Placed with cards

All code here

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Made by Jet </title>
    <link rel="stylesheet" href="css/semantic.css">
    <script src="js/jquery.min.js"></script>
    <script type="js/semantic.js"></script>
  </head>
  <body>
    <div class="ui top attached menu">
      <div class="ui item">
        <i class="wrench icon"></i>
        Config
      </div>
      <div class="item">
        <i class="save icon"></i>
        Save
      </div>
      <div class="item">
        <i class="user icon"></i>
        Log
      </div>
      <div class="right menu">
        <div class="ui right aligned category search item">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search ...">
            <i class="search link icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
    </div>


    <div class="ui link cards">
      <div class="card">
        <div class="image">
          <img src="images/pic1.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>好友</a>
          </div>
          <div class="description">Matthew is an interior designer living in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2013年加入 </span>
          <span><i class="user icon"></i> 75 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic2.jpg">
        </div>
        <div class="content">
          <div class="header">Molly</div>
          <div class="meta">
            <span class="date">Coworker</span>
          </div>
          <div class="description">Molly is a personal assistant living in Paris. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2011年加入 </span>
          <span><i class="user icon"></i> 35 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic3.jpg">
        </div>
        <div class="content">
          <div class="header">Elyse</div>
          <div class="meta">
            <a>Coworker</a>
          </div>
          <div class="description">Elyse is a copywriter working in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2014年加入 </span>
          <span><i class="user icon"></i> 151 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic4.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>好友</a>
          </div>
          <div class="description">Matthew is an interior designer living in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2013年加入 </span>
          <span><i class="user icon"></i> 75 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic5.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>好友</a>
          </div>
          <div class="description">Matthew is an interior designer living in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2013年加入 </span>
          <span><i class="user icon"></i> 75 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic6.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>好友</a>
          </div>
          <div class="description">Matthew is an interior designer living in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2013年加入 </span>
          <span><i class="user icon"></i> 75 Friends </span>
        </div>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/pic7.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>好友</a>
          </div>
          <div class="description">Matthew is an interior designer living in New York. </div>
        </div>
        <div class="extra content">
          <span class="right floated">2013年加入 </span>
          <span><i class="user icon"></i> 75 Friends </span>
        </div>
      </div>
    </div>


    <div class="ui bottom attached segment">
      <p> Nothing around here</p>
    </div>

  </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,596评论 2 45
  • 打工仔 关心家人健康问题的人,如:妈妈 老人家 注重养生的人 想赚外快的人 注重养生的人 老人家 ...
    ShuJiun阅读 322评论 0 0
  • 学围棋成上大学捷径? 汤敏 三连星围棋学校的棋童们和江苏队芈昱廷等职业高手过招,左一是梁天慈。 “阿尔法”与李世石...
    e198513c0d6a阅读 629评论 0 0
  • 上班偷懒之际来更一篇文,还是关于宠物的。 上篇简单讲了一下新到家宠物的基本用品和日常维护,今天结合我最近给我家猫猫...
    Dar_ling阅读 294评论 6 3