模仿segmentfaul问题列表的css问题 财富值29

2016-11-06 15:02发布

沉迷后端2年,也了解前端框架,现在想写点练手项目,发现主要问题就是布局, bootstrap有时不满足需求还是需要自己写。比如最近想模仿segmentfault,现在问题就是问题列表标签那块是怎么做的?

<div class="container question">             <div class="left">                 <div class="leftItem hidden-xs">0投票</div>                 <div class="leftItem">1回答</div>                 <div class="leftItem hidden-xs">41<small>浏览</small></div>                 <div style="clear: both;"></div>             </div>             <div class="right">                 <div class="rightTop">                     <ul class="list-inline">                         <li>作者</li>                         <li>7分钟前</li>                     </ul>                 </div>                 <h5 class="title"><a >Java 是一种可,是由 Sun Mic 月推出的 Java 程序设计语言和 Java 平台(即 JavaSE, JavaEE, JavaME)的总称。</a> </h5>                 <div class="tags">                     <ul class="list-inline ">                         <li>                             <a href="">java</a>                         </li>                         <li>                             <a href="">js</a>                         </li>                     </ul>                 </div>              </div>         </div>       .question {             background-color: #C0A16B;         }                  .left {             float: left;             border: solid red 1px;             box-sizing: border-box;             line-height: 3;             text-align: center;         }                  .leftItem {             float: left;             margin: 20px 2px 2px 2px;             padding: 2px;             border: solid green 1px;         }                  .right {             margin-left: 5px;             overflow: auto;             border: solid skyblue 1px;         }                  .rightTop {             margin: 5px 0 0 3px;             padding: 0px;             border: solid palevioletred 1px;         }                  .title {             display: inline;         }                  .tags>ul>li>a {             background-color: #5CB85C;             color: #008000;             text-align: center;             margin: 2px;             float: right;         }

效果如下,希望回答。能延伸一些和代码建议更感激,更希望能给一点布局方面的书籍 谢谢。

友情提示: 此问题已得到解决,问题已经关闭,关闭后问题禁止继续编辑,回答。
该问题目前已经被作者或者管理员关闭, 无法添加新回复
2条回答

前端无秘密,你可用开发者工具直接查看每个标签是怎么定义的结构和样式

一周热门 更多>