DIV+CSS布局

近来在研究一下DIV+CSS

源网文章地址:http://www.wzsky.net/html/Website/CSS/39193.html

 

以下是我写的,一般网上都是分:头部,内容,顶部.

再细分就是内容部分进行切分左右,或左中左

 

代码

< html xmlns = " http://www.w3.org/1999/xhtml " >

< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
< title > 无标题  1 </ title >
< style >
body{
    font:12px Tahoma;margin:0px;text - align:center;background - color:#fff;
}
#container{
 width: 100 % ;
    
}

#header{
     width:800px;margin: 0  auto;height:80px;border:thin;}
     
     #mainbody{
    width:800px;margin: 0  auto;height:400px;border:thin;

}

#sidebar{
    width:160px;height:300px;text - align:left; float :left;clear:left; overflow:hidden;
}
#mainbar{
    width:640px; height:300px; text - align:left; float :right;clear:right;overflow:hidden;
}
#footer{
     width:800px;height:300px; margin:  0  auto;height:50px; border:thin;
}

.a0{

 color:black;
}
.a1:hover{
     color:red;
}
</ style >
</ head >

< body >

< div  id = " container " >

< div id = " header " ></ div >


< div id = " mainbody " >
< div id = " sidebar " ></ div >
< div id = " mainbar " >
< a href = " # "   class = " a0 a1 " > hello </ a >
</ div >
</ div >
< div id = " footer " ></ div >


</ div >



</ body >

</ html >

 

 

还要继续学习研究