divcss网页标准布局(实例)解析.pptVIP

div+css网页标准布局 先看下产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片，但这样麻烦一点，每个都需要设置，而且还得定位，有个更简便的方法是定义ul的背景图片，因为在切图标时，每个图标之间的间距是按照效果图的间距来切的。 div class=side_box h2strong产品/strong导购/h2 div class=side_con product ul listrong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li listrong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li li class=product3strong语音业务：/stronga href=#普通电话/a | a href=#语音数字中继/a/li /ul /div /div 细心的用户已发现，这里的class后跟了两个样式名称，说明一个元素是可以定义多个样式的，中间用空格分开。也可以把product样式定义在ul上。 说到可以定义多个样式，强调一点：许多人常常大量使用，如一个块元素需要设置边框，绿色文字和灰色背景所以就在css里定义： .border { border:1px solid #f60;} .color { color:#080;} .bg { background:#ccc;} 然后在块元素上增加： div class=border color bg此处显示新 Div 标签的内容/div 其实这是一个非常不好的写法，表面看似达到了代码重用性，但实际当中，当需要把其中一个元素的的边框改为2px，怎么改？如果把.border的边框改了，那么所有应用这一样式的元素都改了。如果再在代码中增加一个样式，那么又得去改html代码，和代码和结构分离的理念相违背了。一个好的代码布局，不管以后怎么改风格，只用改样式表，而不用去改html代码，这才真正做到两者分离了。 回到刚才的问题上，给第三个li定义了一个product3样式，然后在样式表中定义它的底部边框为无，因为前边定义li的底边框为1px的虚线，而最后一个不需要，所以单独定义个样式把它取消掉，这里的product根据需要自己定义的名称，一般用能表达这块内容意思的简洁英文来表示，或者用拼音。 产品导购”的样式定义如下： .product { padding:0px 10px;} .product ul { background:url(../images/icon2.gif) 5px 12px no-repeat;} .product ul li { height:58px; padding:14px 0 0 64px; border-bottom:1px dashed #dcdcdc; color:#777;} .product ul li strong { display:block; height:24px; color:#333;} .product ul li a { color:#777;} .product ul li a:hover { text-decoration:underline;} .product ul duct3 { border-bottom:none;} “产品导购”完成后，下边该“使用问答”了。“使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。所以这部分采用dl、dt、dd的形式来完成。 div class=side_con ask dl dta href=#最新出的这个产品如何使用？/a/dt dd该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便.../dd /dl dl dta href=#最新出的这个产品如何使用？/a/dt dd该产品采用全新的技术，较上一.../dd /dl dl dta href=#最新出的这个产品如何使用？/a/dt dd该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了.../dd /dl dl dta href=#最新出的这个产品如何使用？/a/dt dd该产品采用全新的技术，较上一产品有质的飞跃，功能上增强.../dd /dl dl dta href=#最新出的这个产品如何使用？/a/dt dd该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便.../dd /dl /div .ask dl { padding:10px 0; border-bottom:1px dashed #dcdcdc;} .ask dl dt { height:22px