web前端学习笔记(CSS固定宽度布局)
一、单列布局：
这是最简单的一种布局方式，之所以给出该示例，还是为了保证本篇博客的完整性。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>固定宽度布局</title>
<style type="text/css">
#header,#pagefooter,#content {
border: 1px solid red;
margin: 10px auto 10px 10px;
padding: 5px;
width: 360px;
}
</style>
</head>
<body>
<div id="header">
<h2>Page Header</h2>
<p>
这是一行文本，这里作为样例，显示在布局框中。<br/>
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div id="content">
<h2>Page Content</h2>
<p>
这是一行文本，这里作为样例，显示在布局框中。<br />
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div id="pagefooter">
<h2>Page Footer</h2>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
</div>
</body>
</html>
从CSS代码可以看到，3个div的宽度都设置为固定值360像素，同时将margin设置为margin: 10px auto 10px 10px，从而实现了右侧好像有个弹簧，将他们全部挤到左侧，反之，如果想把他们全部挤到左侧，可以将margin设置为margin: 10px 10px 10px auto。见如下效果图。
二、“1-2-1”固定宽度布局：
该布局也是经常会用到的，这里我们先给出最终的效果图，然后再给出代码，以便大家都能现有一个感官上的认识，再看code就会容易很多。
下面为与上图匹配的HTML代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div ,p, h2 {
margin: 2px;
padding: 5px;
}
#container {
width: 612px;
margin: 10px auto;
}
#header,#footer {
width: 596px;
border: 1px solid red;
}
#content {
float: left;
width: 360px;
border: 1px solid red;
}
#side {
float: left;
width: 220px;
border: 1px solid red;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Page Header</h2>
</div>
<div id="content">
<h2>Page Content 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div id="side">
<h2>Side Bar 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
</div>
<div id="footer">
<h2>Page Footer</h2>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
</div>
</div>
</body>
</html>
这里需要主要关注的是CSS中#content和#side都被设置为向左浮动float: left，二者的宽度相加等于总宽度，例如这里将它们的宽度分别设置为360px和220px。本例出于方便展示的目的，添加了padding/border/margin将各个div的边界显示的分离出来，这样#content和#side每个div的实际所占宽度均为自身宽度 + (5px + 5px) + border(1px + 1px) + margin(2px + 2px)。最后需要注意的是#footer的CSS中添加了clear:both，否则如本例content的高度高于side高度，footer将会被content的底部覆盖，这是因为float为left的div没有在标准流中。如下图为#footer去掉clear:both之后的效果。
三、“1-3-1”固定宽度布局：
和上面的1-2-1固定布局一样，该布局也是经常会用到的，这里我们还是给出最终的效果图，然后再给出代码，以便大家都能现有一个感官上的认识，再看code就会容易很多。
和上例相比，该示例在代码中只是简单的多出了一个div(#navi)，其CSS中也包含float:left。剩下就是其他相关div的宽度需要重新计算，计算方式等同于1-2-1给出的公式。下面为与改图匹配的HTML代码。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div, p, h2 {
margin: 2px;
padding: 5px;
}
div {
border: 1px solid red;
}
#container {
width: 788px;
margin: 10px auto;
border: 0;
}
#header,#footer {
width: 772px;
}
#navi {
float: left;
width: 160px;
}
#content {
float: left;
width: 360px;
}
#side {
float: left;
width: 220px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Page Header</h2>
</div>
<div id="navi">
<h2>Navi Bar 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div id="content">
<h2>Page Content 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div id="side">
<h2>Side Bar 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
</div>
<div id="footer">
<h2>Page Footer</h2>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
</div>
</div>
</body>
</html>
四、“1-((1-2)+1)-1”固定宽度布局：
根据下面的效果图，再结合前面的示例，相信大家能够很快理解该布局的含义。
与上图匹配的代码如下，与前面一个示例相比主要的变化是加入了#left-container和#right-container两个div。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>布局固定宽度</title>
<style type="text/css">
div, p, h2 {
margin: 2px;
padding: 5px;
}
div {
border: 1px solid red;
}
#container {
width: 788px;
margin: 10px auto;
border: 0;
}
#header,#footer {
width: 772px;
}
#left-container {
float: left;
width: 552px;
}
#navi {
float: left;
width: 160px;
}
#content {
float: left;
width: 360px;
}
#right-container {
float: left;
width: 204px;
}
#side {
width: 188px;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Page Header</h2>
</div>
<div id="left-container">
<div id="banner">
<h2>Banner</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div><!-- end of banner -->
<div id="navi">
<h2>Navi Bar 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div id="content">
<h2>Page Content 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
</div><!-- end of left container -->
<div id="right-container">
<div id="side">
<h2>Side Bar 1</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
</div>
<div id="side">
<h2>Side Bar 2</h2>
<p>对于一个网页设计者来说，HTML语言一定不会感到陌生。</p>
</div>
</div><!-- end of right container -->
<div id="footer">
<h2>Page Footer</h2>
<p>这是一行文本，这里作为样例，显示在布局框中。</p>
</div>
</div>
</body>
</html>
注：该篇博客源自《CSS设计彻底研究》中的第十三章，书中的例子简明扼要、通俗易懂，因此选取部分主要内容与大家分享，同时也便于今后自己的在线查阅。
web前端学习笔记(CSS固定宽度布局)的更多相关文章
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- web前端学习笔记(CSS盒子的定位)
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relat ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- amazeui学习笔记--css（布局相关1）--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
随机推荐
- JavaWeb开发学习(一)-JavaWeb开发概述
1.Web相关概念 Web程序也就是一般所说的网站,由服务器.客户端浏览器以及网络组成.Web程序的好处是使用简单,不需要安装.学习,有一台电脑.一根网线就可以使用.Web程序不是一般意义上的网站.网 ...
- xampp开启php-debug
[XDebug]zend_extension = "C:\xampp\php\ext\php_xdebug.dll";xdebug.profiler_append = 0;xdeb ...
- Oracle的update语句优化研究
最近研究sql优化,以下文章转自互联网: 1. 语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...
- 调试SQLSERVER （一）生成dump文件的方法
调试SQLSERVER (一)生成dump文件的方法 调试SQLSERVER (二)使用Windbg调试SQLSERVER的环境设置调试SQLSERVER (三)使用Windbg调试SQLSERVER ...
- .net笔记
一.垃圾回收 1.运行.NET应用程序时,程序创建出来的对象都会被CLR跟踪, 2.哪些对象还会被用到(存在引用关系):哪些对象不会再被用到(不存在引用关系),CLR都是有记录的. 3.CLR会整理不 ...
- 使用扩展方法简化RadAjaxManager设置
相对于RadAjaxPanel,RadAjaxManager提供了更精确控制更新目标的设置,特别是在某些场景下,使用RadAjaxManager能够获得更好的性能. 但是,由于要明确设置目标,配置的代 ...
- 如何设计一门语言（八）——异步编程和CPS变换
关于这个话题,其实在(六)里面已经讨论了一半了.学过Haskell的都知道,这个世界上很多东西都可以用monad和comonad来把一些复杂的代码给抽象成简单的.一看就懂的形式.他们的区别,就像用js ...
- [PCB制作] 1、记录一个简单的电路板的制作过程——四线二项步进电机驱动模块（L6219）
前言 现在,很多人手上都有一两个电子设备,但是却很少有人清楚其中比较关键的部分(PCB电路板)是如何制作出来的.我虽然懂点硬件,但是之前设计的简单系统都是自己在万能板上用导线自己焊接的(如下图左),复 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程（五）：使用Senparc.Weixin.MP SDK
Senparc.Weixin.MP SDK已经涵盖了微信6.x的所有公共API. 整个项目的源代码以及已经编译好的程序集可以在这个项目中获取到:https://github.com/JeffreySu ...
- Atitit.rsa密钥生成器的attilax总结
Atitit.rsa密钥生成器的attilax总结 1.1. 密钥生成器 1 1.2. 生成固定的密钥 2 1.2.1. 设置或重置 SecureRandom 对象的随机数种子 2 1.3. 密钥结构 ...