网页设计中如何设计图文展示栏目-盈岚科技

网页设计中如何设计图文展示栏目

2019-09-16 14:49:14
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

之前通过示例分析过网页设计中图文排版的处理技巧，那么对于图文列表信息的处理其实大同小异，不同的是图文列表信息的表现方式是将列表内容以图片的形式在页面中体现，简单理解就是图片列表信息附带简短的文字说明。在图中展示的内容主要有列表标题、图片和图片相关说明的文字。

【操作步骤】

第1步，启动Dreamweaver，新建一个网页，保存为index.html。

第2步，构建网页结构。假设当我们在页面制作时拿到了由设计师提供的设计稿中出现了这样的一个图文列表信息结构，能一目了然地看到该效果主次分明，结构清晰。

<ul>

<li><a href="#"><img src="images/1245043772194_7521.jpg" alt="美女个性搞怪自拍" />美女个性搞怪自拍</a></li>

<li><a href="#"><img src="images/1245043843485_8207.jpg" alt="绝对阳光的清纯小妹" />绝对阳光的清纯小妹</a></li>

<li><a href="#"><img src="images/1245134073454_9288.jpg" alt="漂亮美女的可爱外拍" />漂亮美女的可爱外拍</a></li>

<li><a href="#"><img src="images/1245134177473_9822.jpg" alt="可爱美女的艺术照" />可爱美女的艺术照</a></li>

<li><a href="#"><img src="images/1245200548148_5487.jpg" alt="漂亮美女娇美自拍" />漂亮美女娇美自拍</a></li>

<li><a href="#"><img src="images/1245201554383_4640.jpg" alt="清纯迷人的黄毛丫头" />清纯迷人的黄毛丫头</a></li> </ul>

</div>

对于在网页设计时列表的内容已经讲解的不少了，本例以如下所示结构编写HTML列表结构代码。

这样的结构不仅在HTML代码中能很好地将页面结构层次体现，更可以方便后期通过CSS样式对其的利用。图文列表的排列方式最讲究的一个知识点就是宽度属性值的计算。横向排列的列表，当整体的列表（有序列表ol或者无序列表ul）横向空间不足以将所有列表横向显示时，浏览器会将列表换行显示。这样的情况只有在宽度计算正确时，才足够将所有列表横向排列显示并且不会产生空间的浪费。

这种情况是必须要避免的，因此在网站建设时准确计算列表内容区域所需要的空间是有必要的。

我们将要分析例子中，每张图片的宽度属性值为134px，左右内补丁分别为3px，左右边框分别为1px宽度的线条，并且图片列表与图片列表之间的间距为15px（即右外补丁为15px），根据盒模型的计算方式，最终列表li标签的盒模型宽度值为1px+3px+134px+3px+1px+15px=157px，因此图文列表区域总宽度值为157px×6=942px。

第3步，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式，定义图文列表区域的相关区域样式。

.pic_list .content {

width:942px;

height:150px;

overflow:hidden; /*设置图文列表内容区域的宽度和高度，超过部分隐藏*/

padding:22px 0 0 15px; /*利用内补丁增加图文列表内容区域与其他元素之间的间距*/}

.pic_list .content li {float:left;

width:142px;

margin-right:15px; /*列表li标签设置浮动后，所有列表将根据盒模型的计算方式计算列表宽度，并且并排显示*/ display:inline; /*设置浮动后并且增加了左右外补丁，IE6会产生双倍间距的Bug，利用该属性解决*/}

.pic-list .content作为图文列表内容区域，增加相应的内补丁使其与整体之间有空间感，这个是视觉效果中必然会处理的一个问题。

.pic-list .content li因为具有浮动属性，并且有左右外补丁中其中一个外补丁属性，在IE6浏览器中会产生双倍间距的Bug问题。而神奇的是添加display:inline可以解决该问题，并且不会对其他浏览器产生任何影响。

第4步，主要内容设置成功之后，就可以对图文列表的整体效果做CSS样式的修饰，例如图文列表的背景和边框以及图文列表标题的高度、文字样式和背景等。

.pic_list { width:960px; /*设置图文列表整体的宽度*/ border:1px solid #D9E5F5; /*添加图文列表的边框*/ background:url(images/wrap.jpg) repeat-x 0 0; /*添加图文列表整体的背景图片*/}.pic_list * {/*重置图文列表内部所有基本样式*/ margin:0;

padding:0;

list-style:none;

font:normal 12px/1.5em "宋体", Verdana,Lucida, Arial, Helvetica, sans-serif;}.pic_list h3 { /*设置图文列表的标题的高度、行高、文字样式和背景图片*/

height:34px;

line-height:34px;

font-size:14px;

text-indent:12px;

font-weight:bold;

color:#223A6D;

background:url(images/h3bg.jpg) no-repeat 0 0;}

第5步，需要调整内容则是对图文列表信息细节以及用户体验的把握。例如图片的边框、背景和文字的颜色等，并且还要考虑当用户在鼠标经过图片时，为了能更好地体现视觉效果，给用户一个全新的体验，我们还要添加当鼠标经过图片列表信息时图片以及文字的样式变化。

.pic_list .content li a { display:block; /*将内联元素a标签转换为块元素使其具备宽高属性*/