阿里百秀小案例

阿里百秀

• 生活馆

•                         <a href="" class="glyphicon glyphicon-picture">自然汇</a></li>
                      <li>
                          <a href="" class="glyphicon glyphicon-picture">科技湖</a>
                      </li>
                      <li>
                          <a href="" class="glyphicon glyphicon-picture">奇趣事</a>
                      </li>
                      <li>
                          <a href="" class="glyphicon glyphicon-picture">美食杰</a>
                      </li>
                  </ul>
              </div>
          </header>
          <article class="col-sm-7">
              <div class="news clearfix">
                  <ul>
                      <li>
                          <a href="">
                              <img src="./upload/lg.png">
                              <p>阿里百秀</p>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              <img src="./upload/1.jpg">
  
                              <p>阿里百秀</p>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              <img src="./upload/2.jpg">
  
                              <p>阿里百秀</p>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              <img src="./upload/3.jpg">
  
                              <p>阿里百秀</p>
                          </a>
                      </li>
                      <li>
                          <a href="">
                              <img src="./upload/4.jpg">
  
                              <p>阿里百秀</p>
                          </a>
                      </li>
                  </ul>
              </div>
              <div class="publish">
                  <div class="row">
                      <div class=" col-sm-9">
                          <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h1>
                              <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-24</p>
                              <p class="hidden-xs">
                                  指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位
  
                              </p>
                              <p class="text-muted visible-xs">阅读(2417)评论(1)赞（(18)</p>
                              <p class="text-muted hidden-xs">阅读(2417)评论(1)赞（(18) 趣味生活</p>
  
  
                      </div>
  
                      <div class="pic col-sm-3">
                          <img src="./upload/3.jpg " class="hidden-xs">
                      </div>
                  </div>
                  <div class="row">
                      <div class=" col-sm-9">
                          <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h1>
                              <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-24</p>
                              <p class="hidden-xs">
                                  指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位
  
                              </p>
                              <p class="text-muted visible-xs">阅读(2417)评论(1)赞（(18)</p>
                              <p class="text-muted hidden-xs">阅读(2417)评论(1)赞（(18) 趣味生活</p>
  
                      </div>
  
                      <div class="pic col-sm-3">
                          <img src="./upload/3.jpg " class="hidden-xs">
                      </div>
                  </div>
                  <div class="row">
                      <div class=" col-sm-9">
                          <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h1>
                              <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-24</p>
                              <p class="hidden-xs">
                                  指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位
  
                              </p>
                              <p class="text-muted visible-xs">阅读(2417)评论(1)赞（(18)</p>
                              <p class="text-muted hidden-xs">阅读(2417)评论(1)赞（(18) 趣味生活</p>
  
                      </div>
  
                      <div class="pic col-sm-3">
                          <img src="./upload/3.jpg " class="hidden-xs">
  
                      </div>
                  </div>
                  <div class="row">
                      <div class=" col-sm-9">
                          <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h1>
                              <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-24</p>
                              <p class="hidden-xs">
                                  指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位 指甲是经常容易被人忽略的部位
  
                              </p>
                              <p class="text-muted visible-xs">阅读(2417)评论(1)赞（(18)</p>
                              <p class="text-muted hidden-xs">阅读(2417)评论(1)赞（(18) 趣味生活</p>
  
                      </div>
  
                      <div class="pic col-sm-3">
                          <img src="./upload/3.jpg " class="hidden-xs">
  
                      </div>
                  </div>
  
              </div>
          </article>
          <aside class="col-sm-3">
              <a href="" class="banner">
                  <img src="./upload/zgboke.jpg ">
  
              </a>
              <a href="" class="hot">
                  <span class="btn btn-primary">热搜</span>
                  <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                  <p class="text-muted">这里收入国内各个领域的优秀博客，是一个全人工编辑的开放式博客和交流的展示平台</p>
              </a>
          </aside>
      </div>
  </div>
  

素材参考（黑马前端）