Semantic 框架做一个 Pinterest网站

中文官网

Aim

模拟Pinterest 写一个网站

Result

Code&&diff

与标准程序对比

搜索栏

找了半天没找到…于是找了一个能合并元素的div

<div class="ui fixed menu" style="height:54px;padding:10px 0px 10px 10px">
      <div class="ui right labeled input">
        <div class="ui basic label" style="padding:2px 0 2px 5px"><i class="red big pinterest icon"> </i></div>
        <input type="text" placeholder="Search..." style="background-color:#dfdfdf;min-width:356px">
        <div class="ui basic label"><i class="sidebar icon"></i></div>
      </div>

      <div class="ui left attached basic button" style="margin:0 0 0 10px">
        <i class="red pin icon"></i>YOUR ACCOUNT
      </div>
      <div class="right attached ui basic button" >
        <i class="right setting icon"></i>
      </div>
</div>

<div class="ui steps">
    <div class="step">
        <i class="user icon"></i>
    </div>
    <div class="step">
        <div class="ui category search">
          <div class="ui icon input">
            <input class="prompt" type="text" placeholder="Search animals...">
            <i class="search icon"></i>
          </div>
          <div class="results"></div>
        </div>
    </div>
    <div class="step">
        <i class="announcement icon"></i>
        <i class="sign in icon"></i>
    </div>

</div>

图片显示

又是因为没找到cards…像标程的好处在于能根据页面调节显示个数

<div class="ui link cards" style="margin:60px 0 0 0px" id='contentor'>
      <div class="ui card" style="width:236px">
        <div class="image">
          <img src="images/pinpic01.jpg">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>Friends</a>
          </div>
          <div class="description">
            Matthew is an interior designer living in New York.
            Matthew is an interior designer living in New York.
            Matthew is an interior designer living in New York.
            Matthew is an interior designer living in New York.
            Matthew is an interior designer living in New York.
          </div>
        </div>
        <div class="extra content">
          <span class="right floated">
            Joined in 2013
          </span>
          <span>
            <i class="user icon"></i>
            75 Friends
          </span>
        </div>
      </div>
  
      <div class="ui card" style="width:236px">
        n个与上面相同的
      </div>
    </div>

<div class="ui four column very relaxed grid">
        <div class="column">
            <div class="ui people shape">
              <div class="sides">
                <div class="active side">
                  <div class="ui card">
                    <div class="image">
                        <img class="ui medium rounded image" src={% static "/images/pinpic05.jpg"%}>

                    </div>
                    <div class="content">
                      <div class="header">Steve Jobes</div>
                      <div class="meta">
                        <a>Acquaintances</a>
                      </div>
                      <div class="description">Steve Jobes is a fictional character designed to resemble someone familiar to readers. </div>
                    </div>
                    <div class="extra content">
                      <span class="right floated">Joined in 2014 </span>
                      <span><i class="user icon"></i> 151 Friends </span>
                    </div>
                  </div>
                </div>
                <div class="side">
                  <div class="ui card">
                    <div class="image">
                       <i class="Find icon"></i>
                    </div>
                    <div class="content">
                      <a class="header">Stevie Feliciano</a>
                      <div class="meta">
                        <span class="date">Joined in 2014</span>
                      </div>
                      <div class="description">Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. </div>
                    </div>
                    <div class="extra content">
                      <a><i class="user icon"></i> 22 Friends </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
  n个与上面相同的
</div>

conclusion

用框架还是挺难找的..

所以得多参考别人的框架使用