12.03.12总结

    今天学到的东西：

                                 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、ＩＥ　FF  之间兼容的问题， 还不是很了解，这个有带加强！