企业网站制作超简单教程第四篇：文章列表页面实际操作

       上一篇文章《企业网站制作超简单教程第三篇：产品列表页面实际操作》 讲了如何把制作好的首页“公司简介”和“首页产品展示”两个板块删除预留给产品列表页和文章列表页，上一篇我们使用了无序列表UL li做了产品列表横向排列，这篇文章比较简单，使用UL LI制作文章列表制作文章列表。在操作之前，和前一篇文章一样，将产品列表页以及产品列表页外调CSS样式表都复制一份重命名（注意新命名的 CSS样式表名称需要在新文件里面调用更新）。

       这里调用新闻文章页面不用那么复制，只需要掌握一个一条LI包含：文章标题、发布时间以及文章热度（文章热度我们完全可以调用文章的点击次数），这里代码我就不再原文件里面操作了，直接演示这一块的写法：

      1、通过样式表我们知道需要放置文章列表的这一块<div class="db">的宽为760px;高在这里就暂时不设置。

      2、这一块上面有面包屑导航<div id="nv">首页>列表页</div>，下部有分页：<div class="page">1-2-3-4-5</div>，所以我在这两个层的中间准备添加一个DIV，给一个ID选择符：textlist 如下：

    <div id="textlist">

    <ul>

    <li><span>热度：<font color="#FF0000">100℃</font></span><span>2015-05-07</span>Davidszhou企业建站搜索引擎排名优化</li>

 <li><span>热度：<font color="#FF0000">100℃</font></span><span>2015-05-07</span>Davidszhou企业建站搜索引擎排名优化</li>

 <li><span>热度：<font color="#FF0000">100℃</font></span><span>2015-05-07</span>Davidszhou企业建站搜索引擎排名优化</li>

    </ul>

    </div>

        注意一下<span></span>的位置，为什么放在标题前面，后面我们可以自己试验一下，我们继续往下写。textlist的宽度是760px; 这里我也给li的宽为760px;高度为30px;标题的行高也是30px;详细规则如下：

#textlist ul { margin:0px; padding:0px; list-style:none;}

#textlist ul li { width:100%; height:30px; line-height:30px; text-indent:2em;}

#textlist ul li span {

float:right;/*让span居右,这里你也可以实验一下，把日期和热度位置互换，以及把span和文章标题位置互换看看显示效果*/

text-indent:0px;/* 由于前面我给了LI的缩进2个字符，所以这里在日期和热度我不需要或者不需要那么大，一种可以使用数字来调试，即将0改为自己想调试的数字*/

}

如果我想给每一个文章标题下面加一个虚线区别，可以在#textlist ul li 规则里面添加：border-bottom:dotted 1px #CCCCCC;又或者我想第一条的背景是白色，第二条是灰色，如何调试？请移步：《帝国CMS利用伪类选择器制作多彩样式tags》这篇文章都有涉及，只不过将其给文字颜色换成background背景色罢了。

      为了不给忘记溢出后的样式别忘记加：li { overflow:hidden;} 所有li下溢出文本都隐藏。

      最后结束：附件里面写的和文章里面写的会有出入，能看出在哪里么？为何修改？

企业网站制作超简单教程第三篇：文章列表页面实际操作附件下载：

TAGS:企业网站建设 , 文章列表页面

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/46.html转载请标注此链接