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

作者:Davidszhou   来源:SEO优化博客   时间:2015-05-07 21:37:24   点击:

       上一篇文章《企业网站制作超简单教程第三篇:产品列表页面实际操作》 讲了如何把制作好的首页“公司简介”和“首页产品展示”两个板块删除预留给产品列表页和文章列表页,上一篇我们使用了无序列表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下溢出文本都隐藏。

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

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

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

企业网站制作超简单教程第三篇:文章列表页面实际操作
文件类型: .html 4faa1787b81c877f8731a10df295bd93.html (1.53 KB)

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

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

文章推荐
网站统计
文章总数:129
今天发布:0
软件资源数:18