365体育备用网址报道24.6.3栏目页设计与实现_365体育备用网址官网资讯

栏目相当于一个目录,集中了一切详细内容的名称,便于访问者能一眼更看出每个详细内容的概要。同时,对于上下相邻的两个栏目,通过其编号的奇偶性来定义不同的背景色。
对于每个内容,我们使用二级标题的形式来展示,大标题是文章的标题,使用粗体显示,小标题是副标题,不使用粗体。
栏目页使用列表的方式将法律法规、新闻运动信息等相同的内容列出,同时每个内容元素带上a链接,以便用户点击时能够访问详细内容。其代码实现如下:

<ul class="list_ul">
    <li>
      <a href="news02.HTML" class="tbox">
        <dt>
          <hgroup>
            <h1>落实群教实践运动,积极开展打非行动</h1>
            <h2>区安监局直管科坚持群众路线教训实践运动,创新安全监管模式</h2>
          </hgroup>
        </dt>
      </a>
    </li>
    <li>
      <a href="news124.html" class="tbox">
        <dd>
          <div><img src="img/15image002.jpg"></div>
        </dd>
        <dt>
          <hgroup>
            <h1>省安全生产示范县命名授牌暨市最佳安监人员命名仪式举行</h1>
            <h2>正值全国安全生产月运动如火如荼开展的重要时刻,6月16日上午,在</h2>
          </hgroup>
        </dt>
      </a>
    </li>
</ul>

相应的样式操纵代码如下所示:

.list_ul li{
    overflow:hidden;
    background:#f2f3f7;
}
.list_ul li:nth-of-type(2n){
    background:#e5e8ef;
}
.list_ul li:nth-of-type(2n) dd>div:before{
    background:#e5e8ef;
}
.list_ul li a{display:block;}
.list_ul li a>*{
    color:#707070;
    height:60px;
    vertical-align: middle;
}
.list_ul li dd div{
    position:relative;
    width:100px;
    height:60px;
    overflow:hidden;
    text-align:center;

}
.list_ul li dd img{
    width:100%;
    min-height:100%;
}
.list_ul li hgroup>*{
    text-indent:10px;
    line-height:20px;
    font-size:14px;
    font-weight:100;
    overflow: hidden;
    height: 20px;
    padding-right: 10px;
}
.list_ul li hgroup>h2{
    font-size:12px;
    color:#909090;
}

法律法规及最新动态的两个栏目的最终实现效果如图24-25所示。

图24-25 栏目页效果

------分隔线----------------------------

公布评论 (70人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换凯时开户 国际娱乐
最新评论