Div+css网页排版
课程目标
•为什么要使用div+css样式来排版
•理解CSS盒子模型
•转变思路
•实现结构与表现分离
•熟悉工作流程
为什么要使用div+css样式来排版
•如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的
网页，也就是常听的用DIV来编排你的网页结构，又或者说你想
学习网页标准设计，再或者说你的上司要你改变传统的表格排版
方式，提高企业竞争力，那么你一定要接触到的一个知识点就是
CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版
是通过大小不一的表格和表格嵌套来定位排版网页内容，改用
CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套
来编排网页。因为用这种方式排版的网页代码简洁，更新方便，
能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自
己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的
优势远远不只这些
Div+css排版网页的优点
•网页代码简洁
•更新方便
•能兼容更多的浏览器
理解css盒子模型
•什么是css的盒子模式呢？为什么叫它是盒子?
先说说我们在网页设计中常听的属性名：内容
(content)>填充(padding)、边框(border)、边
界(margin),CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解,
日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容
就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而
添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说
明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时
也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是
也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，"八生一活.
中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹
性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只
有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小
和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是
用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
十e一/I.5-1-一Ihttps://www.renrendoc.com/paper/rt-r、n
在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以
一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构
就类似我们要做的网页版面设计了，如下图。
转变我们的思路
•传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用
什么类型的图片，用什么字体、颜色馨等，然后再用Photoshop这类软
件自由的画出来，最后再切成小图，再不自由的通过设计-HTML生成页
面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页
面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你
还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让
代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我
的网页设计的很复杂，到后来能不能实现那样的效案？我要告诉你的是,
如果用CSS实现不了的效果，一般用表称也是很难实现的，因为CSS的
控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的
好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来
客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你
还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动
态调用，让网站具有动态改变风格的功能。
实现结构与表现分离
•在真正开始布局实践之前，再来认识一件事一
—结构和表现相分离，这也用css布局的特色
所在，结构与表现分离后，代码才简洁，更新
才方便，这不正是我们学习css的目的所在吗?
•举个例来说P是结构化标签，有P标签的地方
表示这是一个段落区块，margin是表现属性，
我要让一个段落右缩进2字高，有些人会想到
加空格，然后不断地加空格，但现在可以给P
标签指定一个CSS样式：P{text-indent:2em;},
这样结果body内容部分就如下，这没有外加
任何表现控制的标签：
margin
•如果提供全部四个参数值，将按上一右一下一
左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上一下，第二个用
如果提供三个，第一个用于上，第二个用于左
一右，第三个用于下。
用css排版
•<styletype="text/css">
<!—
#photoListimg{
height:80;
width:100;
margin:5pxauto;
}
—>
</style><divid="photoList">
<imgsrc="01jpg"/>
<imgsrc="02jpg"/>
<imgsrc="03.jpg"/>
<imgsrc=n04.jpgH/>
<imgsrc="05jpg"/>
</div>
不用css排版
•<imgsrc="01.jpg"width="100"height="80"
align="middle”/>
<imgsrc=,,02.jpg"width="100"height="80"
align-'middle"/>
<imgsrc="03.jpg"width="100"height="80"
align=Hmiddle"/>
<imgsrc="04.jpg"width二“100”height="80"
align="middle”/>
<imgsrc="05ojpg"width=“100"height="80"
align="middle”/>
•容部分代码简单吧，如果还有更多的图片列表的话，
那么第一种CSS布局方法就更有优势，我打人比喻你
好理解：我在BODY向你介绍一个人，我只对你说他
是一个人，至于他是二个什么样的人工有多高，是男
是女，你去CSS那里查下就知道。这样我在BODY的
工作就简单了，也就是说BODY的代码就简单了。如
果BODY有一个团队人在那里，我在CSS记录一项就
行了，这有点像Flash软件里的元件和实例的概念，不
同的实例共享同一个元件，这样动画文件就不大工，
把这种想法移到CSS网页设计中，就是代码不复亲，
网页文件体积小能较快被客户端下载了。
SI理解cs履例去微我们的思路龌工帏程
嗾你骋试一下不用黑格来？噪施崩一下不睚格来感娜鸵一下不用精来瞰你杷韶一可用翻东
赫颐，而觑css新版轴极限，而是用css来解瓣势版颤，“用css耕雕的械豳，酸用CSS林麟的
冏页।也睚常听楣m悚蒯颐，也睚翻悚酬颐，蝴是常所踏瓜慌醐胸，也就是新的用。比簿I排
轴颤将构，又蠕说你睥;你的颂触,又幅说虢豹岫限触,又或那膊利柳网除何，又或若说你熠学习
版标般计，国域说血司顺标㈱计，再睇说你的上司项标准如•，再或者说轴上司独标准蚓，再或醐施上司
要撤辘舜嫉格娜方式，理要澈轴施然格廨旅，袋夏栩支传辎林触方式，提爵城敬锄林㈱方式，提
蹄业竞多加般你一灵雅的畿业竞争加舷你一定妻都融业竟勃，舷你一走要翻!联瞧物，舷你一定期触
螂一个如辿潮融懒好也勤一蚀阳澈郭^的曾嬲H个如触瞠C磷舒盘魏产解点就是位触翎
型，击曲版桃帆正，佳辘I型，山画版的祓心所在，骸的型，d）肃版的网所忆骏的如山浦掘籁I廨，牖的
懿芹健渊处不W）表格粕表解，般醐大MW幅加表鄢^是通过大小不一缄格和精排版题必小不一解格加
表格嵌歌魂》版前内容，而表格将客来磁并版限内容，而表微确定的幡颜内容，而都健蕊位排版网页内容，而
改用css懒后，腱丽由css定改用css排版后，就是通过艇混改用CSS洋版后，就国迪过由CS淀改用CS辨版后，就是遁过由CS淀
文献标W盒子傩子犍来义的处不一的好德子岭来义的大小不一的窝子粕盒子嵯来义的大小不一傩子和宣子惕考来:
的卿5・翩豳.翩颜,胡颐.
padding
•设置对象四边的补丁边距
•如果提供全部四个参数值，将按上一右一下一
左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上一下，第二个用
如果提供:个，第一个用于上，第二个用于左
一右，第三个用于下
border
•边框
border:1pxdashed#fffff
上面的代码表示边框的粗细为1像素，虚线，颜色为
白色
•Line-height:1.5em表示行高为1.5个字体大小
•Text-indent:2em表示首行缩进2个字体
熟悉工作流程
•在真正开始工作之前我们脑海中要形成这样一种思想:
表格是什么我不知道，在内容部分我不能让它再出现
表凯控制标转，如：font、color>height、width>
align等标签不能再出现，（简单说工祚前先洗脑，忘
掉以乱的一惯做法L音燧式和便用余新的方添），我
不是单纯的用DIV来实哺非版尚嵌套，DIV是块级元素,
而像P也是块级元素，例如要分出几个文字内容块，
不是一定要用DIV才叫DIV排版，不是“vdiy>文字块
一v/div>vdiv>文字块二v/div>vdiv>文字块三v/div>”,
而用“vp>文字块一v/p>vp>文字块二v/p>vp>文字块
三V/p>”更合适。
熟悉工作流程
•用DIV+CSS设计思路是这样的:
•1.用div来定义语义结构；
•2•然后用CSS来美化网页，如加入背景、线条
边框、对齐属性等；
•3.最后在这个CSS定义的盒子内加上内容，如
文字、图片等（没有表现属性的标签），下面
大家跟我一起来做一个实例加深对这个步骤的
理解。先看结果图：
-X2.—
刖ri
如果你想叁成一下不用表格来徘版网7（，而是用cmsx排国倘回衣，也就是靠听的用DM来编拍粽的网页片构,R4若也伤噌学工网页
标注设计，再五者记你的上司要你改变传统的表格排版方式，稼高企业竟今力，却以伤一定要接触到用一个知识点就是C$S的盒子模型，div
琲版的核心所J，传统羽表珞排版是圆大小不一的表格彳」表珞嵌后泳定任科版网网内容，而改月css排版后，就是遇过右css定义的大小
不的盒了和G了枳套末螭井网文，区为用这件方式排版的网页代码信泄」更新才更，能就零更下的浏览器，比如PDA设安由能正常浏览，
所以放弃自己之前忡爱的表格排版也是值得的，更重要的是CE2排版网庆由忱势远近不只这些，本人亡这里不多说，自己可以去交我相美信
息.
理解CSS盒子模型
什么是CS3的盒子模型呢？为什么叫它是盒子？先说说我们在网页核计牛常听的扈•生名：内容（coiteg、崖充（pedding）、边也
（bcde^边界（mwrgin）,而C3S盒子哽型都具各这些屋性，这些屋性我•‘n可以把E转移到我们E常生活中的盒子（箱子）上未理解，E莒生
沿中切见的金子也具有辽些感性，加以叫E部子模型，那公内写就是荔子旦装的未加：而填充就老怕盒子里装正东西（贵五的）毁坏由摩加
的泡沫或者其它抗麦的楣料；边框就是浣亍本身了；至于过界川说明搐子摆放的时候由不能主都只在一起，要留一后隙民持通风，同时也
为了方•更或出嘛.正网页族上二，内容常指文字'、幻片等元素，但是也可以是小盒子cDM嵌套）.与现实上活中盒子不同的是>现实生活中
的东西一纵小行大十盒子.否如:含金*蟠汽的，面。3£盒工具有弹性.里EI的东西大过找盘子本身像务把物屋大.我不会不抵.填充只有宽
度屉性，可以至解为生活中盒子里的抗宸加料厚型，而边槎有大小和颜色之分，我门又可以理解为生涪中所见盒子的厚度以及这个盒子是，书
什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离.在现实生活中，我们正一个厂场上，把不同大刁疝颜色的盒子，以一定
的间隙和成序摆放好，最后小厂场上空往下看，看到的图形和笫构就类似我（要做的网页版面设计了.现在对C3S盒子才鲤理解多少了，如
果还不够恚彻，继柒往下莅，我金主后面举洌，并延用盒子的怛念无解释E。
其于华升I厂后脆爰|我招牌|客赧卬心|CQ留言网玷言理|合泰置烫|蛔物军
CaoyrghtQ2DOS-2008-angOuohul.AlRi2itsReserved
•1.用div来定义语义结构
•现在我要给大家演示的是一个典型的版面分
栏结构，即页头、导航栏、内容、版权
•代码如下：
•<divid=,'headern></div>
<divid=,,navn></div>
<divid="contentH></div>
<divid=,,footer,,x/div>
•上面我们定义了四个盒子，按照我们想要的结
果是，我们要让这些盒子等宽，并从上到下整
齐排列，然后在整个页面中居中对齐，为了方
便控制，我们再把这四个盒子装进一个更大的
盒子，这个盒子就是BODY,这样代码就变成:
•<body>
<divid=,'headerH></div>
<divid=',nav,'></div>
<divid=,'contentH></div>
<divid=nfooterH></div>
</body>
•最外边的大盒子（装着小盒子的大盒子）我们
要让它在页面居中，并重定义其宽度为760像
素，同时加上边框，那么它的样式是：
•body{
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
margin:Opxauto;
height:auto;
width:760px;
border:1pxsolid#006633;
)
•页头为了简单起见，我们这里只要让它整个区
块应用一幅背景图就行了，并在其下边界设计
定一定间隙，目的是让页头的图像不要和下面
要做的导航栏连在一起，这样也是为了美观。
其样式代码为：
•#header{
height:100px;
width:760px;
background-image:url(headPic.gif);
background-repeat:no-repeat;
margin:OpxOpx3pxOpx;
)
•导航栏我做成像一个个小按钮，鼠标移上去会
改变按钮背景色和字体色，那么这些小小的按
钮我们又可以理解为小盒子，如此一来这是一
个盒子嵌套问题了，样式代码如下：
•#nav{
height:25px;
width:760px;
font-size:14px;
list-style-type:none;
)
#navli{
#navlia{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-aIign:center;
background-color:#009966;
margin-left:2px;
)
#navlia:hover{
background-color:#006633;
color:#FFFFFF;
)
•内容部分主要放入文章内容，有标题和段落，
标题加粗，为了规范化，我用H标签，段落要
自动实现首行缩进2个字，同时所有内容看起来
要和外层大盒子边框有一定距离，这里用填充。
内容区块样式代码为：
•#content{
height:auto;
width:740px;
)
#contentp{
text-inde
到此这篇css grid布局案例（div+css布局案例）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/19125.html