您现在的位置是:网站首页>列表内容
通过实例学习CSS布局网页_CSS布局实例_CSS_网页制作_
2021-08-29 16:16:28
1508人已围观
简介 本章通过多个示例展示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标签是一个没有任何特性的容器而已。在D:\web\目录下创建网页文件(XHTML1.0),命名为div.htm,编写div.htm文件代码如代码11.1所示。代码11.1 默认的div标签:div.htm
在浏览器地址栏输入http://localhost/div.htm,浏览效果如图11.1所示。没有CSS的帮助下,div标签没有任何特别之处,只是无论怎么调整浏览器窗口,每个div标签占据一行。即默认情况下,一行只能容纳一个div标签。为了再次证明一行只能容纳一个div标签,笔者对div通过id选择符加入CSS代码,使div拥有背景色以及宽度,修改div.htm如代码11.2所示。
代码11.2 设置背景的div标签:div.htm
#top,#bt{background-color:#eee;
}
#mid{background-color:#999;
width:250px;
}
#bt{width:120px;}
在浏览器地址栏输入http://localhost/div.htm,浏览效果如图11.2所示。
图11.1 默认的div标签 图11.2 设置背景的div标签
通过背景色的设置,可以从图11.2中看到div标签默认占据一行,宽度也为一行的宽度。通过宽度的设置可以发现,并不是因为div的宽度为一行导致无法容纳后面的div标签。无论宽度多小,一行始终只有一个div标签,读者须谨记。
div标签作为网页CSS布局的主力元素,其优势已经非常明显。相对于表格布局,div更加灵活,因为div只是一个没有任何特性的容器,CSS可以非常灵活地对其进行控制,组成网页的每一块区域。在大多数情况下,仅仅通过div标签和CSS的配合即可完成页面的布局,也难怪很多人称Web标准页为“Div+CSS”网页了。
点击排行
![](http://img.jbzj.com/file_images/game/201504/2015041111515727.jpg)
- 逆战主城第二个箱子快捷跳法教学 逆战主城第二个箱子怎么跳 _游戏视频_游戏攻略_
- cf连跳碎步技巧教学 高空跳下怎么不掉血_游戏视频_游戏攻略_
- cf破碎之都轻松刷黎明玫瑰攻略分享_游戏视频_游戏攻略_
- 魔兽世界6.1奥法天赋雕文 6.1奥法视频教学 wow6.1奥法技能属性推荐 _游戏视频_游戏攻略_
- 魔兽世界6.1火法天赋雕文 6.1火法视频教学 wow6.1火法技能属性推荐_游戏视频_游戏攻略_
- cf4月金牛降临版本视频 cf2015年4月新版本内容_游戏视频_游戏攻略_
- cf近身武器铁锤测评解析 cf铁锤怎么样_游戏视频_游戏攻略_
- cf岩洞遗址怎么卡bug cf岩洞遗址卡bug攻略分享_游戏视频_游戏攻略_
- 魔兽世界6.2造船厂船坞视频演示_游戏视频_游戏攻略_
本栏推荐
![](http://img.jbzj.com/file_images/game/201504/2015041111515727.jpg)
-
逆战主城第二个箱子快捷跳法教学 逆战主城第二个箱子怎么跳 _游戏视频_游戏攻略_
-
cf连跳碎步技巧教学 高空跳下怎么不掉血_游戏视频_游戏攻略_
-
cf破碎之都轻松刷黎明玫瑰攻略分享_游戏视频_游戏攻略_
-
魔兽世界6.1奥法天赋雕文 6.1奥法视频教学 wow6.1奥法技能属性推荐 _游戏视频_游戏攻略_
-
魔兽世界6.1火法天赋雕文 6.1火法视频教学 wow6.1火法技能属性推荐_游戏视频_游戏攻略_
-
cf4月金牛降临版本视频 cf2015年4月新版本内容_游戏视频_游戏攻略_
-
cf近身武器铁锤测评解析 cf铁锤怎么样_游戏视频_游戏攻略_
-
cf岩洞遗址怎么卡bug cf岩洞遗址卡bug攻略分享_游戏视频_游戏攻略_
-
魔兽世界6.2造船厂船坞视频演示_游戏视频_游戏攻略_