企业网站制作超简单教程第三篇：产品列表页面实际操作

    上一篇《企业网站制作超简单教程第三篇：列表页面构思》中讲到了充分利用做好的首页进行局部修改来完成产品列表以及新闻文章列表也制作，下面来进行实际操作：

先将首页文件拷贝一份以及首页外部调用的CSS文件拷贝一份，全部另命名。

如下图图一红框部分，我们要将这部分代码换掉，在浏览器打开本地首页页面，调用浏览器的开发者工具（F12）找到这部分最先的DIV位置如图二：

                （图一）

                                       (图二）

这部分在首页放的是公司简介以及首页的产品展示，在列表页面我需要换成产品列表以及公司新闻文章列表，现在我把“<div class="db">”这个层里面的内容全部删除，留出一个空盒子，这样就可以为后面放产品列表以及文章列表做准备。

OK！空盒子DIV已经准备好了，我现在要在这个里面放产品列表，先构思：每一个产品图片的宽度是多少？我一行需要准备放几列产品？也可以使用浏览器的开发者工具查看#db的宽是多少,如图：

得知：#db的宽为760px,准备把每一个产品图片的宽度设置为：160px，高度也是160px，那么一行能放下4列，余下120px,放五个的话又有点挤，每个产品还需要中间距，还需要设置边框之类，都会占据宽度。

下面开始写着部分的源码，一般我是喜欢在另外一个文档里面写，然后在套进去调试，这次 我们就在预留的DIV #db里面写，上一篇文章预留了使用<ul><li></li></ul>配合浮动让无序列表ul li 横排显示，

这里就体验一下：

<ul class="lista"> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> <li><img src="a.png"><p>内六角螺丝</p></li> </ul>

这里我给了UL一个class，选择符为：lista；

给.lista 的CSS样式：

.db .lista {
    margin: 0px;/*外边距都为0*/
    padding: 0px;/*内边距都为0*/
    list-style: inside  none;/*无序列表li前面默认的原点消失*/
}

.list下的li 样式：

.db .lista li {
    width: 164px;/*宽度为164px*/
    float: left;/*向左浮动，li的横向排列关键*/
    margin: 10px 10px 0px 15px;/*上外边距为10PX,右外边距为10PX，下外边距为0px,左外边距为15px,*/
}

这里为何给li的宽度是164px？前面我们说了给图片的width是160px，实际中准备给img 一个边框宽度为1px，然后给内边距1px，这样算下啦 左右加起来是4px，所以这里li的宽应该是164px, 注意:float:left;是让li横排显示的关键步骤，意思是每个li都靠左浮动。

.db .lista li的margin的数据，开始先计算li的左右距离，然后在慢慢调试数据，margin的写法顺序是：上右下左。

li里面的P元素是放置产品标题的，来看一下他的CSS样式属性：

.db .lista li p {
    text-align: center;/*文本居中*/
    height: 30px;/*P的度为30px*/
    line-height: 30px;/*文本行高30px,使文本垂直居中*/

overflow: hidden;/*溢出部分隐藏*/
}

.lista li我是没有给他高度的，下方P会自动撑开为了利于美观，我只让他显示一行标题，所以给了P高度为30px，文本的行高为：30px;这样文本就可以垂直方向居中了。最后别忘记给一个：overflow: hidden;溢出部分隐藏，当你产品标题超出宽度另起一行的时候就会被隐藏起来。

好了，我们看一下还缺了哪些内容没有填加，嗯……还缺少了一个“面包屑导航”，做搜索引擎SEO优化排名的都知道，面包学导航以及页面底部次导航的重要性，面包屑导航能告诉访问者此时所在位置以及更好返回上一页以及首页，对于搜索引擎蜘蛛爬行以及访问者的用户体验的提升的帮助不言而喻（可以将面包屑第一等级换成网站的关键词）。

1、添加面包屑导航DIV层：

<div id="nv">首页>列表页</div>

添加CSS样式：

#nv {
    width: 100%;/*宽度继承父DIV宽度*/
    height: 30px;
    line-height: 30px;
    text-indent: 10px;/*文本缩进10px*/
}

2、添加列表页的分页显示层：

<div class="page">1-2-3-4-5</div>

添加CSS样式：

.db .page {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    clear: both;/*清除浮动*/
}

产品列表页到这里差不多就算完结了，局部在调试一下，保存。

预告：

下一篇制作新闻文章列表页，在ul li下巧妙运用<span>的浮动让左边显示文章标题，右侧显示发布时间以及文章热度。

产品列表页源码文件点击以下附件：

 

TAGS:企业网站建设 , 产品列表页

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