转载自:http://bbs.blueidea.com/thread-2727499-1-3.html
前言
如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,
这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器,比如PDA设备也能正常
浏览,所以放弃自己之前钟爱的表格排版也是值得的,更重要的是CSS排版网页的优势远远不只这些,本人在这里就不多说,自己可以去查相关信息。
理解CSS盒子模型
什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
CSS盒子模式
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式。那么内容就是盒子里装的东西;而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框就是盒子本身了;至于边界则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出嘛。在网页设计上,内容常指文字、图片等
元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,
而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。在现实生活中,假设我们在一个广场上,把不同大小和颜色的盒子,以一定的间隙和顺序摆放好,最后从广场上空往下看,看到的图形和结构就类似我们要做的网页版面设计了,如下图。
由“盒子”堆出来的网页版面
现在对CSS盒子模式理解多少了,如果还不够透彻,继续往下看,我会在后面举例,并延用盒子的概念来解释它。
转变我们的思路
传统的前台网页设计是这样进行的:根据要求,先考虑好主色调,要用什么类型的图片,用什么字体、颜色等等,然后再用Photoshop这类软件自由的画出来,最后再切成小图,再不自由的通过设计HTML生成页面,改用CSS排版后,我们要转变这个思想,此时我们主要考虑
的是页面内容的语义和结构,因为一个强CSS控制的网页,等做好网页后,你还可以轻松的调你想要的网页风格,况且CSS排版的另外一个目的是让代码易读,区块分明,强化代码重用,所以结构很重要。如果你想说我的网页设计的很复杂,到后来能不能实现那样的效果?我要告
诉你的是,如果用CSS实现不了的效果,一般用表格也是很难实现的,因为CSS的控制能力实在是太强大了,顺便说一点的是用CSS排版有一个很实用的好处是,如果你是接单做网站的,如果你用了CSS排版网页,做到后来客户有什么不满意,特别是色调的话,那么改起来就相当容易,甚至你还可以定制几种风格的CSS文件供客户选择,又或者写一个程序实现动态调用,让网站具有动态改变风格的功能。
实现结构与表现分离
在真正开始布局实践之前,再来认识一件事——结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是结构化标签,有P标签的地方表示这是一个段落区块,margin是表现属性,我要让一个段落右缩进2字高,有些人会想到加空格,然后不断地加空格,但现在可以给P标签指定一个CSS样式:P {text-indent: 2em;},这样结果body内容部分就如下,这没有外加任何表现控制的标签:复制内容到剪贴板代码:
<p>加进天涯社区有一段时间了,但一直没有时间写点东西,今天写了一篇有关CSS布局的文章,并力求通过一种通俗的语言来说明知识点,还配以实例和图片,相信对初学CSS布局的人会带来一定的帮助。</p>如果还要对这个段落加上字体、字号、背景、行距等修饰,直接把对应的CSS加进P样式里就行了,不用像这样来写了:复制内容到剪贴板代码:
<p><font color="#FF0000" face="宋体">段落内容</font></p>这个是结构和表现混合一起写的,如果很多段落有统一结构和表现的话,再这样累加写下去代码就繁冗了。
再直接列一段代码加深理解结构和表现相分离:
用CSS排版复制内容到剪贴板代码:
<style type="text/css">
<!--
#photoList img{
height:80;
width:100;
margin:5px auto;
}
-->
</style> <div id="photoList">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
</div>不用CSS排版复制内容到剪贴板代码:
<img src="01.jpg" width="100" height="80" align="middle" />
<img src="02.jpg" width="100" height="80" align="middle" />
<img src="03.jpg" width="100" height="80" align="middle" />
<img src="04.jpg" width="100" height="80" align="middle" />
<img src="05.jpg" width="100" height="80" align="middle" /> 第一种方法是结构表现相分离,内容部分代码简单吧,如果还有更多的图片列表的话,那么第一种CSS布局方法就更有优势,我打个比喻你好理解:我在BODY向你介绍一个人,我只对你说他是一个人,至于他是一个什么样的人,有多高,是男是女,你去CSS那里查下就知道。这样我在BODY的工作就简单了,也就是说BODY的代码就简单了。如果BODY有一个团队人在那里,我在CSS记录一项就行了,这有点像Flash软件里的元件和实例的概念,不同的实例共享同一个元件,这样动画文件就不大了,把这种想法移到CSS网页设计中,就是代码不复杂,网页文件体积小能较快被客户端下载了。
演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css1.html
用CSS排版减小网页文件体积
像上面我做的那个版面,一共分为四个区块,每个区块的框架是一样的,这个框架就是用CSS写出来的,样式写一次,就可以被无数次调用了(用class调用,而不是ID),只要改变其中的文字内容就可以生成风格统一的众多板块了,它的样式和结构代码是(请不要直接复制生成网页,把下面代码分别粘贴到网页中它们应在的位置):复制内容到剪贴板代码:
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099CC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想:表格是什么我不知道,在内容部分我不能让它再出现表现控制标签,如:font、color、height、width、align等标签不能再出现,(简单说工作前先洗脑,忘掉以前的一惯做法,去接受和使用全新的方法),我不是单纯的用DIV来实现排版的嵌套,DIV是块级元素,而像P也是块级元素,例如要分出几个文字内容块,不是一定要用DIV才叫DIV排版,不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”,而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。
用DIV+CSS设计思路是这样的: 1.用div来定义语义结构;2.然后用CSS来美化网页,如加入背景、线条边框、对齐属性等;3.最后在这个CSS定义的盒子内加上内容,如文字、图片等(没有表现属性的标签),下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图:
演示地址:http://www.blueidea.com/articleimg/2007/03/4545/css2.html
CSS排版结果图
用div来定义语义结构
现在我要给大家演示的是一个典型的版面分栏结构,即页头、导航栏、内容、版权(如下图),
典型版面分栏结构
其结构代码如下:复制内容到剪贴板代码:
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div> 上面我们定义了四个盒子,按照我们想要的结果是,我们要让这些盒子等宽,并从下到下整齐排列,然后在整个页面中居中对齐,为了方便控制,我们再把这四个盒子装进一个更大的盒子,这个盒子就是BODY,这样代码就变成:复制内容到剪贴板代码:
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</body> 最外边的大盒子(装着小盒子的大盒子)我们要让它在页面居中,并重定义其宽度为760像素,同时加上边框,那么它的样式是:复制内容到剪贴板代码:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
} 页头为了简单起见,我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙,目的是让页头的图像不要和下面要做的导航栏连在一起,这样也是为了美观。其样式代码为:复制内容到剪贴板代码:
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
} 导航栏我做成像一个个小按钮,鼠标移上去会改变按钮背景色和字体色,那么这些小小的按钮我们又可以理解为小盒子,如此一来这是一个盒子嵌套问题了,样式代码如下:复制内容到剪贴板代码:
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
} 内容部分主要放入文章内容,有标题和段落,标题加粗,为了规范化,我用H标签,段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离,这里用填充。内容区块样式代码为:复制内容到剪贴板代码:
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px; 版权栏,给它加个背景,与页头相映,里面文字要自动居中对齐,有多行内容时,行间距合适,这里的链接样式也可以单独指定,我这里就不做了。其样式代码如下:复制内容到剪贴板代码:
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
} 最后回到样式开头大家会看到这样的样式代码:复制内容到剪贴板代码:
* {
margin: 0px;
padding: 0px;
} 这是用了通配符初始化各标签边界和填充,(因为有部分标签默认会有一定的边界,如Form标签)那么接下来就不用对每个标签再加以
这样的控制,这可以在一定程度上简化代码。最终完成全部样式代码是这样的:复制内容到剪贴板代码:
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px auto;
height: auto;
width: 760px;
border: 1px solid #006633;
}
#header {
height: 100px;
width: 760px;
background-image: url(headPic.gif);
background-repeat: no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height: 25px;
width: 760px;
font-size: 14px;
list-style-type: none;
}
#nav li {
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color: #009966;
margin-left:2px;
}
#nav li a:hover{
background-color:#006633;
color:#FFFFFF;
}
#content {
height:auto;
width: 740px;
line-height: 1.5em;
padding: 10px;
}
#content p {
text-indent: 2em;
}
#content h3 {
font-size: 16px;
margin: 10px;
}
#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}
-->
</style>结构代码是这样的:复制内容到剪贴板代码:
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="#">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">帮助</a></li>
</ul>
<div id="content">
<h3>前言</h3>
<p>第一段内容</p>
<h3>理解CSS盒子模式</h3>
<p>第二段内容</p>
</div>
<div id="footer">
<p>关于华升 | 广告服务 | 华升招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang
Guohui. All Rights Reserved</p>
</div>
</body>
分享到:
相关推荐
其中,CSS盒子模型作为CSS布局的基础,对于理解和掌握CSS布局至关重要。 #### 二、CSS盒子模型概述 **CSS盒子模型**是用于描述网页元素如何被渲染的一种模型。每个网页元素都可以被视为一个矩形盒子,这些盒子相互...
碳交易机制下考虑需求响应的综合能源系统优化运行模型及有效性分析,碳交易机制下需求响应的综合能源系统优化运行策略探索:低碳减排的实践路径,碳交易机制下考虑需求响应的综合能源系统优化运行 综合能源系统是实现“双碳”目标的有效途径,为进一步挖掘其需求侧可调节潜力对碳减排的作用,提出了一种碳交易机制下考虑需求响应的综合能源系统优化运行模型。 首先,根据负荷响应特性将需求响应分为价格型和替代型 2 类,分别建立了基于价格弹性矩阵的价格型需求响应模型,及考虑用能侧电能和热能相互转的替代型需求响应模型; 其次,采用基准线法为系统无偿分配碳排放配额,并考虑燃气轮机和燃气锅炉的实际碳排放量,构建一种面向综合能源系统的碳交易机制; 最后,以购能成本、碳交易成本及运维成本之和最小为目标函数,建立综合能源系统低碳优化运行模型,并通过 4 类典型场景对所提模型的有效性进行了验证。 通过对需求响应灵敏度、燃气轮机热分配比例和不同碳交易价格下系统的运行状态分析发现,合理分配价格型和替代型需求响应及燃气轮机产热比例有利于提高系统运行经济性,制定合理的碳交易价格可以实现系统经济性和低碳性协同。 关键词: 碳交易机制;
MATLAB演示程序:涡旋拉盖尔-高斯光束的横模特性与拓扑荷数及径向指数的影响分析,涡旋拉盖尔高斯光束MATLAB演示程序,涡旋拉盖尔高斯光束横模MATLAB演示程序 拓扑荷数l : 决定了光束的轨道角动量。 具有不同拓扑荷数的涡旋拉盖尔 - 高斯光束携带不同大小的轨道角动量。 影响光束的相位分布。 当l≠0时,光束具有螺旋相位结构,即相位随着角向坐标以的周期变化。 可以通过光学方法进行调控和测量,在量子信息处理、光学镊子等领域有重要应用。 径向指数p : 表示径向方向上的节点数。 p值越大,光束在径向方向上的能量分布变化越复杂,会出现更多的节点和暗区。 与拓扑荷数一起决定了光束的整体形状和强度分布。 ,涡旋拉盖尔-高斯光束; 拓扑荷数l; 径向指数p; MATLAB演示程序; 螺旋相位结构; 角向坐标变化; 轨道角动量。,MATLAB演示涡旋拉盖尔-高斯光束横模:拓扑荷数与径向指数的影响
PFC5.0算例代码解析:含矿物岩石材料,PFC5.0代码解析:探究由三种矿物构成的岩石与类岩石材料在GBM条件下的单轴压缩2D模拟算例,助力学习与技能提升,PFC5.0代码,含三种矿物组成的岩石或者类岩石材料,GBM,单轴压缩2d,算例代码仅供学习以及提升 ,关键词:PFC5.0代码;三种矿物组成;岩石或类岩石材料;GBM;单轴压缩2d;算例代码;学习;提升; 关键词:PFC5.0; 矿物组成; 岩石/类岩石; GBM; 单轴压缩; 算例学习; 提升;,PFC5.0模拟:含三种矿物岩石材料单轴压缩算例
Matlab三维A*算法详解:Astar三维路径规划及自定义地图、障碍物与代函数设定指南,Matlab三维A星算法路径规划工具箱,matlab三维A*算法 Astar三维路径规划 超详细注释 可自定义地图 自定义障碍物栅格数量和颜色 路径颜色 修改代价函数 预设5种常见评价指标 可 ,matlab; A*算法; 三维路径规划; 详细注释; 自定义地图; 自定义障碍物; 栅格数量和颜色; 路径颜色; 代价函数; 评价指标。,Matlab三维A*算法:超详细注释,自定义地图与障碍物路径规划
win32汇编环境,对话框中使用树形视图示例三
**基于SVPWM与死区补偿的PMSM dq轴电感离线辨识方法:高频注入法与电流极性分析**,SVPWM死区补偿技术下的PMSM电感离线辨识方法研究——基于电流极性与高频注入法的高效识别策略,SVPWM+死区补偿(基于电流极性)+高频注入法辨识PMSM的dq轴电感(离线辨识) 1.模型的中的电机,为采用自建的电机模型 2.适用于spmsm和ipmsm, 3.基于两相静止坐标轴电压注入,可通过设置合理的电压幅值和频率,在静止状态下准确辨识电感(更电机后,由于电机额定电压与转速的不同,可能需要调整原有的高频注入参数以获取满意的辨识效果)(不适用在线辨识) 4.死区补偿,是基于电流矢量极性判断 5.可进行有、无死区补偿下的辨识效果对比(资料中包含多个模型,为笔者当初在有无死区补偿,不同设置条件下的进行参数辨识效果对比,以及模型中包含的一些注释,或可供参考) 6.如果模型运行提示Ts未定义,可在命令行窗口输入Ts=0.0001,以解决该报错 7.模型与参考的期刊lunwen一一对应,可互相印证,其建模方式和思想,适合小白入门学习(不建议初学者无参考lunwen的模型) ,SVPWM; 死区补偿
关于电容电流反馈在有源阻尼谐振抑制及SVPWM策略中的运用及其结合单电流环与中点电位平衡控制的综合研究(参考《某领域文献》《另一些领域的研究》等),电容电流反馈SVPWM控制,电容电流反馈有源阻尼谐振抑制+SVPWM 含: [1]有源阻尼谐振抑制+SVPWM [2]单电流环控制 [3]中点电位平衡控制 提供相关参考文献 ,有源阻尼谐振抑制; SVPPM; 电容电流反馈; 谐振抑制; 中点电位平衡控制; 文献暂无。,电容电流反馈结合SVPWM与有源阻尼谐振抑制的研究与实现
易福门RFID:高效控制标准块,多重调用易管理,轻松修改编号与硬件标识符,RFID控制标准块多重调用便捷设,易福门RFID控制标准块,可以多重调用,只需要更改编号和硬件标识符。 ,易福门RFID;控制标准块;多重调用;编号;硬件标识符,易福门RFID标准控制块:多调高效,只需更改编号和硬件标识
TypeScript 基础语法,本人亲自整理的资料
基于博途西门子PLC的多种液体混合控制系统设计与实现:一份包含全流程的电子程序资料,基于博途西门子PLC的多种液体混合控制系统设计与实现:一份包含全流程的电子程序资料,基于plc多种液体混合控制系统设计 博途 西门子plc 本为电子程序资料 一、包含内容: ①西门子PLC程序+HMI仿真工程 (博途V14或以上) 一份; ②配套有IO点表+PLC接线图+主电路图+控制流程图 (CAD源文件可编辑); ,基于plc多种液体混合控制系统设计; 博途V14; 西门子plc; 混合控制; 控制系统设计; 程序仿真; IO点表; PLC接线图; 主电路图; 控制流程图。,基于博途V14的西门子PLC多种液体混合控制系统设计资料
寻找热泵最佳压力的优化算法 输入Cop和高压值,以找到最大化Cop的最佳高压 Optimization algorithm to find optimal pressure of heat pump Inputs of Cop and high pressure values to find optimal high pressure that maxes out COP
三相变压器空载合闸励磁涌流仿真研究:特点分析与观察,变压器空载合闸:三相励磁涌流仿真研究及特性分析,【1】变压器空载合闸时励磁涌流的仿真 仿真目的:分析三相变压器空载合闸过程中,观察励磁涌流的特点 仿真结果:励磁涌流的特点和分析过程可详细咨询。 ,励磁涌流;变压器空载合闸;仿真目的;分析特点;仿真结果。,变压器空载合闸仿真:励磁涌流分析
孪生模型环境安装及其训练方法
更多毕业设计https://cv2022.blog.csdn.net/article/details/124463185
315MHz与433MHz无线遥控接收解码Keil源程序及AD格式电路图详解,315MHz和433MHz无线遥控接收解码源程序,附带Keil源程序和AD格式电路图,315 433MHZ无线遥控接收解码源程序 Keil源程序 含AD格式电路图 ,315MHz无线遥控接收; 433MHz无线解码源程序; Keil源程序; AD格式电路图,基于Keil的315/433MHz无线遥控解码源程序解析及AD格式电路图详解
MATLAB滚动轴承故障诊断程序:采用西楚凯斯大学数据,基于变分模态分解(VMD)算法与包络谱分析的故障诊断比较实现,MATLAB滚动轴承故障诊断程序:采用西楚凯斯大学数据,基于变分模态分解(VMD)算法与包络谱分析的故障诊断比较实现,MATLAB滚动轴承故障诊断程序:采用西楚凯斯大学数据,首先通过变分模态分解(VMD)算法处理,而后分别通过包络谱分析实现故障诊断 ps.通过尖峰对应的频率与计算出的故障频率比较,实现故障诊断 ,核心关键词:MATLAB; 滚动轴承故障诊断; 西楚凯斯大学数据; 变分模态分解(VMD)算法; 包络谱分析; 故障频率比较。,MATLAB基于VMD算法的滚动轴承故障诊断程序:西楚凯斯大学数据包络谱分析
个人ii c的一个说明的资料
更多毕业设计https://cv2022.blog.csdn.net/article/details/124463185
python语言,窗口形式 单机的形式,CS模式 mysql 1.重点是算法比较 各个算法参数 产生的图和数据足够了 做影评参照 2.自适应svm 既然加了自适应 那它比svm的优势在哪,自适应也是逐步完善的算法 拿新的和旧的比较一下 3.分析结果显示 调图标库即可,条状图 饼状图之类的 不是网站