码迷，mamicode.com
首页 > Web开发 > 详细

网页布局

时间：2016-02-22 11:46:38      阅读：188      评论：0      收藏：0      [点我收藏+]

标签：

一. 两栏布局

1.通过两栏浮动进行布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {width: 100%; height: 400px; overflow: hidden;}
.col {float: left; border: 1px solid #aaa; height: 400px;}
.col1 {width:80%;  background-color: #f00;}
.col2 {width: 19%; background-color: #0f0;}    
</style>
</head>
<body>
    <div class="container">
        <div class="col col1"></div>
        <div class="col col2"></div>
    </div>
</body>
</html>
View Code

2.为每一列添加容器进行布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {
    width: 960px; 
    margin: 0 auto;
}
.container1 {
    float: left;
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    background-color: #f00;
}
.container2 {
    float: left;
    width: 100%;
    position: relative;
    right: 500px;/* 值为第二列的宽度 */
    background-color: #0f0;
}
.col1 {
    float: left;
    width: 460px;
    position: relative;
    left: 500px;/* 值为除第一列外的所有列宽和 */
}
.col2 {
    float: left;
    width: 500px;
    position: relative;
    left: 500px;/* 值为除第一列外的所有列宽和 */
}
</style>
</head>
<body>
    <div class="container">
        <div class="container1">
            <div class="container2">
                <div class="col1">aaaa</div>
                <div class="col2">bbbbb</div>
            </div>
        </div>
    </div>
</body>
</html>
View Code

效果展示：

技术分享

代码思路：

  • 在两栏布局最外面添加一个容器div.container
  • 为每一列添加一个容器(div.container1,div.container2)，用来存放每一列的背景颜色或者背景图片，左浮动，相对定位
  • 每一个容器相对定位，其距离右边的边框为对应列宽（div.container1对应div.col2）
  • 内容填充的每一列，也进行相对定位，距离左边的边框为除第一列外的所有列宽之和

3.利用边框创建两栏布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {
    width: 100%;
    height: 20px;
    border-left: 400px solid #aaa;
}
.col1 {
    float: left;
    width: 400px;
    margin-left: -400px;
    margin-right: -1px;
    border-right: 1px solid #666;
}
.col2 {
    float: left;
    border-left: 1px solid #666;
}
</style>
</head>
<body>
<div class="container">
    <div class="col1">aaa</div>
    <div class="col2">bbb</div>
</div>
</body>
</html>
View Code

效果展示：

技术分享

代码思路：

  • 为容器div.container添加左边框，且左边框的宽度为第一列的宽度，为保证边框颜色展示，可添加一个高度值
  • 两列均左浮动
  • 第一列宽为容器左边框的宽度，外边距向左移动该列宽的距离（margin-left:-width;）

4.利用margin和绝对定位进行布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {
    width: 960px;
    margin: 0 auto;
    /* overflow: hidden; */
}
.col1 {
    position: absolute; 
    width: 740px;
    background-color: #ccc;
}
.col2 {
    position: absolute; 
    margin-left: 740px;/* 值为第一列的宽度值 */
    width: 220px; 
    background-color: #aaa;
}
</style>
</head>
<body>
<div class="container">
    <div class="col1">aaa</div>
    <div class="col2">bbb</div>
</div>
</body>
</html>
View Code

效果展示：

技术分享

代码思路：

  • 容器进行宽度设置
  • 每列都添加绝对定位、设置宽度
  • 第二列左外边距值为第一列的宽度

 

二.三栏布局

1.左浮动布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
.col {
    float: left;
    width: 30%;
}
.col1 {
    background-color: #f00;
}
.col2 {
    background-color: #0f0;
}
.col3 {
    background-color: #00f;
}
</style>
</head>
<body>
<div class="container">
    <div class="col col1">aaa</div>
    <div class="col col2">bbb</div>
    <div class="col col3">bbb</div>
</div>
</body>
</html>
View Code

效果展示：

技术分享

2.为每一列添加容器进行布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.container {
    width: 960px;
    margin:0 auto;
}
.container3 {
    width: 100%;
    float: left;
    overflow: hidden;
}
.container2 {
    width: 100%;
    float: left;
    position: relative;
    right: 320px;/* 第三列的宽度 */
}
.container1 {
    width: 100%;
    float: left;
    position: relative;
    right: 420px;/* 第二列的宽度 */
}
.col1 {
    width: 220px;
    float: left;
    position: relative;
    left: 740px;/* 除第一列外其他列宽总和 */
    background-color: #f00;
}
.col2 {
    width: 420px;
    float: left;
    position: relative;
    left: 740px;/* 除第一列外其他列宽总和 */
    background-color: #0f0;
}
.col3 {
    width: 320px;
    float: left;
    position: relative;
    left: 740px;/* 除第一列外其他列宽总和 */
    background-color: #00f;
}
</style>
</head>
<body>
<div class="container">
    <div class="container3">
        <div class="container2">
            <div class="container1">
                <div class="col1">aaa</div>
                <div class="col2">bbb</div>
                <div class="col3">ccc</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
View Code

效果展示：

技术分享

代码思路：

  • 在两栏布局最外面添加一个容器div.container
  • 为每一列添加一个容器(div.container1,div.container2)，用来存放每一列的背景颜色或者背景图片，左浮动，相对定位
  • 每一个容器相对定位，其距离右边的边框为对应列宽（div.container1对应div.col2）
  • 内容填充的每一列，也进行相对定位，距离左边的边框为除第一列外的所有列宽之和

第二步所对应的思路：每一列进行相对定位，到右边的距离为对应列的宽度

技术分享

第三步对应的思路：每一列进行相对定位，距离左边的为除第一列外的其他列宽的总和

技术分享

 3.通过为给中间列添加边框进行布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.containerOuter {
    width: 960px;
    margin: 0 auto;
}
.container {
    float: left;
    width: 520px;/* 为col2容器 */
    border-left: 220px solid #0f0;/* 为左边列的宽度，背景色 */
    border-right: 220px solid #f00;/* 为右边列的宽度，背景色 */
    background-color: #0ff;
}
.col1 {
    float: left;
    /* 值为container容器的边框宽度，也为本列的具体宽度 */
    width: 220px;
    margin-left: -220px;
    position: relative;
}
.col2 {
    float: left;
    width: 520px;
    margin-right: -520px;
}
.col3 {
    float: right;
    width: 220px;
    margin-right: -220px;
    position: relative;
}
</style>
</head>
<body>
<div class="containerOuter">
    <div class="container">
        <div class="col col1">aaa</div>
        <div class="col col2">sss</div>
        <div class="col col3">dddd</div>
    </div>
</div>
</body>
</html>
View Code

效果展示：

 技术分享

代码思路：

  • 添加两个容器，div.containerOuter为控制整个布局的宽度、居中等样式
  • 容器div.container为整个布局的宽度、样式控制等，通过为其添加边框，形成等高的三列。其中边框的宽度和颜色分别代表左列和右列的宽度和样式，而本身的背景色则代表自身的样式
  • 第一列和第三列进行相对定位，添加左右外边距，边距的大小为本列的实际宽度，而中间列只是添加右外边距，边距大小同样是本列的实际宽度

延伸：相同原理，延伸成流体布局

技术分享 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* { margin:0; padding:0; }
.containerOuter {
    margin: 0 100px;
    padding: 0 220px;
}
.container {
    float: left;
    width: 100%;
    border-left: 220px solid #0f0;/* 为左边列的宽度，背景色 */
    border-right: 220px solid #f00;/* 为右边列的宽度，背景色 */
    margin-left: -220px;
    margin-right: -220px;
    display: inline;
    background-color: #0ff;
}
.col1 {
    float: left;
    /* 值为container容器的边框宽度，也为本列的具体宽度 */
    width: 220px;
    margin-left: -220px;
    position: relative;
}
.col2 {
    float: left;
    width: 100%;
    margin-right: -100%;
}
.col3 {
    float: right;
    width: 220px;
    margin-right: -220px;
    position: relative;
}
</style>
</head>
<body>
<div class="containerOuter">
    <div class="container">
        <div class="col col1">aaa</div>
        <div class="col col2">sss</div>
        <div class="col col3">dddd</div>
    </div>
</div>
</body>
</html>
View Code

效果展示：

技术分享

 

未完待续

 

网页布局

标签：

原文地址：http://www.cnblogs.com/cfWeb/p/5206315.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！