今天学到的东西:
1、初步学会了给网页怎么排版的问题;
2、学会运用float标签,并且运用float标签自己写了一个九宫格(附带代码)
html:
<div class="content"<div class="top"><div class="top1 con_float"></div><div class="top2 con_float""></div><div class="top3 con_float""></div></div><div class="middle"><div class="mid1 con_float"></div><div class="mid2 con_float"></div><div class="mid3 con_float"></div></div><div class="bottom"><div class="bot1 con_float"></div><div class="bot2 con_float"></div><div class="bot3 con_float"></div></div></div>CSS编码:.content{width:500px; height:500px; margin:0px auto auto;}
.top{width:350px; height:100px; border:opx solid #FF0000;}/*top sta*/
.con_float{float:left;}
.top1{width:100px; height:100px; border:1px solid #000; background-color:#FF0000;}
.top2{width:100px; height:100px; border:1px solid #000; background-color:#0000FF; margin-left:15px;}
.top3{width:100px; height:100px; border:1px solid #000; background-color:#FFFF00;margin-left:15px;}
/*top end*/
.middle{width:350px; height:100px; border:0px solid #000; margin-top:10px;}/*mid sta*/
.con_float{float:left;}
.mid1{width:100px; height:100px; border:1px solid #000; background-color:#FF0000;}
.mid2{width:100px; height:100px; border:1px solid #000; background-color:#0000FF; margin-left:15px;}
.mid3{width:100px; height:100px; border:1px solid #000; background-color:#FFFF00;margin-left:15px;}
/*mid end*/
/*bot sta*/
.bottom{width:350px; height:100px; border:0px solid #0000FF; margin-top:10px;}
.con_float{float:left;}
.bot1{width:100px; height:100px; border:1px solid #000; background-color:#FF0000;}
.bot2{width:100px; height:100px; border:1px solid #000; background-color:#0000FF; margin-left:15px;}
.bot3{width:100px; height:100px; border:1px solid #000; background-color:#FFFF00;margin-left:15px;}
/*bot end*/
这是自己独立完成的一个九宫格的用html文档写出来。
3、学会了用html写一条直线,主要就是运用了一个<div>模块,在用css表现的时候,用的bodder_bottom.css编码: .line1{width:100px; height:2px; border-bottom:1px solid #000; margin-top:-8px; margin-left:10px;}4、大体的知道<DIV>模块运用;5、IE FF 之间兼容的问题, 还不是很了解,这个有带加强!