第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样式


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
天麻的功效与作用吃法|天麻的功效与作用,天麻的功效与作用吃法,天麻炖什么治头痛最好,天麻的功效与作用禁忌,天麻多少钱一斤,天麻的功效与作用吃法及禁忌,天麻怎么吃效果最好,天麻粉的功效与作用,天麻怎么吃
天麻的功效与作用吃法
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
云南综合高中|云南综合高中
云南综合高中
弥勒综合高中|弥勒综合高中
弥勒综合高中
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部