CSS 布局总结——固定宽度布局
固定宽度布局
单列布局
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Fyd29sZjI0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
<!DOCTYPE HTML>
<html>
<head>
<title>单列固定宽度</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div> <div id="content">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div> <div id="pagefooter">
<div class="warp">
<h2>Page Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
<div class="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</div>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
.warp{
border: 1px solid black;
width: 760px;
margin: 10px auto;
}
.warp h2{
background-color: #666;
padding: 20px 20px 10px;
margin: 0;
}
.warp .main{
background-color: #999;
padding: 10px 20px;
}
.warp .footer p{
background-color: #CCC;
color: #888;
text-align: right;
display: block;
padding: 10px 20px 20px;
margin: 0;
}
1-2-1 布局
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2Fyd29sZjI0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
<!DOCTYPE HTML>
<html>
<head>
<title>1-2-1 固定宽度</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="content">
<h2>Content Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 760px;
margin: 10px auto;
}
#header{
border: 1px solid black;
background-color: #666;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
1）使用 absolute 定位：用这样的方法仅仅须要确定当中一列的宽度，并设为 absolute: absolute; 还有一列使用margin 定位。
注意父元素设为 position:relative; 并且设为 absolute 的列必须比还有一列高度小。
#container{
position: relative;
}
#content{
border: 1px solid black;
background-color: #999;
width: 500px;
position: absolute;
top: 0;
left: 0;
}
#side{
border: 1px solid black;
background-color: #999;
margin-left: 520px;
}
2）使用float 定位：使用这样的方法两列都必须设置宽度，而且要在最后加一个空的元素 <div id="clear"></div>
#content{
border: 1px solid black;
background-color: #999;
width: 500px;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 250px;
float: right;
}
#clear{
clear: both;
}
1-3-1 布局
1-((1-2)+1)-1 布局
<!DOCTYPE HTML>
<html>
<head>
<title>1-((1-2)+1)-1 固定宽度</title>
<meta charset="utf-8" />
</head> <body>
<div id="header">
<p>Header</p>
</div> <div id="container">
<div id="content">
<div id="contentHeader">
<p>Content Header</p>
</div>
<div id="columns">
<div id="column1">
<h2>Column1 Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="column2">
<h2>Column2 Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
</div>
</div>
<div id="side">
<h2>Side Header</h2>
<div class="main">
<p>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</p>
</div>
</div>
<div id="clear"></div>
</div> <div id="footer">
<p>footer footer footer footer footer footer footer footer</p>
</div>
</body>
</html>
CSS：
body{
font: 13px/1.5 Arial;
margin: 0;
padding: 0;
}
#header, #container, #footer{
width: 760px;
margin: 10px auto;
}
#header{
border: 1px solid black;
background-color: #666;
}
#footer{
border: 1px solid black;
background-color: #CCC;
}
/*使用 float 布局*/
#content{
width: 500px;
float: left;
}
#side{
border: 1px solid black;
background-color: #999;
width: 240px;
float: right;
}
#clear{
clear: both;
}
#contentHeader{
border: 1px solid black;
background-color: #999;
}
#columns{
margin: 10px 0;
}
#column1{
border: 1px solid black;
background-color: #999;
width: 250px;
float: left;
}
#column2{
border: 1px solid black;
background-color: #999;
width:210px;
float: right;
}
CSS 布局总结——固定宽度布局的更多相关文章
- web前端学习笔记(CSS固定宽度布局)
一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- css布局记录之双飞翼布局、圣杯布局
双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下: <!DOCTYPE html> <html lang= ...
- 一、CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版
CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...
- CSS常见的五大布局
本文概要 本文将介绍如下几种常见的布局: 一.单列布局 常见的单列布局有两种: header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略 ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局
流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...
随机推荐
- Javascript 匀速运动停止条件——逐行分析代码，让你轻松了解运动的原理
我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug.这里加了两个标杆用于测试 <style type="text/css"> #div1 ...
- xunsearch安装与卸载
刚接触xunsearch(迅搜)的时候,我是排斥的.排斥的原因不是因为害怕学习新技术(其实我是对心技术很感兴趣),而是因为:一方面xunsearch是国人开发的,对于国人写的开源产品,我不是太感兴趣( ...
- Java 拾遗
1.选择表达式中的类型转换 public class Test { public void static main(String args[]){ int i = 5; System.out.prin ...
- SQL Server FileStream优点与不足
LOB优点: 1.保证大对象的事务一致性. 2.备份与还原包括大数据对象,可以对它进行时点恢复. 3.所有数据都可以使用一种存储与查询环境. LOB不足: 1.大型对象在缓存中占非常大的缓存区. 2. ...
- 关于ajax中async参数的感悟
async,这个参数默认为true. 就是异步去处理信息. 当把它设置为false的时候,就是同步去处理数据了. var current_lead_id = '<?php echo $curre ...
- 字符串匹配——Brute-Force 简单匹配算法
下面几篇文章记录字符串匹配算法. Brute-Force算法简称BF算法,中文名叫简单匹配算法.正如其名,简单粗暴,按部就班地遍历所有字符,算法简单,效率低下,不被看好. 但也正因为不常用,反而容易生 ...
- mongoose 查询子文档的方法
{ "__v": 1, "_id": "538f5f0f6195a184108c8bd8", "title": &quo ...
- 在iOS当中发送电子邮件和短信
iOS实现发送电子邮件的方法很简单,首先导入MessageUI.framework框架,然后代码如下: #import "RPViewController.h" //添加邮件头文件 ...
- Brew install for mac
安装命令例如以下: curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --st ...
- xcode - 移动手势
#import "ViewController.h" @interface ViewController () /** 创建一个UIView */ @property(nonato ...