根据案例学习培训CSS合理布局网页页面

2021-03-14 15:12 jianzhan

根据上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”网页页面了。

上1页12 3 4 5 6 7 下1页 阅读文章全文