[html+CSS] 如何用 DIV 打造出漂亮的大日期新聞列表


首先來看個範例:



你也想要做出這種大日期在前方的新聞列表嗎?
用以下HTML跟CSS就可以囉。

HTML:

<!--http://blog.webgolds.com/view/361 -->
<div class="info-list">
  <ul>
      <li>
          <a href="http://blog.webgolds.com/view/360">
              <div class="time"> 
                <div class="day">02</div>
                2017.05
              </div>
              <div class="cont">
                  <div class="title">如何用UL, LI 打造出表格 TABLE, TR</div>
                  <div class="detail">
                      首先先來看個範例
                  </div>
              </div>
          </a>
      </li>
      <li>
          <a href="http://blog.webgolds.com/view/304">
              <div class="time"> 
                <div class="day">02</div>
                2017.05
              </div>
              <div class="cont">
                  <div class="title">CSS - 讓DIV永遠在最上方 置頂作法</div>
                  <div class="detail">
                      首先先來看個範例
                  </div>
              </div>
          </a>
      </li>
  </ul>
</div>


CSS:
body{
  font-family: Helvetica, Arial, 'LiHei Pro', 
  '微軟正黑體', '新細明體', sans-serif;
}
.info-list {
    margin-top: 49px;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.info-list li {
    overflow: hidden;
    padding-bottom: 21px;
    border-bottom: 1px solid #cfd0d2;
    margin-top: 32px;
}
a {
    color: #337ab7;
    text-decoration: none;
}
.info-list .time {
    float: left;
    width: 16%;
    background: #ffffff;
    text-align: center;
    border: 1px solid #f0f0f0;
    color: #999999;
    font-size: 1.125em;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 7px;
    padding-bottom: 14px;
}
.info-list .time .day {
    color: #404040;
    font-size: 1.67em;
}
.info-list .cont {
    float: right;
    width: 81.2%;
}
.info-list .cont .title {
    font-size: 1.125em;
    color: #404040;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.info-list .cont .detail {
    font-size: 0.75em;
    color: #666666;
    margin-top: 6px;
    line-height: 1.667em;
    height: 3.334em;
    overflow: hidden;
}



 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 1516