您好,欢迎访问一九零五行业门户网

Div+Css(3)_html/css_WEB-ITnose

今天看了div+css的第三集视频教程。
感觉不是很好,发现本集视频只是做了一个网页框架。这并没有什么感觉不好的,让人觉得有点不好的是:讲师只是单独的使用的ie来测试讲解。
我个人把demo分别放大ietester测试,放到ff4,放到opera,放到chrome发现只有在ie核心下效果才不会变形。失望。。。
兼容性差了。。。有空把该框架改进一下!呵呵。。。
也不怎么多说了。
效果图:
代码如下:
div+css实现网页布局
 #container {
  width:800px;
  height:1000px;
  margin:auto 0px;
 }
 #header {
          float:left;
           width:800px;
           height: 100px;
         margin:auto 0px;
            background:red;
          clear:both;
}
 #logo {
  float:left;
  width:250px;
  height:90px;
  background:green;
  clear:right;
   margin:opx;
 }
 #banner{
  float:right;
  width:540px;
  height:90px;
  margin:0px;
  clear:left;
  background:blue;
 }
#menu {
    width:800px;
     height:35px;
     margin:auto 0px;
   clear: both;
}
.nav {
 margin:auto 0px;
  width:800px;
  height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }
 .nav_a {
 float:left;
 margin:0px;
  width:610px;
   height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }
.left_main {
   margin:0px;
   float:left;
   width:610px;
   height:420px;
   background:red;
 }
 .right_main{
  margin:0px;
  float:right;
  width:180px;
  height:420px;
  background:green;
  clear:left;
 }
 .left_a {
  margin:0px;
  float:left;
  width:300px;
  height:205px;
  background:blue;
 }
.left_b {
  margin:0px;
  float:right;
  width:300px;
  height:205px;
  background:blue;
  clear:left;
 }
.con {
  margin:auto 0px;
   width:800px;
   height:200px;
  background:green;
  clear:both;
}
.one {
  float:left;
  width:200px;
  height:200px;
  background:#ff99f0;
  clear:right;
 }
  .two{
  float:left;
  width:200px;
  height:200px;
  background:#ffcc00;
 }
  .three {
  float:left;
  width:200px;
  height:200px;
  background:#0ffff0;
 }
 .four {
  float:right;
  width:190px;
  height:200px;
  background:#f0fff0;
 }
 #footer {
  width:800px;
  height:100px;
  background:red;
  margin:auto 0px;
  padding-top: 30px;
  color: #ffffff;
 }
//-->
nav
nav_left
nav
nav_left
nav
其它类似信息

推荐信息