您的位置：首页 > Web前端 > CSS

DIV+css模仿京东整体布局

2013-12-19 12:30 344 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
测试导航
</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
body{
text-align: center;
}
/*首部*/
#top_box{
width: 100%;
height: 31px;
background: #F7F7F7;
}
#top_box #box{
width:990px;
height: 31px;
background-color: red;
margin: 0 auto;
}
#search{
width:990px;
height: 98px;
margin: 0px auto;
background-color: blue;
}
/*首部结束*/
/*导航*/
#menu{
width:990px;
height: 40px;
margin: 0px auto;
background-color: #E64346;
margin-top: 10px;
}
/*导航结束*/
/*左边详细导航， 轮播图， 生活导航*/
#flash_box{
width:990px;
height: 500px;
/*border: 2px red solid;*/
margin: 0 auto;
position:relative;
}
#flash_box #flash_box_left{
width:209px;
height: 500px;
background-color: yellow;
position:absolute;
left:0px;
top:0px;
}
#flash_box #flash_box_middle{
width:570px;
height: 500px;
background-color: green;
position:absolute;
top:0px;
left:209px;
}
#flash_box #flash_box_right1{
width:211px;
height: 200px;
background-color: red;
position:absolute;
top:0px;
right:0px;
}
#flash_box #flash_box_right2{
width:210px;
height: 150px;
background-color: yellow;
position:absolute;
top:200px;
right:0px;
}
#flash_box #flash_box_right3{
width:210px;
height: 150px;
background-color: orange;
position:absolute;
top:350px;
right:0px;
}
/*左边详细导航， 轮播图， 生活导航 结束*/
/*广告块*/
#ad{
width:990px;
margin: 0px auto;
}
#ad .ad1{
width:100%;
background-color: #FAB;
height: 500px;
margin: 0px auto;

}
#ad .ad2{
width:100%;
background-color: #DAE;
height: 500px;
margin: 0px auto;
}
#ad .ad3{
width:100%;
background-color: #ABE;
height: 500px;
margin: 0px auto;
}
#ad .ad4{
width:100%;
background-color: #CAE;
height: 500px;
margin: 0px auto;
}
/*广告结束*/
/*脚部*/
#footer{
width: 990px;
height: 150px;
background-color: #CCC;
margin: 0px auto;
}

</style>
</head>
<body>
<!-- 顶部开始 -->
<div id="top_box">
<div id="box"></div>
</div>
<!-- 顶部结束 -->
<!-- 搜索开始 -->
<div id="search">

</div>
<!-- 导航开始 -->
<div id="menu">

</div>
<!-- 导航结束 -->
<div id="flash_box">
<!-- 轮播图大区域开始 -->
<div id="flash_box_left">
</div>
<!-- 轮播图大区域结束 -->
<div id="flash_box_middle"></div>
<!-- 右边开始 -->
<div id="flash_box_right1"></div>
<div id="flash_box_right2"></div>
<div id="flash_box_right3"></div>
<!-- 右边结束 -->
</div>
<!-- 广告开始 -->
<div id="ad">
<div class="ad1"></div>
<div class="ad2"></div>
<div class="ad3"></div>
<div class="ad4"></div>
</div>
<!-- 广告结束 -->
<!-- 脚部开始 -->
<div id="footer"></div>
<!-- 脚部结束 -->
</body>

</html>


注意点：

1.页面中唯一的和结构化的都要用ID， 其余的用class

2.完全的注释是好习惯

3.必须加上第一行的代码， 否则ie浏览器会出问题, 如果还是不行就得在body中加入text-algin:center;
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航