div+css网页标准布局实例[宣讲].pptVIP

幻灯实现后，接下来该中间部分图片列表了，和第六天学习的横向图文列表是一样的。唯一区别就是多了一个标题。在index_top下插入如下代码： div id=index_pic h2span/span/h2 ul lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li lia href=#img src=images/pic4.gif width=107 height=87 /产品名称/a/li /ul/div #index_pic { border:1px solid #dbdbdb; margin-bottom:8px;} #index_pic h2 { height:28px; background:url(../images/box_tit_bg.gif) 0 0; border-bottom:1px solid #dbdbdb;} #index_pic h2 span { display:block; height:25px; background:url(../images/rmcp.gif) 12px 6px no-repeat;} #index_pic ul { padding:0 0 15px 0; overflow:auto; zoom:1;} #index_pic ul li { width:107px; float:left; margin:15px 0 0px 21px; display:inline; text-align:center;} #index_pic ul li a { display:block;} #index_pic ul li img { margin-bottom:3px;} * 精品PPT | 实用可编辑 html框架代码写完后，下边就需要设置css样式表了。先测量下效果图的整体宽度，然后设置container也是这个宽度并居中。说起测量效果图宽度，方法有多种，可以直接查看图片尺寸。如果测量其中某一块的宽度，可以使用测量软件，也可以在ps下测量。因为效果图多是在ps下制作的，所以用ps测量也比较方便。方法是首选项里把ps的单位改为像素，然后用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了 * 精品PPT | 实用可编辑 测量后得知：整体宽度为900px，main部的宽度为664px，side宽度为228px。把这三个基本的宽度测量后，下面就可以写css代码了。由于本实例是按照实际当中应用来做的，所以css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css * 精品PPT | 实用可编辑 * 精品PPT | 实用可编辑 保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下： body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;} ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;} ul { list-style:none;} img { border:0px;} a { color:#05a; text-decoration:none;} a:hover { color:#f00;} 全局的样式定义完后，下面定义以上几大块的样式，先设置下#containerr的样式如下： #container { width:900px; margin:0 auto;} 预览下i