高二下北京理工大学出版社移动Web前端开发课件第4章 掌控页面布局
2023-01-09
|
81页
|
48人阅读
|
0人下载
普通
内容正文：
本章简介：
一个完整的页面大多都是由若干部分组成，要想页面结构清晰、合理，在设计页面前就需要分析页面结构，进行页面布局。网页的布局是CSS的核心知识之一。如何划分页面结构、利用CSS控制页面元素的位置，是我们本章学习的重点。
第4章 掌控页面布局
课堂学习目标
理解盒子模型及相关CSS属性设置方法
掌握块元素和行内元素的区别
掌握浮动布局的原理
掌握三种定位方法
能够熟练应用链接式CSS样式的使用
能够利用div对整个页面进行结构划分
能够初步解决HTML的乱码问题
4.1 【案例9】盒子模型
案例分析——“阅读西游”页面边距调整
实现步骤
知识点讲解——盒子模型与标准文档流
扩展：浮动问题
案例练习
4.1.1案例分析——“阅读西游”页面边距调整
网页布局是CSS的核心技术。在本案例中，我们将主要利用<div>标签完成对“阅读西游”页面的布局，调整页面边距。页面效果如图4.1所示。
1．需求分析
图4.1 阅读西游页面
根据最终效果，对案例进行分析，通过以下几个方面实现：
（1）设计页面结构布局。
（2）HTML部分。应用页面标签设计页面。
（3）CSS部分。为HTML用到的元素进行样式设置。
2．设计思路
（1）使用<div>标签进行页面布局。
（2）HTML部分。为页面编写HTML内容。
（3）利用CSS美化页面。
4.1.2 实现步骤
1．页面结构布局
div是英文division的缩写，意思是“分隔、区域”。我们在设计页面结构的时候，经常采用<div>标签分隔页面。从效果图可以看出，整个页面分为3个部分：头部header、正文content、尾部footer，如图4.2所示。
图4.2 页面结构图
其中，banner部分设计该页面的LOGO，放置在页面最上端；content部分设计该页面的详细内容；footer部分设计该页面的说明信息，放置在页面最底端。
2．HTML部分
新建ydxy.html文件，代码如下：
<body>
<header id="header"></header>
<div id="content"></div>
<div id="footer"></div>
</body>
填写内容，详见课程素材。
3．CSS部分
继续编辑ydxy.html文件，设置页面的CSS样式。在本案例中，我们主要实现页面的布局、结构定义，模块大小。比如，footer部分代码如下：
#footer {width: 100%;height: 30px;line-height: 30px;
text-align: center;background-color: #37ae07;color: #FFFFFF;}
依次编写素材样式，保存文件，在浏览器中浏览，可以得到图4.1的最终效果，实现页面结构的布局。
4.1.3 知识点讲解——盒子模型与标准文档流
页面布局经常用到盒子模型和标准流文档，在本节中，我们将会详细介绍这两方面内容。
1．盒子模型
盒子模型是CSS控制页面时的重要工具，是在网页设计中经常用到的一种思维模型。如图4.3所示。
图4.3 标准盒子模型
一个盒子中主要的属性有5个：宽度（width）、高度（height）、内边距（padding）、外边距（margin）、边框（border）。
元素的总宽度计算公式是：
总元素的宽度=宽度（width）+左填充（padding-left）+右填充（padding-right）+左边框（border-left）+右边框（border-right）+左边距（margin-left）+右边距（margin-right）。
元素的总高度最终计算公式是：
总元素的高度=高度（height）+顶部填充（padding-top）+底部填充（padding-bottom）+上边框（border-top）+下边框（border-right）+上边距（margin-top）+下边距（margin-bottom）。
1）宽度和高度
width和height用于定义模型的宽度和高度，属性值即为盒子模型高度、宽度的数值，有时候属性值也会设置为100%，比如：width:100%，指的是设置模型的宽度为父级元素的整个宽度。
2）内边距
内边距padding指的是内容与边框之间的距离，例如：对块元素div设置padding属性：
div{padding：-2px 2px 0px 2px;}
则div中的内容距离盒子边框的距离分别是：上边距-2
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。