一个完整网页制作的实例积累

※网页制作，html、css样式是各种前端的基础，细节决定各种效果的特色。首先，需要观察，然后是一些积累总结。以下是设计效果图。

 

 

body,html, body, div, p, ul, li, h1, h2,h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td{margin: 0px;padding: 0px;}

绘制一个大的div（包含所有元素，定宽和定高）居中（margin：0 auto），同时给整个body一个背景 body{ background: url("../image/bj.gif");}

※2 logo制作

  div#shouye>div#logo>div#logo_left>img

  #logostyle=”position:relative”划定头部的区域宽高大小定位相对

  仔细划定小块区域（图片，文字），小块中图片和文字用div包裹，小div中定于位置信息（absolute，float，right，top），图片和文字信息中说明（字体大小，颜色，加粗，文字样式，图片样式等等），画一个差不多，以后可以细调。

※3 菜单制作

3.1 div#nav>ul>li*10>a

在nav的div上面加背景和行高，li属性上加display和背景（图片分割图）center right（定位）以及里宽度大小等，在a标签上加入字体样式。

 3.2 加入二级菜单

div#nav1>ul>li*3>a

给二级菜单设置一个相对定位，把对应的位置找到，写下宽度，分别设定li和a的属性。

做好位置和样式。