Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 单元7 网页布局与制作精彩非遗资讯页面 .pptx

项目7非遗资讯页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》页面布局

任务7.1搭建资讯页面的基本框架前端技术开发

任务引入一非遗资讯页面的原型图网页内容框架将复杂的页面划分成不同的区域，分而治之

任务描述搭建资讯页面整体布局1.将网页内容划分为3大区域，分别为页眉、页面主要内容、页脚，每个区域使用层来实现。2.页面主要内容区域又可划分为“资讯推介”区域和“专题报道”区域。3.为了直观了解网页的整体布局，会增加背景等样式来突出不同的区域。化繁为简，从大处着眼，从细节处着手。

任务实施二3124使用层来创建各区域，搭建网页结构设置各区域的样式根据UI设计，划分页面的各内容区域各区域的上下、左右排版HTML创建层CSS样式设置划分区域CSS排版

二任务实施将页面划分为页眉、页脚、页面主要内容三个区域页面主要内容页眉页脚Footer层Content层Header层对应创建Header层、Content层、Footer层

二任务实施Footer层Content层Header层创建Header层、Content层、Footer层三个部分divid=header 页面头部/divdivid=content 页面主体/divdivid=footer 页面底部/div创建层的HTML代码

任务实施二divid=content divid=news h1资讯推介/h1 /div divid=report h1专题报道/h1 /div/div页面主体HTML代码contentnewsreportnews区块逐步细化，分为news层和report层

任务实施二#header,#content,#footer{ width:1300px; margin:auto;}#header,#footer{ height:100px; background:#faa046;}#header,#content{ margin-bottom:10px;}#content{ height:600px; background:#50b8fd;}#news,#report{ height:290px; background:#ccc; margin-bottom:10px;}CSS代码设置各个层（区块）的大小，在实际应用中，一般只设置宽度，高度根据内容自适应。设置各个层之间的间距设置层的样式。

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

文档流与元素显示方式信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备文档流1块级元素与行内元素2调整元素大小3元素显示方式4

01文档流前端技术开发

文档流前端技术开发01文档流的概念文档流又称标准文档流，是网页文档中可显示元素所占用的位置以及排列的方式。按照网页代码出现的位置从上到下，从左到右进行显示，这也是浏览器解析网页文档默认的显示方式。上下排列左右排列

02块级元素与行内元素前端技术开发

块级元素前端技术开发02什么是块级元素块级元素自占一行，在元素前后带有换行符，块级元素之间是上下显示。默认情况下，宽度与父元素同宽，高度根据内容而定，没有内容，高度为0。它们一般做为容器、盒子使用。常见块级元素：p、h1~h6、div（层）。

行内元素前端技术开发02什么是行内元素行内元素在一行内从左往右依次排列。默认情况下，宽度和高度都根据内容自动计算而定，width属性和height属性不起作用。常见行内元素：span、a。

03调整元素大小前端技术开发

调整元素大小前端技术开发03设置元素宽度的语法：设置元素高度的语法：width：百分比|长度height：百分比|长度CSS中调整块级元素的大小，包括宽度和高度。说明：HTML中表示长度的单位，常用的有：像素(px)，em(相对于当前字体尺寸的单位)，rem等。百分比表示与该元素的父元素为参考。

h1,a{ width:200px; height:100px;}调整元素大小03设置标题和超链接的大小块级元素和行内元素设置大小块级元素（h1）按照width和height属性调整大小。行内元素（a）超链接元素设置大小不起作用，仍然是自适应大小。

04元素显示方式前端技术开发

元素显示方式前端技术开发04display属性设置元素显示方式。在实际网页排版布局中，可以遵循网页元素默认的显示方式，也可以使用display