网页基本布局

<!---------------------HTML结构---------->
<!--这是头部-->
<div class="header"></div>


<!--这是导航-->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">资讯中心</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">资讯中心</a></li>
</ul>
</div>


<!--这是广告-->
<div class="banner"><img  src=""/></div>


<!--主体-->
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!--底部-->
<div class="footer">
<p>
版权所有 &copy; xxx有限公司   京ICP备xxxx<br />
联系电话  xxxxxxxx    邮箱：xxxxxxxx@sina.com
</p>
</div>




/****公用样式******/
*{ margin:0; padding:0;}/*去掉所有标签内外边距*/


ul ,ol{ list-style:none;}/*去掉无序列表的项目符号*/


a{  text-decoration:none; color:#666;}/*去掉超链接下划线   颜色*/
a:hover{ color:#FF3300;}/*鼠标经过变色*/


img{ border:none;}/*去掉图片加超链接后的边框*/
h1,h2,h3,h4,h5,h6{ font-size:14px;}/*标题统一字号*/


body{ font-size:12px;color:#666;
margin:0  auto;/*左右边距自动  页面居中*/
width:px; /*首先修改页面宽度*/}


.zuotu{ position:absolute; left:0px; top:85px;}
.youtu{ position:absolute; right:0px; top:85px;}






/****网页布局******/
.header{height:px;}
.nav{height:px;}
.main{ height:px; clear:both;  }
.footer{height:px; clear:both;}


.left{ width:px; height:px;  float:left;  background:#99FFFF; margin-right:px;}
.center{ width:px; height:px; float:left; background:#FF99FF; }
.right{ width:px; height:px; float:right; background:#FFFF99; }


/****底部样式*/
.footer  p{ 
text-align:center; 
line-height:25px;
padding-top:20px;}






<!----------------头部---------->
<div class="header">
<img src="images/ba_02.gif"  alt="logo" />
<form><input type="text"  class="kuang"/><input type="image"  src=""/></form>
</div>


/****头部样式*/


.header  img{ float:left; margin-top:30px;}
.header  form{ float:right; margin-top:30px;}
.kuang{width:100px; height:22px; border:1px #666 solid; float:left;}




3.<!------------------栏目标题---------->
<h3><a href="#">更多</a>新闻动态</h3> 




/****标题样式*/
.main h3{height:30px; line-height:30px; font-size:14px; }
.main h3 a{ float:right; font-size:12px; font-weight:normal;}


4、<!------------------新闻列表---------->
<ul>
<li><a href="#">网站改版新闻测试，欢迎大家</a></li>
<li><a href="#">公司新闻发布新闻发布</a></li>
 <li><a href="#">为创高素质人才，淮北重视人</a></li>
 <li><a href="#">喜讯：公司网站改版</a></li>
 </ul>


/****新闻列表样式*/
.盒子名  ul  li{
line-height:25px;/*行高*/
background:url(../images/ba_19.gif) no-repeat  left  center;/*小图标  位置左中*/
padding-left:12px;/*左填充  文字向里*/}






6<!---------------------图片列表---------->
 
       <dl>
        <dt><a href="#"><img  src="images/ba_16.gif"/></a></dt>
        <dd><a href="#">软工学院</a></dd>
       </dl>
       <dl>
        <dt><a href="#"><img  src="images/ba_16.gif"/></a></dt>
        <dd><a href="#">软工学院</a></dd>
       </dl>
        <dl  style="margin-right:0;">
        <dt><a href="#"><img  src="images/ba_16.gif"/></a></dt>
        <dd><a href="#">软工学院</a></dd>
       </dl>
       
/****图片列表样式*/
.盒子名  dl{ 
float:left;/*横过来*/
margin-right:10px;/*右边距分开*/
text-align:center;/*文字居中*/
line-height:25px;}


6 <!---------------------左图右文---------->
 
<dl>
    <dt><img src="images/images/13_14.gif" /></dt>
    <dd>江苏省南京市儿童医院60余位医护人员…为缓解医疗用血紧张局面，近日，江苏省南京市儿童医院60余位</dd>
</dl>


/****左图右文样式*/
.盒子名  dl{ height:90px; }
.盒子名  dt{ float:left; margin-right:6px; }
.盒子名  dd{ float:left; line-height:22px; width:210px; }




7  <!------------------------底部---------->
<p>
版权所有 &copy; xxx有限公司   京ICP备xxxx<br />
联系电话  xxxxxxxx    邮箱：xxxxxxxx@sina.com
</p>