黑马程序员_用div和css简单搭建网页模型

本文链接：https://blog.csdn.net/zengyufeng203615/article/details/7783314

---------------------- Windows Phone 7手机开发、Net培训、期待与您交流！ ----------------------

---------------------------------------------------------------------------------------------------html代码--------------------------------------------------------------

</div>
<div id="baner">

</div>
<div id="tool">

</div>
<div class="nav">

</div>
    <div id="menu">
     <ul>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
      <li class="tiao"></li>
      <li><a href="#">联系我们</a></li>
     </ul>
    </div>
   </div>
   <div class="nav"></div>
   <div id="main">
    <div class="leftbox">
     <div class="left">aa</div>
     <div class="right">bbb</div>
     <div class="nav"></div>
     <div class="left">aa</div>
     <div class="right">bbb</div>

    </div>
    <div class="rightbox">
    </div>

   </div>
   <div class="nav">
   </div>
   <div id="footer">
   </div>
  </div>
</body>
</html>

-------------------------------------------------------------------以下是css代码-----------------------------------------------------------

body{//清楚外边距和内边距
margin:0px;
padding:0px;
font:12px Arial,宋体;
text-align:center;
}

#container{
margin-left:auto;
margin-right:auto;
width:960px;
text-align:left;
}

#header{
width:100%;
}

#header #logo{
float:left;
width:200px;
height:80px;
margin-right:10px;
background:#ff00ff;
}

#header #baner{
float:left;
width:600px;
height:80px;
background:blue;
}

#header #tool{
float:right;
width:140px;
height:80px;
background:#cccccc;
}

#header #menu{
float:100px;
width:100%;
height:28px;
background:red;
}

#main{
float:left;
width:100%;

}
#main .leftbox{
float:left;
width:750px;

}
#main .rightbox{
float:right;
width:200px;
height:400px;
background:red;
}

.leftbox .left{
float:left;
width:300px;
height:200px;
background:red;
}
.leftbox .right{
float:right;
width:440px;
height:200px;
background:red;
}
#footer{
float:left;
width:100%;
height:80px;
background:blue;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
li{

height:28px;
line-height:28px;
float:left;
width:80px;
text-align:center;

}

#menu a{
color:white;
}
#header #menu .tiao{
float:left;
margin-top:8px;
margin-bottom:8px;
width:1px;
height:12px;
background:white;
overflow:hidden;
}
.nav{

width:100px;
height:10px;//IE中指定的最小高度为18px,小于18px一律按18px算。
clear:both;//清除，不挨着任何浮动区块
overflow:hidden;
}

---------------------- Windows Phone 7手机开发、 .Net培训期待与您交流！ ----------------------

详情请查看：http://net.itheima.com