div+css网页标准布局实例

4、ent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。增加后的代码如下：此处显示id"header"的内容此处显示id"nav"的内容此处显示id"main"的内容此处显示id"side"的内容

5、er">此处显示id"footer"的内容html框架代码写完后，下边就需要设置css样式表了。先测量下效果图的整体宽度，然后设置container也是这个宽度并居中。说起测量效果图宽度，方法有多种，可以直接查看图片尺寸。如果测量其中某一块的宽度，可以使用测量软件，也可以在ps下测量。因为效果图多是在ps下制作的，所以用ps测量也比较方便。方法是首选项里把ps的单位改为像素，然后用选区选中要测量的部分，在信息面板中就显示出当前选区的宽高了测量后得知：整体宽度为900px，main部的宽度为664px，side宽度为228px。把这三个

6、基本的宽度测量后，下面就可以写css代码了。由于本实例是按照实际当中应用来做的，所以css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下：body{margin:0auto;font-size:12px;font-family:Verdana;line-height:1.5;}ul,dl,dd,h1,h2

7、,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:0auto;}预览下index.htm，发现并没有改变，因为刚定义的样式表没有和html文件关联，所以设置的样式不能对它生效：在css面板中点击附加样式表

8、按钮，然后在弹出的窗口中选择刚才创建的样式表文件，确