第8章 CSS布局应用
本章要内容包括:
通过本章的学习,掌握利用浮动布局、位置定位布局的方法设计实现不同版式网页的能力。同时,掌握并实现面向移动端的响应式网页布局。
l 导航
l 卡片式布局
l 图文列表
l 自定义列表
l 响应式网页布局
PC端的网页布局经常采用固定宽度的方式。在确定宽度的数值时,需要考虑用户使用的计算机的主流屏幕分辨率。例如,1024*768、1366*768、1440*900、1920*1080等都是较为常见的屏幕分辨率。以屏幕分辨率中的宽度为界限,形成了网页布局中对宽度的限制。不同的网站根据各自内容的特点,会固定采用某一个宽度作为网页的外围宽度。
1、网站的三级网页
主页
栏目页
内容页
2、网站逻辑结构和目录结构
逻辑结构
目录结构
3、导航
网站导航是网站中非常重要的元素,从形式上看,网站导航主要分为:垂直导航、水平导航、下拉导航、多级弹出导航等常见形式。
在导航的实现过程中,导航的结构通常是由无序列表以及超链接ul>li>a构成,用CSS控制无序列表和超链接的样式从而最终形成导航元素。
网页中导航的一般结构是:
例如:
导航区域及无序列表的CSS样式
超链接的CSS样式
4.自定义符号列表
自定义符号列表有多种实现方式。其中一种方式是通过CSS中的list-style-image来完成,但是由于不同的浏览器下显示效果会有差异,因此并没有被广泛采用。我们需要掌握的方式是通过li元素的背景图像来完成,请通过实验的相关练习加以掌握。
html结构
css样式
对于li元素的CSS样式设置是重点。
5、自定义编号列表
自定义编号列表通过HTML中的有序列表ol元素来构造。ol元素中的默认编号无法做样式的变化,因此如果希望在编号上实现特殊的样式效果,需要取消ol的默认编号,在li中增加一个span元素,人工进行编号。
HTML结构
使用CSS样式对span中的数字进行样式的控制:
6、卡片式布局
网页结构如图
为了形成规律的卡片式布局,需要计算好整体内容的宽度,以及每张卡片的宽度和外边距。例如为了形成如下的布局:
7、图文混排
借助浮动,可以在网页中形成类似Word中的四周型环绕效果。
一般创建类选择器的样式,分别应用到需要左浮动或右浮动的图像上。请通过实验文档中的相关练习加以掌握。
8、首字下沉
利用浮动,也可以在网页中形成类似Word中的首字下沉的效果。
8、两列固定宽度居中的整体布局
HTML结构
CSS样式
发表评论 取消回复