首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》24.6.3 栏目页设计与实现

关灯直达底部

栏目相当于一个目录,集中了所有详细内容的名称,便于访问者能一眼看出每个详细内容的概要。同时,对于上下相邻的两个栏目,可通过其编号的奇偶性来定义不同的背景色。

对于每个内容,都使用二级标题的形式来展示,大标题是文章的标题,使用粗体显示,小标题是副标题,不使用粗体。

栏目页使用列表的方式将法律法规、新闻活动信息等相同的内容列出,同时每个内容元素带上a链接,以便用户点击时可以访问详细内容。其实现代码如下。


<ul>    <li>      <a href="news02.html">        <dt>          <hgroup>            <h1>落实群教实践活动,积极开展打非行动</h1>            <h2>区安监局直管科坚持群众路线教育实践活动,创新安全监管模式</h2>          </hgroup>        </dt>      </a>    </li>    <li>      <a href="news124.html">        <dd>          <p><img src="img/15image002.jpg"></p>        </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>p:before{    background:#e5e8ef;}.list_ul li a{display:block;}.list_ul li a>*{    color:#707070;    height:60px;    vertical-align: middle;}.list_ul li dd p{    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 栏目页效果