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)指的是利用元 ...
随机推荐
- linux win7双系统
真恨我自己啊,刚在linux下写了这个博客,因为没有分类,添加了个linux分类.按了F5刷没了.靠,哪里有心情复述啊 一直想装直接装linux系统,现在实现他,以后也要跟上linux的笔记,不然都对 ...
- 在cad中画一条长500mm，垂直90度的线段
视频教程奉上 方法1.点击线段按钮,鼠标指定一点,输入500,再输入<90. 方法2,点击线段按钮,鼠标指定一点,输入500,按tab,再输入90.
- Yahoo团队经验：网站性能优化的34条黄金法则
Yahoo团队总结的关于网站性能优化的经验,非常有参考价值.英文原文:http://developer.yahoo.com/performance/rules.html 1.尽量减少HTTP请求次数 ...
- C++死锁解决心得
一. 概述C++多线程开发中,容易出现死锁导致程序挂起的现象.关于死锁的信息,见百度百科http://baike.baidu.com/view/121723.htm. 解决步骤分为三步:1.检测死锁线 ...
- 04737_C++程序设计_第8章_多态性和虚函数
例8.1 分析下面程序的输出结果. 例8.2 分别使用指针和引用的display函数. #include <iostream> using namespace std; const dou ...
- as3用鼠标拖动图形拼图——灰常简单的教程
话说这种效果在课件里面经常用到,鼠标拖动事件,一个运用很频繁的事件,一起学习学习吧 首先SWF贡献给大家看看效果 感觉咋样,原理其实还蛮简单的,做做试试吧 下面来看看源码吧 package { imp ...
- JS isArray记录
var isArray=Function.isArray||function(0){ return typeof o === "object" && Object. ...
- IOS开发:xcode5版本引发的问题
下面这段代码是用于处理ios7头部透明问题的 #if __IPHONE_OS_VERSION_MAX_ALLOWED >= 70000 if ( IOS7_OR_LATER ) { self.e ...
- MD5和sha1加密算法
在很多电子商务和社区应用中,我们都要存放很多的客户的资料,其中包括了很多的隐私信息和客户不愿被别人看到的信息,当然好有客户执行各种操作的密码,此时就需要对客户的信息进行加密再存储,目前有两种比较好的加 ...
- css两个紧挨着的css选择器修饰同一个元素
#status, .commands{ height: 25px; line-height: 25px;}.upload .commands{ float: right;}.hidden{ displ ...