DIV+CSS基础教程:浮动(float)页面布局

2024年2月7日发(作者：)

body,div,a,img,p,form,h1,h2,h3,h4,h5,h6,input,textarea,ul,li,dt,dd,dl{margin:0;padding:0;}

#Logo,#Nav,#Banner,#Content,#Footer{width:900px; margin:0 auto;}

#Logo{

height:80px;

}

#logoLink{

display:block;

width:173px;

height:46px;

background:url(../Images/) no-repeat;

float:left;

margin-top:20px;

}

#Nav{height:42px;}

#Nav ul{

height:42px;

list-style:none;

background:#56990c;

}

#Nav ul li{height:42px; float:left;}

#Nav ul li a{

display:block;

height:42px;

color:#FFF;

padding:0 10px;

line-height:42px;

font-size:14px;

font-weight:bold;

font-family:Arial;

text-decoration:none;

float:left;

}

#Nav ul li a:hover{background:#68acd3;}

#Banner{

height:290px;

background:url(../Images/) no-repeat;

}

#Content #ContentL,#Content #ContentR{float:left; padding:15px;}

#Content #ContentL{width:570px; background:#f0f0f0;}

#Content #ContentR{width:270px; background:#d3e7f2;}

#Footer{

text-align:center;

background:#68acd3;

padding: 10px 0;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

color:#fff;

line-height:20px;

}