css+div布局

最新推荐文章于 2019-12-01 22:01:01 发布

huhahuha_

最新推荐文章于 2019-12-01 22:01:01 发布

阅读量174

点赞数

本文链接：https://blog.csdn.net/huhahuha_/article/details/79759948

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>lianxi</title>
       <style type="text/css">
           #main{
               border: 1px solid #000;
               width: 1500px;
               height: 2500px;
           }
           #div1{
               border: 1px solid #000;
               width: 1496px;
               height: 70px;
               margin: 1px 2px 0;
           }
           #div11{

               width: 150px;
               height: 70px;
               background: url(img/logo.gif) no-repeat;
               float: left;
           }
           #div12{

               width: 350px;
               height: 70px;
               background:url(img/header.jpg) no-repeat;
               float: left;
               margin: 0 0 0 200px;
           }
           #div13{

               width: 300px;
               height: 50px;
               margin: 0 0 0 150px;
               padding: 20px 0 0 50px;
               float: left;
           }
           #div2{
               border: 1px solid #000;
               width: 1496px;
               height: 30px;
               margin: 1px 2px 0;
               background-color: #000;
               padding: 10px;

           }
           #div3{
               border: 1px solid #000;
               width: 1496px;
               height: 810px;
               margin: 1px 2px 0;
               background: url(img/1.jpg) no-repeat;

           }
           #div4{
               border: 1px solid #000;
               width: 1496px;
               height: 600px;
               margin: 1px 2px 0;

           }
           #div40{
               width: 600px;
               height: 100px;


           }
           #div41{
               width: 400px;
               height: 400px;
               background: url(img/big01.jpg) no-repeat;
               margin: 60px 0 0 0;
               float: left;

           }
           #div42{
               width: 400px;
               height: 200px;
               background: url(img/middle01.jpg) no-repeat;
               float: left;
               margin: 60px 0 0 0;

           }
           #div43{
               width: 80px;
               height: 100px;
               background: url(img/small08.jpg) no-repeat;
               float: left;
               margin: 80px 0 0 60px;
               padding: 140px 0 0 50px;
           }
           #div44{
               width: 80px;
               height: 100px;
               background: url(img/small08.jpg) no-repeat;
               float: left;
               margin: 80px 0 0 60px;
               padding: 140px 0 0 50px;
           }





           #div5{
               border: 1px solid #000;
               width: 1496px;
               height: 120px;
               margin: 1px 2px 0;
               background: url(img/ad.jpg) no-repeat;

           }
           #div6{
               border: 1px solid #000;
               width: 1496px;
               height: 600px;
               margin: 1px 2px 0;

           }
           #div60{
               width: 600px;
               height: 100px;


           }
           #div61{
               width: 400px;
               height: 400px;
               background: url(img/big01.jpg) no-repeat;
               margin: 60px 0 0 0;
               float: left;

           }
           #div62{
               width: 400px;
               height: 200px;
               background: url(img/middle01.jpg) no-repeat;
               float: left;
               margin: 60px 0 0 0;

           }
           #div63{
               width: 80px;
               height: 100px;
               background: url(img/small08.jpg) no-repeat;
               float: left;
               margin: 80px 0 0 60px;
               padding: 140px 0 0 50px;
           }
           #div64{
               width: 80px;
               height: 100px;
               background: url(img/small08.jpg) no-repeat;
               float: left;
               margin: 80px 0 0 60px;
               padding: 140px 0 0 50px;
           }


           #div7{
               border: 1px solid #000;
               width: 1395px;
               height: 100px;
               margin-top: 2px;
               background: url(img/footer.jpg) no-repeat;
           }
           #div8{
               border: 1px solid #000;
               width: 1394px;
               height: 100px;
               margin-top: 2px;
               }
           #div81{
                   margin-left: 450px;
                   margin-top: 20px;
               }
           #div82{
               margin-left: 500px;
               margin-top: 10px;
           }


       </style>
   </head>
   <body>
       <div id="main">
           <div id="div1">
               <div id="div11"></div>
               <div id="div12"></div>
               <div id="div13">
                   <a href="www.baidu.com">登录</a>
                   <a href="www.baidu.com">注册</a>
                   <a href="www.baidu.com">购物车</a>
               </div>
           </div>
           <div id="div2">
               <a href="#">首页</a>
               <a href="#">手机数码</a>
               <a href="#">电脑办公</a>
           </div>
           <div id="div3"></div>
           <div id="div4">
               <div id="div40">
                   <font size="24px" face="黑体">热门商品</font>
                   <img src="img/title2.jpg" width="250px" height="15px" />
               </div>
               <div id="div41"></div>
               <div id="div42"></div>
               <div id="div43">
                   <a href="#">电饭煲</a><br />
                   <font size="2px" face="楷书">200</font>
               </div>
               <div id="div44">
                   <a href="#">电饭煲</a><br />
                   <font size="2px" face="楷书">200</font>
               </div>



           </div>
           <div id="div5"></div>
           <div id="div6">
               <div id="div60">
                   <font size="24px" face="黑体">最新商品</font>
                   <img src="img/title2.jpg" width="250px" height="15px" />
               </div>
               <div id="div61"></div>
               <div id="div62"></div>
               <div id="div63">
                   <a href="#">电饭煲</a><br />
                   <font size="2px" face="楷书">200</font>
               </div>
               <div id="div64">
                   <a href="#">电饭煲</a><br />
                   <font size="2px" face="楷书">200</font>
               </div>
           </div>
           <div id="div7"></div>
           <div id="div8">
               <div id="div81">

                   <a href="www.baidu.com">关于我们</a>  
                   <a href="www.baidu.com">联系我们</a>  
                   <a href="www.baidu.com">招纳贤士</a>  
                   <a href="www.baidu.com">法律声明</a>  


               </div>
               <div id="div82">
                   Copyright<sup>©</sup>  西部开源<sub>®</sub>
               </div>
           </div>
       </div>


   </body>
</html>