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)指的是利用元 ...
随机推荐
- SublimeText3常用快捷键和优秀插件(转载)
SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下就好,一键安装.然后,有钱的土豪就自己买个吧, ...
- zookeeper 学习笔记 （C语言版本）
1.zookeeper简介 zookeeper是Hadoop的子项目,在大型分布式系统中,zookeeper封装好了一些复杂易出错的服务,提供简单易用的接口,给使用者提供高效稳定的服务.这些服务包括配 ...
- dom元素和方法总结
主要是参考<精通javascript>. 全局变量有: document.这个变量包含浏览器的html dom文档的引用. HTMElement 这个变量是所要html dom 元素的超类 ...
- Strange Towers of Hanoi
题目链接:http://sfxb.openjudge.cn/dongtaiguihua/E/ 题目描述:4个柱子的汉诺塔,求盘子个数n从1到12时,从A移到D所需的最大次数.限制条件和三个柱子的汉诺塔 ...
- nodejs微信开发获取token，ticket-1
/* jshint -W079 */ /* jshint -W020 */ "use strict"; var _ = require("lodash"); v ...
- POJ 3831 & HDU 3264 Open-air shopping malls（几何）
题目链接: POJ:id=3831" target="_blank">http://poj.org/problem?id=3831 HDU:http://acm.h ...
- 怎样通过css的media属性，适配不同分辨率的终端设备?
怎样通过css的media属性,适配不同分辨率的终端设备,示比例如以下: <!DOCTYPE html> <html> <head> <title>首页 ...
- S3C2440 之SPI
概述: S3C2440有两个串行外设SPI接口,SPI具有全双工通信 SPI方框图 SPI操作: 通过使用SPI接口,S3C2440可以与外部器件同时发送.接收8位数据.当SPI接口为主机时,可以通过 ...
- git、githup使用
一.git安装.配置 git安装: root@ubuntu~# apt-get install git git配置githup/自己的git服务器端账号, 即在用户的home目录下生成.gitco ...
- c_str()
1.string类成员函数c_str()的原型: const char *c_str()const;//返回一个以null终止的c字符串 2.c_str()函数返回一个指向正规c字符串的指针,内容和s ...