全国服务热线:4008-888-888

技术知识

初学者简易学习培训CSS网页页面合理布局


XHTML关键用div标识开展网页页面的合理布局,而操纵合理布局的专用工具是CSS编码,以使网页页面合乎Web规范。因此许多网页页面设计方案师把这类合理布局方式的网页页面叫做“Div CSS”网页页面。实际上这是不太精确的说法,由于Web规范不太被行外人员所熟悉,致使“Div CSS”的定义替代了Web规范。 CSS合理布局方式
根据上1章的学习培训,读者掌握到了CSS强劲的主要表现操纵作用,非常是在合理布局层面有很大的优点。相对编码逻辑性错乱、款式杂糅在构造中的报表合理布局,CSS将带来全新升级的合理布局方式,让网页页面设计方案师更轻轻松松、更随意。本章根据好几个示例展现CSS合理布局网页页面的方式,并对CSS的“盒实体模型”作详尽论述。坚信读者在深层次了解“盒实体模型”后,合理布局网页页面、精准定位CSS网页页面元素将更为轻松。
11.1 什么是“Div CSS”
上1章学习培训了Web规范的定义和XHTML和CSS的基础专业知识。XHTML关键用div标识开展网页页面的合理布局,而操纵合理布局的专用工具是CSS编码,以使网页页面合乎Web规范。因此许多网页页面设计方案师把这类合理布局方式的网页页面叫做“Div CSS”网页页面。实际上这是不太精确的说法,由于Web规范不太被行外人员所熟悉,致使“Div CSS”的定义替代了Web规范。Web规范不仅指用div标识合理布局(有时也用别的标识合理布局),其含意十分广,必须编码撰写优良的构造,有优良的词义和可读性等。
因此“Div CSS”制做的网页页面不1定合乎Web规范,而合乎Web规范的网页页面不1定彻底由div标识合理布局。
11.1.1 初识div
div标识在Web规范的网页页面中应用十分经常,那末,相对别的HTML承继而来的元素,div有甚么非常的地方呢?回答将会令读者心寒,div标识甚么特点也沒有,1定要说其特点,但是是1种块状元素。正由于div沒有任何特点,因此更非常容易被CSS编码操纵款式。
div标识是双标识,即以<div></div>的方式存在,期间能够置放任何內容,包含别的的div标识。也便是说,div标识是1个沒有任何特点的器皿罢了。在D:\web\文件目录下建立网页页面文档(XHTML1.0),取名为div.htm,撰写div.htm文档编码如编码11.1所示。

编码11.1 默认设置的div标识:div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-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,访问实际效果如图11.1所示。沒有CSS的协助下,div标识沒有任何非常的地方,只是不管如何调剂访问器对话框,每一个div标识占有1行。即默认设置状况下,1行只能容下1个div标识。以便再度证实1行只能容下1个div标识,笔者对div根据id挑选符添加CSS编码,使div有着情况色和宽度,改动div.htm如编码11.2所示。

编码11.2 设定情况的div标识:div.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>初识div标识</title>
<style type="text/css">
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
</style>
</head>
<body>
<div id="top">第1个div标识中的內容</div>
<div id="mid">第2个div标识中的內容</div>
<div id="bt">第3个div标识中的內容</div>
</body>
</html>
在访问器详细地址栏键入http://localhost/div.htm,访问实际效果如图11.2所示。

图11.1 默认设置的div标识 图11.2 设定情况的div标识
根据情况色的设定,能够从图11.2中看到div标识默认设置占有1行,宽度也为1行的宽度。根据宽度的设定能够发现,其实不是由于div的宽度为1行致使没法容下后边的div标识。不管宽度多小,1行自始至终仅有1个div标识,读者须切记。
div标识做为网页页面CSS合理布局的主力元素,其优点早已十分显著。相对报表合理布局,div更为灵便,由于div只是1个沒有任何特点的器皿,CSS能够十分灵便地对其开展操纵,构成网页页面的每块地区。在大多数数状况下,仅仅根据div标识和CSS的相互配合便可进行网页页面的合理布局,也难怪许多人称Web规范页为“Div CSS”网页页面了。
11.1.2 XHTML中的块状元素和内联元素
上1节提到了XHTML的合理布局关键标识是div,而且div属于XHTML中的块级元素。XHTML的标识默认设置为2种元素。
(1)块状元素。该元素是矩形框的,有自身的高宽比和宽度。默认设置状况下,在父器皿中占有1行,同1行没法容下别的元素及文字。别的的元素将显示信息在其下1行,能够看作被块级元素“挤”下去的。块状元素便是1个矩形框器皿,边沿十分硬,CSS设定了高宽比和宽度后,样子没法被更改。
(2)内联元素。和块级元素相反,内联元素沒有固定不动样子,也没法设定宽度和高宽比。内联元素样子由其内含的內容决策,因此在宽度充足的状况下,1行能容下好几个内联元素。有人说相对块状元素是1个硬盒子,内联元素便是1个软软的布袋子(样子由內容决策)。
块状元素合适于大块的地区排版,因此常见来合理布局网页页面。而内联元素合适于部分元素的款式设定,因此常见于部分的文本款式设定。
11.1.3 div元素的款式设定
读者要应用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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设定div款式</title>
<style type="text/css">
#fst {
background-color: #eee;
border:1px solid #000;
width:300px;
height:200px;
}
#sec {
background-color: #eee;
border:1px solid #000;
width:50%;
height:25%;
}
</style></head>
<body>
<div id="fst">这是固定不动规格的宽度和高宽比</div>
<hr />
<div id="sec">这是自融入规格的宽度和高宽比</div>
</body>
</html>
以便更便捷看到div的主要表现,笔者给2个div都设定了浅灰色情况色和黑色边框,在访问器详细地址栏键入http://localhost/div_2.htm,访问实际效果如图11.3所示。

图11.3 设定div款式
很显著,第1个div宽度和高宽比固定不动,产生了1个“硬实”的盒子。而第2个div因为设定其宽度为50%,其宽度伴随着访问器的宽度转变而转变。可是难题出現了,第2个div的高宽比尽管设定为25%,按理说其高宽比应当伴随着访问器的高宽比转变而转变。但是在示例中div高宽比仅和文字高宽比非常,仿佛高宽比设定沒有起功效。
实际上设定高宽比自融入有1个前提条件,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,访问实际效果如图11.4所示。
调剂访问器高宽比后,第2个div的高宽比随之转变。各种各样访问器对XHTML和CSS的分析方法有差别,在后边将详尽探讨处理方法,以处理访问器的适配性难题。

图11.4 设定div标识高宽比自融入
11.1.4 合理布局网页页面的宽度
因为访问者的显示信息辨别率不一样,访问者普遍显示信息辨别率(企业:像素)为800×600、1024×768、1280×1024、1440×960等。因此在合理布局网页页面时,要充足考虑到网页页面內容的合理布局宽度,1旦內容宽度超出显示信息宽度,网页页面将出現水平翻转条。

— 表明:尽可能确保网页页面仅有竖直翻转条,才合乎访问者的习惯性,因此高宽比不必须考虑到,由网页页面內容决策网页页面高宽比。

网页页面合理布局宽度1般考虑到最少显示信息辨别率的访问客户,即以往访问客户的显示信息辨别率最少为800×600(15寸CRT显示信息器),其最少宽度为800像素。访问器的边框及翻转条一部分约占24像素上下,因此合理布局宽度为辨别率的水平像素减去24像素。因此以往网页页面合理布局宽度1般为778像素,再宽就会使网页页面造成水平翻转条。
因为测算机机器设备的迅猛发展,如今应用800×600显示信息辨别率的客户非常少了,如今网页页面合理布局宽度最大不超出1002 ~1003像素(考虑到到最少宽度1024像素,即1024×768显示信息辨别率)。
11.1.5 合理布局网页页面水平垂直居中
以便融入不一样访问客户的辨别率,网页页面设计方案师要自始至终确保网页页面总体內容在网页页面垂直居中。应用HTML报表合理布局网页页面时,只必须设定合理布局报表的align特性为center便可。而div垂直居中沒有特性能够设定,只能根据CSS操纵其部位。
在合理布局网页页面前,网页页面制做者1定要把网页页面的默认设置边距消除。以便便捷实际操作,常见的方式是应用通配挑选符*,将全部目标的边距消除,即margin特性和padding特性。margin特性意味着目标的外边距(上、下、左、右),padding特性意味着目标的内边距,也叫填充(上、下、左、右)。

— 表明:margin特性和padding特性相近于报表模块格的cellspacing特性和cellpadding特性,但是margin特性和padding特性功效于全部块状元素。

使div元素水平垂直居中的方式有多种多样,常见的方式是用CSS设定div的上下边距,即margin-left特性和margin-right特性。当设定div左外边距和右外边距的值为auto,即全自动时,左外边距和右外边距将相同,即做到了div水平垂直居中的实际效果。在D:\web\文件目录下建立网页页面文档(XHTML1.0),取名为div_align.htm,撰写div_align.htm文档编码如编码11.5所示。

编码11.5 设定div水平垂直居中:div_align.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设定div水平垂直居中</title>
<style type="text/css">
*{margin:0px;
padding:0px;
}
#all{width:75%;
height:200px;
background-color:#eee;
border:1px solid #000;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="all">合理布局网页页面內容</div>
</body>
</html>
以便更便捷看到div的主要表现,笔者给div设定了浅灰色情况色和黑色边框,在访问器详细地址栏键入http://localhost/div_align.htm,访问实际效果如图11.5所示。
是否很简易?设定外边距的CSS编码能够进1步简化,应用margin特性,撰写方式为:
margin:0px auto;

图11.5 设定div水平垂直居中
margin特性值前面的0意味着上边距和下边距为0像素,auto意味着左侧距和右侧距为auto,即全自动设定。读者留意,0px和auto之间应用空格标记隔开,而并不是逗号。也有1种方式是应用html或body的text-align特性,设定其值为center,即全部目标将垂直居中。这样将致使网页页面文字垂直居中,因此不作强烈推荐,其撰写方式为:
html,body{text-align:center;}
上1页12 3 下1页 阅读文章全文


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服