html课题研究学习日记#33

编写侧边栏中的订阅栏和热门类别

订阅栏

主要以图片形式展现，在一个div中每行3列放置6个图片链接

.sidebar .instagram-wrapper a {

    width: 33.3333%;

    margin: 0;

    float: left;

    border-right: 5px solid #ffffff;

    border-bottom: 5px solid #ffffff;

}

热门类别

主要以ul li 列表形式展示

CSS样式代码

.link-widget li {

    padding: 0.4rem 0.2rem 0.6rem;

    text-transform: capitalize;

    line-height: 1;

    font-weight: 500;

    position: relative;

    margin: 0;

    border-bottom: 1px dashed #dadada;

}

.link-widget li:last-child {

    border-bottom: 0 dashed #dadada;

}

.link-widget li span {

    position: absolute;

    right: 0;

}

HTML代码

<div class="widget">

  <h2 class="widget-title">热门类别 </h2>

   <div class="link-widget">

      <ul>

      <li><a href="#">时尚 <span>(21)</span></a></li>

      <li><a href="#">生活 <span>(15)</span></a></li>

       <li><a href="#">艺术 & 创造 <span>(31)</span></a></li>

      <li><a href="#">健康 美丽 <span>(22)</span></a></li>

       <li><a href="#">衣服 <span>(66)</span></a></li>

        <li><a href="#">娱乐 <span>(11)</span></a></li>

       <li><a href="#">食物 & 饮品 <span>(87)</span></a></li>

        </ul>

      </div>

 </div>

本日学习时间3小时