学习DIV+CSS网页布局之三列布局

2020-05-05 07:18:11易采站长站整理

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>两边固定中间自适应布局</title>  
<style>  
*{margin:0;padding:0;}   
#herder{   
    height:50px;   
    background:blue;   
}   
#main{   
    width:100%;   
    position:relative;   
}   
#main .main-left{   
    width:200px;   
    height:800px;   
    background:red;   
    position:absolute;   
    left:0;   
    top:0;   
}   
#main .main-center{   
    height:800px;   
    background:lightgreen;   
    margin:0 310px 0 210px;   
}   
#main .main-right{   
    width:300px;   
    height:800px;   
    background:pink;   
    position:absolute;   
    right:0;   
    top:0;   
}   
#footer{   
    height:50px;   
    background:gray;   
}   
</style>  
</head>  
<body>  
<div id="herder">页头</div>  
<div id="main">  
    <div class="main-left">左列</div>  
    <div class="main-center">设计网页的第一步就是设计版面布局,搭建网站结构,网页排版的合理性,在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此,网站首页第一屏的排版非常重要,很多时候能决定用户的去与留。</div>  
    <div class="main-right">右列</div>  
</div>  
<div id="footer">页脚</div>  
</body>  
</html>  

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/Mtime/p/5272716.html