|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介：本章经由过程多个示例展现CSS结构网页的办法，并对CSS的“盒模子”作具体论述。信任读者在深切了解“盒模子”后，结构网页、定位CSS网页元素将加倍自若。
经由过程上一章的进修，读者懂得到了CSS壮大的体现把持功效，出格是在结构方面有很年夜的上风。相对代码层次凌乱、款式杂糅在布局中的表格结构，CSS将带来全新的结构办法，让网页计划师更轻松、更自在。本章经由过程多个示例展现CSS结构网页的办法，并对CSS的“盒模子”作具体论述。信任读者在深切了解“盒模子”后，结构网页、定位CSS网页元素将加倍自若。
11.1甚么叫“Div+CSS”
上一章进修了Web尺度的观点和XHTML和CSS的基础常识。XHTML次要用div标签举行网页的结构，而把持结构的工具是CSS代码，以使网页切合Web尺度。以是良多网页计划师把这类结构办法的网页叫做“Div+CSS”网页。实在这是不太正确的说法，由于Web尺度不太被行外人士所熟悉，招致“Div+CSS”的观点代替了Web尺度。Web尺度不单单指用div标签结构（偶然候也用其他标签结构），其寄义十分广，必要代码编写优秀的布局，有优秀的语义和可读性等。
以是“Div+CSS”制造的网页纷歧定切合Web尺度，而切合Web尺度的网页纷歧定完整由div标签结构。
11.1.1初识div
div标签在Web尺度的网页中利用十分频仍，那末，相对其他HTML承继而来的元素，div有甚么出格的地方呢？谜底大概令读者扫兴，div标签甚么特征也没有，必定要说其特征，不外是一种块状元素。正由于div没有任何特征，以是更简单被CSS代码把持款式。
div标签是双标签，即以<div></div>的情势存在，其间能够安排任何内容，包含其他的div标签。也就是说，div标签是一个没有任何特征的容器罢了。在D:web目次下创立网页文件（XHTML1.0），定名为div.htm，编写div.htm文件代码如代码11.1所示。
代码11.1默许的div标签：div.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>初识div标签</title>
</head>
<body>
<div>我是第1个div标签中的内容</div>
<div>我是第2个div标签中的内容</div>
<div>我是第3个div标签中的内容</div>
</body>
</html>
在扫瞄器地点栏输出http://localhost/div.htm，扫瞄效果如1.1所示。没有CSS的匡助下，div标签没有任何出格的地方，只是不管怎样调剂扫瞄器窗口，每一个div标签占有一行。即默许情形下，一行只能包容一个div标签。为了再次证实一行只能包容一个div标签，笔者对div经由过程id选择符到场CSS代码，使div具有背景致和宽度，修正div.htm如代码11.2所示。
代码11.2设置背景的div标签：div.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>初识div标签</title>
<styletype="text/css">
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
</style>
</head>
<body>
<divid="top">第1个div标签中的内容</div>
<divid="mid">第2个div标签中的内容</div>
<divid="bt">第3个div标签中的内容</div>
</body>
</html>
在扫瞄器地点栏输出http://localhost/div.htm，扫瞄效果如1.2所示。
1.1默许的div标签1.2设置背景的div标签
经由过程背景致的设置，能够从1.2中看到div标签默许占有一行，宽度也为一行的宽度。经由过程宽度的设置能够发明，并非由于div的宽度为一行招致没法包容前面的div标签。不管宽度多小，一行一直只要一个div标签，读者须服膺。
div标签作为网页CSS结构的主力元素，其上风已十分分明。相对表格结构，div加倍天真，由于div只是一个没有任何特征的容器，CSS能够十分天真地对其举行把持，构成网页的每块地区。在年夜多半情形下，仅仅经由过程div标签和CSS的共同便可完成页面的结构，也难怪良多人称Web尺度页为“Div+CSS”网页了。
网页制造poluoluo文章简介：本章经由过程多个示例展现CSS结构网页的办法，并对CSS的“盒模子”作具体论述。信任读者在深切了解“盒模子”后，结构网页、定位CSS网页元素将加倍自若。
11.1.2XHTML中的块状元素和内联元素
上一节提到了XHTML的结构中心标签是div，而且div属于XHTML中的块级元素。XHTML的标签默许为2种元素。
（1）块状元素。该元素是矩形的，有本人的高度和宽度。默许情形下，在父容器中占有一行，统一行没法包容其他元素及文本。其他的元素将显现在其下一行，能够看作被块级元素“挤”下往的。块状元素就是一个矩描述器，边沿十分硬，CSS设置了高度和宽度后，外形没法被改动。
（2）内联元素。和块级元素相反，内联元素没有流动外形，也没法设置宽度和高度。内联元素外形由其内含的内容决意，以是在宽度充足的情形下，一行能包容多个内联元素。有人说相对块状元素是一个硬盒子，内联元素就是一个软软的布袋子（外形由内容决意）。
块状元素合适于年夜块的地区排版，以是经常使用来结构页面。而内联元素合适于部分元素的款式设置，以是经常使用于部分的笔墨款式设置。
11.1.3div元素的款式设置
读者要利用div元素举行网页结构，起首须学会利用CSS天真地设置div元素的款式。本节就几个经常使用的示例进修div元素的多种款式设置，使读者疾速了解div元素。作为单个div元素，width属性用于设置其宽度，height属性设置其高度。因为网页年夜多半用于盘算机显现屏幕作前言，以是经常使用像素作为流动尺寸的单元，即px。
—注重：在HTML元素中设置款式不必要填写单元，默许为像素。
当单元为百分比时，div元素的宽度和高度为自顺应形态，即宽度和高度顺应扫瞄器窗口尺寸而变更。在D:web目次下创立网页文件（XHTML1.0），定名为div_2.htm，编写div_2.htm文件代码如代码11.3所示。
代码11.3设置div款式：div_2.htm
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>设置div款式</title>
<styletype="text/css">
#fst{
background-color:#eee;
border:1pxsolid#000;
width:300px;
height:200px;
}
#sec{
background-color:#eee;
border:1pxsolid#000;
width:50%;
height:25%;
}
</style></head>
<body>
<divid="fst">这是流动尺寸的宽度和高度</div>
<hr/>
<divid="sec">这是自顺应尺寸的宽度和高度</div>
</body>
</html>
为了更便利看到div的体现，笔者给2个div都设置了浅灰色背景致和玄色边框，在扫瞄器地点栏输出http://localhost/div_2.htm，扫瞄效果如1.3所示。
1.3设置div款式
很分明，第1个div宽度和高度流动，构成了一个“坚固”的盒子。而第2个div因为设置其宽度为50%，其宽度跟着扫瞄器的宽度变更而变更。可是成绩呈现了，第2个div的高度固然设置为25%，按理说其高度应当跟着扫瞄器的高度变更而变更。但是在示例中div高度仅和文本高度相称，仿佛高度设置没有起感化。
实在设置高度自顺应有一个条件，div的高度自顺应是相对父容器的高度，本例中div父容器为body大概html（分歧扫瞄器剖析体例分歧）。body大概html在本例中没有设置高度，div的高度自顺应没有参照物，也就没法失效。
接上去在CSS中设置body和html的高度，便可办理div的高度自顺应成绩。body和html的高度间接设置为100%便可，不会对页面有任何影响。在div_2.htmd的CSS部分到场如代码11.4所示的代码。
代码11.4设置div款式：div_2.htm
html,body{height:100%;}
为了思索多种扫瞄器的兼容性，html和body同时设置100%宽度。在扫瞄器地点栏输出http://localhost/div_2.htm，扫瞄效果如1.4所示。
调剂扫瞄器高度后，第2个div的高度随之变更。各类扫瞄器对XHTML和CSS的剖析体例有差别，在前面将具体会商办理举措，以办理扫瞄器的兼容性成绩。
1.4设置div标签高度自顺应
网页制造poluoluo文章简介：本章经由过程多个示例展现CSS结构网页的办法，并对CSS的“盒模子”作具体论述。信任读者在深切了解“盒模子”后，结构网页、定位CSS网页元素将加倍自若。
11.1.4结构页面的宽度
因为扫瞄者的显现分辩率分歧，扫瞄者罕见显现分辩率（单元：像素）为800 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:40:53
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主