首頁 > web前端 > html教學 > Div+Css(3)_html/css_WEB-ITnose

Div+Css(3)_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:33:20
原創
862 人瀏覽過

今天看了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;
 }
//--> 




 

 


 
 
 

  
 

  

  

  


  
 

 

 
 
 


 


  

  

  


 
  

 


  


  

  


 


 

 
 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板