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)指的是利用元 ...
随机推荐
- 鼠标经过图片时变换的两种方法--css+div及javascript应用
javascript方式: 熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- Asp.net MVC学习
一.mvc项目的创建并运行 1.启动vs2010 2.新建项目 3.选择Asp.net mvc应用程序 4.不创建测试用例 5.创建之后的效果 6.运行后的mvc程序
- poj1547---结构数组
题意:老师发给每个学生的橡皮泥相同,找出谁抢了谁的橡皮泥 思路:结构数组存储每个学生的橡皮总量,和名字 /* 结构数组存储用户信息--只放名称和体积 while输入循环复用长宽高变量 for循环求所有 ...
- Cocos2d—X游戏开发之CCTableView详解（十一）
本来很早就想写关于CCTableView的文章,但是在基本功能实现之后呢,项目需求增加导致对这个控件的研究必须更加深入一点. 好的,现在开始介绍一下这个控件,在Cocos2d—X引擎中,这是一个仿制i ...
- Java反射-简单应用
为了程序更好的维护和扩展,在面向对象思维的世界里,首先是面向接口编程,然后我们应该把做什么和怎么做进行分离. 以下我将用一个开晚会的样例来演示一下,终于达到的效果是:工厂+反射+配置文件实现程序的灵活 ...
- 【CTSC1999】【解救大兵瑞恩】
44. [CTSC1999] 解救大兵瑞恩 ★★☆ 输入文件:rescue.in 输出文件:rescue.out 简单对照 时间限制:1 s 内存限制:128 MB 问题描写叙述 1944年,特种兵麦 ...
- oracle表设置主键自增长
create or replace table TBL_SYS_USER ( user_id NUMBER(19) not null, user_name ...
- 用for循环遍历DataTable中的数据
for (int i = 0; i < dataTable.Rows.Count; i++) { for (int j = 0; j < dataTable.Columns.Count; ...
- 关于group by的一段SQl语句——Oracle
select cc.fformulacode, cc.rangedate, dd.fpervalue from (select n1.fformulacode, max(n1.frangedate) ...
- 思考----拒绝单纯copy
工作4个多月以来感触最深的是: 做事情的时候遇到不会的可以上网查或者问别人,但是获取到的知识不能只是单纯的copy过来使用达到要求就ok, 更重要的是事后等有空了一定要仔细研究学习,使知识网络完整,这 ...