DIV+CSS 制作自适应混合布局

实现了头,产品列表,模向链接,纵向链接,DIV嵌套,直接上代码。。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DIV标签制作自适应混合布局</title>
<style>
body {margin:0 auto;padding:0;}
#top_logo{
    margin:0 auto:
    width:100%;
    min-width:960px;
    line-height:50px;
    height:50px;
    text-align:center;
    background:lightblue;
}
#header{
    width:100%;
    height:30px;
    min-width:960px;
    margin:0 auto;
    padding:0;
    margin-bottom:10px;
    background:purple;
}
#header1{
    width:960px;
    margin:0 auto;
    padding:0;
}
#header ul{
    list-style:none;
    background:purple;
    overflow:hidden;  
    /* 特别重要,不加overflow,ul跑偏*/
    margin:0 auto;
    text-align:center;
}
#header li {
    float:left;
    /*控制横向*/
}
#header li a{
    display:block;
    color:white;
    width:104px;
    height:30px;
    line-height:30px;
    text-decoration:none;
    text-align:center;
    border-radius:5px;
}
#header li a:hover{
    background:red;
    color:white;
}
.main{
    width:100%;
    min-width:960px;
    margin:0 auto;
}
.main-left{
    float:left;
    margin-left:0;
    width:35%;
    height:850px;
    background:yellow;
}
.left-menu{
    margin:20px auto;
}
.left-menu ul{
    list-style:none;
    padding:0;
}
.left-menu ul a{
    display:block;
    padding:5px 0;
    /*padding要谨慎使用,父元素纵横有很大余量的时候可以用*/
    margin: 5px auto;
    width:100%;
    color:black;
    text-align:center;
    text-decoration:none
}
.left-menu ul a:hover{
    background:orange;
    
}
.main-right{
    float:right;
    margin-left:0;
    width:65%;
    height:850px;
    background:green;
}
.product-list{
    width:560px;
    margin:20px auto;   /*上下留出20px,左右居中*/
}
.product{
    margin-top:20px;
    margin-left:25px;
    width:240px;
    height:350px;
    background:white;
    float:left;
}
.product-page{
    margin:0 auto;
    margin-top:800px;       
    /*DIV嵌套,使用margin定义位置,否则会堆在一起*/
    width:600px;
    height:30px;
    background:lightblue;
    text-align:center
}
</style>
</head>
<body>
<div id='top_logo'>
    This is banner picture ╕╖╗╘╙╚ ╛╜╝╞╟╠ ╡╢╣╤ ╥
</div>
<div id='header'>
    <div id='header1'>
        <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#">热点</a></li>
            <li><a href="#">动态</a></li>
            <li><a href="#">直播</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</div>
    
<div class='main'>
    <div class='main-left'>
        <div class='left-menu'>
            <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">热点</a></li>
                <li><a href="#">动态</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>  
        
        </div>
    
    
    </div>
    
    <div class='main-right'>
        <div class='product-list'>      <!--控制产品区大小,防止串行-->
            <div class='product'>
                1111111111
            </div>
            <div class='product'>
                2222222222
            
            </div>
            <div class='product'>
                3333333333      
            </div>         
        </div>
        <div class='product-page'>
            pages:1、2、3、4、5、6、7、8
        
        </div>
    </div>
    
   
</div>
   


    
</body>
</html>

 

猜你喜欢

转载自blog.51cto.com/yishi/2448009