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

项目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">

页面头部</div><divid="content">

页面主体</div><divid="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元素显示方式401文档流前端技术开发文档流前端技术开发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属性改变元素的显示方式。属性值描述none元素不显示。block块级元素。inline行内元素。inline-block行内块级元素。inline-table外面是“内联盒子”，里面是“table盒子”。table块级表格。table-row表格行。table-cell表格单元格。list-item为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。flex弹性盒子display属性取值元素显示方式前端技术开发04设置超链接元素的显示方式：独占一行，可设置大小一行显示多个，可设置大小a{

display:block;

width:100px;

height:50px;}a{

display:inline-block;

}将超链接设置为按块级元素显示将超链接设置为行内块级元素显示总结前端技术开发网页元素默认的显示方式，默认样式。不同的元素显示方式和默认样式不同。比如：块级元素：独占一行。上下排列。可以设置大小。

行内元素：一行可显示多个。左右排列。无法控制大小。文档流的概念01display属性的使用方式和取值。它可以控制元素以块级或行内元素的显示方式显示。元素显示方式02感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS核心-盒子模型信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备创建层1盒子模型2设置填充3设置边距401创建层前端技术开发01层元素层标记元素语法：<div>…</div>说明：

<div>标记可定义网页文档中的区块或节（division/section），把文档内容分割为独立的、不同的部分，它可以看作是一个包容网页元素的容器。

<div>是一个块级元素，只有前后换行样式，是一个非常“干净”的双标记。<div>直接放文本</div><div><ahref=“index.html”>首页</a></div><div

id="nav"><ul><li><ahref="#"target="_blank">首页</a></li><li><ahref="#"target="_blank">机构</a></li><li><ahref="#"target="_blank">资讯</a></li><li><ahref="#"target="_blank">调研</a></li><li><ahref="#"target="_blank">指南</a></li></ul></div>01创建层HTML代码：网页效果：div做为容器使用02盒子模型概念前端技术开发02盒子模型什么是盒子模型？盒子模型（boxmodel）是CSS的核心知识点之一。网页上的每个元素（标记）都被看成是一个矩形盒子，这个盒子由里往外的顺序为：内容（content）、填充（padding）、边框（border）、边距（margin）这四个要素组成。03设置填充前端技术开发03设置填充填充（padding）也称内边距，在盒子模型中用于调整元素内容到边框的距离。设置填充的CSS属性内容属性说明上内边距padding-top长度|百分比，其中，百分比是相对于上级元素宽度width的百分比，随着上级元素width的变化而变化，和高度height无关右内边距padding-right下内边距padding-bottom左内边距

padding-left组合属性内边距

padding取1~4个值。可参考border-style设置h2{text-align:center;}p{border:5pxsolidgreen;}.b2{

padding:35px10px15px25px}03设置填充CSS代码：网页效果：<h2>设置填充属性</h2><p>该段文字内容和边框之间没有设置空白距离</p><pclass="b2">该段文字内容应用填充复合属性，设置了与边框上右下左之间的空白距离为35像素、10像素、15像素和25像素。</p>HTML代码：04设置边距前端技术开发04设置边距边距（margin）也称外边距，用于网页元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。内容属性说明上边距margin-top长度|百分比，其中，百分比是相对于上级元素宽度width的百分比，随着上级元素width的变化而变化，和高度height无关。右边距margin-right下边距margin-bottom左边距

margin-left组合属性边距

margin取1~4个值。可参考border-style设置设置边距的CSS属性04设置边距如果把网页元素看成是一个个盒子，盒子与盒子之间的距离通过设置边距进行控制。img{

margin-left:10px;

margin-right:10px;}img{ margin:0px10px;}增加或减少两个元素之间的距离，调整边距增加图片之间距离04设置边距网页中有些元素自带边距样式，常见的如body元素、p段落元素、h1~h6标题元素，我们通过浏览器的开发工具模式查看body元素的默认样式。右侧样式视图中看到有CSS代码是在“useragentstylesheet”中，即当前浏览器解析body元素时的默认样式。将默认样式清零：*{padding:0;margin:0;}总结前端技术开发感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》项目7

非遗资讯页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》页面布局任务7.2

制作资讯推介区域前端技术开发任务引入一非遗资讯页面的原型图本任务制作资讯推介区域，图文排版任务描述制作资讯推介区域1.资讯推介区域的布局呈现图片在左，文字在右的排版风格。2.右侧文本由标题和多个段落元素组成，显示上下排版。3.设置网页元素的背景样式、文字样式、填充和边距等。任务实施二3124设置元素浮动，形成图文左右排版文字样式、背景样式、边距等创建图片、标题、段落，并按照结构放置在各个层中调整浮动元素所在父元素的高度图文排版其他样式设置创建网页元素消除浮动副作用任务实施二资讯推介区域HTML代码<divid="news">

<h1>资讯推介</h1><divid="newscontent">

<imgsrc="../img/news_1.png">

<divid="newsright"> <h3>古琴艺术入选…</h3>

<p>11月28日，由中国艺术研究院音乐…

</p>

<p>本次会议的成功举办…</p>

</div> </div>

</div>1.插入图片2.创建右侧的文字元素，包裹为一个层元素3.将图片和文字包裹为一个整体任务实施二资讯推介区域CSS代码#news{

margin:0auto;

width:1300px;

margin-top:60px;}#newsright{

padding:40px50px;

width:600px;

height:320px;}#newsimg,#newsright{ float:left;}#newscontent::after{ content:''; display:block; clear:both;}1.设置图片、右侧层向左浮动，并控制右侧层的大小2.消除设置了浮动后产生的副作用3.设置整体区域宽度，居中显示任务实施二资讯推介区域CSS代码#newsright{

background:url("../img/bg.jpg")no-repeat; background-size:cover;

color:#fff;

font:18px/1.5"微软雅黑";}2.设置右侧层的背景图片1.文字样式感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》元素浮动信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备浮动设置1清除浮动201浮动设置前端技术开发01浮动设置浮动属性语法：float:none|left|right值描述none默认值，不浮动，元素处在标准流中left向左浮动right向右浮动在标准流中，一般情况下一个块级元素在水平方向上会自动伸展，直至父元素的边界，而在垂直方向上则会和兄弟元素依次上下排列，但不能并排。使用浮动后，块级元素将改变自身行为。设置浮动之后，这些元素将脱离标准流，这样会影响后续元素的显示位置。说明：01浮动设置将块级元素设置向左浮动从左到右排列，元素宽度变为内容大小块级元素上下排列float：left;这些元素将脱离文档流，仍在文档流中的父元素和后续元素会认为这些“不存在”。01浮动设置将块级元素设置向右浮动从右到左排列，元素宽度变为内容大小块级元素上下排列float：right;这些元素将脱离文档流，仍在文档流中的父元素和后续元素会认为这些“不存在”。元素会向其父元素的右侧靠紧，观察设置了向左浮动和向右浮动元素的排列顺序。01浮动设置浮动设置对相邻元素的影响-块级元素例如：后续元素是块级元素段落p相邻元素段落p浮动元素div前面的div元素设置向左浮动后，后续的段落元素会发生空间上的重叠，段落元素在div元素下方显示，同时段落文字会在div元素右侧呈现挤出效应。<div>…</div><p>…</p>01浮动设置浮动设置对相邻元素的影响-行内元素例如：后续元素是行内元素span相邻元素span浮动元素div在标准流中的相邻span元素会紧跟在浮动元素div的右边，当缩放窗口时，后侧的空间放不下span元素后，行内元素span会自动换行。<div>…</div><span>…</span><span>…</span>01浮动设置浮动设置对父元素的影响例如：父元素是div元素，包含3个div子元素。子元素设置浮动后，脱离标准流，但父元素仍在标准流里，可以这样理解，父元素认为子元素“不存在”了，所以高度为0，只显示上下边框的高度。浮动子元素div外面父元素div设置浮动父元素div如何消除设置浮动后带来的“副作用”？02清除浮动前端技术开发02清除浮动清除浮动属性：clear:none|both|left|right值描述none默认值。允许浮动元素出现在两侧both在左右两侧均不允许浮动元素right在右侧不允许浮动元素left在左侧不允许浮动元素设置清除浮动clear属性的元素并不是清除本身元素的浮动效果，而是该元素在指定侧不与设置了浮动属性的元素在同一行显示。clear属性的取值02清除浮动设置清除浮动将第2个div元素设置“clear：left”，表示第2个元素的左侧不允许出现浮动元素。如果将CSS语句设置为“clear：both”，第3个div元素是否会换行显示？总结感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》图文排版信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备文本溢出设置1图文排版201文本溢出设置文本溢出设置前端技术开发01文本溢出设置-overflow属性 overflow属性用于控制内容溢出元素框时显示的方式。overflow:visible|hidden|scroll|auto overflow属性取值表值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。overflow属性需要结合white-space属性才能起作用,并且所在元素为块级元素。文本溢出设置前端技术开发01使用overflow属性设置层元素中长文本的溢出设置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden;

}</style><div>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 </div>文本超出所在层自动换行文本溢出设置前端技术开发01white-space属性

white-space属性用于指定元素内的空白怎样处理。white-space:normal|pre|nowrap|pre-wrap|pre-line值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。

white-space属性取值表文本溢出设置前端技术开发01使用overflow属性设置层元素中长文本的溢出设置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden; white-space:normal;}</style><div>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 </div>文本超出所在层被裁切文本溢出设置前端技术开发01text-overflow属性 text-overflow属性用于当文本溢出包含元素时的处理方式。text-overflow

:clip|ellipsis|

string值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。

white-space属性取值表文本溢出设置前端技术开发01使用overflow属性设置层元素中长文本的溢出设置<styletype="text/css">div{

width:200px;

border:#ccc1pxsolid;

overflow:hidden;white-space:nowrap;

text-overflow:ellipsis;

}</style><div>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 </div>文本超出所在层裁切后使用省略号表示02图文排版图文排版前端技术开发02页面布局中，布局结构为上-下结构，下部分内容又分为左-右结构网页内容上部分为标题，下部分为左边图片，右边为段落。图片和段落在标题下方形成左右排版。图文排版前端技术开发02页面布局中，布局结构为上-下结构，下部分内容又分为左-右结构<div><div>

上部

</div><div>

<img>

<p>段落</p>

</div></div>多个段落时，可在外层增加div图文排版前端技术开发02页面布局中，布局结构为左-右结构，下部分内容又分为上-下结构网页内容左边部分为图片，右边部分为上-下结构，上边为标题，下边为段落。图文排版前端技术开发02页面布局中，布局结构为左-右结构，下部分内容又分为上-下结构<div>

<img>

<div>

<div>

上部

</div> <div>

<p>段落</p>

</div>

</div></div>左侧右上右下总结前端技术开发文本溢出设置图文排版-上下结构图片排版-左右结构感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》项目7

非遗资讯页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》页面布局任务7.3制作专题报道区域前端技术开发任务引入一非遗资讯页面的原型图一行上呈现多个报道，形成多栏排版任务描述制作资讯页面专题报道区域1.专题报道区域按一行显示3个专题项，每个专题项有图片和文字组成。2.该区域的右上角“查看更多”的超链接，出现的位置特殊需要使用定位方式，与所在区域形成相对位置不变的关系。任务实施二3124将多个专题项包裹成一个层中。使用绝对定位方式设置“查看更多”超链接元素创建各个专题报道内容，包括图片、段落，层元素等设置每个专题报道的样式和排版层嵌套元素定位创建元素CSS样式与排版任务实施二<divclass="item">

<imgsrc="../img/report-1.jpg"> <p><ahref="#">【文化和自然遗产日】…</a>

</p></div>每个专题项HTML代码#report.item{ width:400px; float:left; background:#ccc;

margin-right:50px;}每个专题项的CSS代码itemitemitem1.设置层的宽度2.设置浮动，一行显示三项3.设置层的右边距及背景色任务实施二<divid="report"> <h1>专题报道</h1>

<ahref="#"id="more">>>查看更多</a></div>“查看更多”HTML代码#report{ position:relative;}#more{ position:absolute; top:20px; right:50px;}“查看更多”CSS代码1.“查看更多”使用绝对定位方式2.设置该超链接定位的基准点为其父元素“report”3.设置该元素的偏移量“查看更多”的位置特殊感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》元素定位信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备绝对定位2相对定位3静态定位1固定定位4Z-index属性设置501静态定位前端技术开发01元素定位元素定位position属性值描述static默认值。静态定位，元素在文档标准流中。relative相对定位。元素相对于其正常位置进行定位。absolute绝对定位。元素相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”“top”“right”以及“bottom”属性进行规定。fixed固定定位。元素相对于浏览器窗口进行定位；元素的位置通过“left”“top”“right”

及“bottom”属性进行规定。position属性的取值说明position:static|relative|absolute|fixed;01静态定位元素静态定位语法：

position:static;说明：当position属性取“static”值或是元素不设置position属性时，网页元素按照默认的显示方式，即按照文档标准流中的显示方式来显示。02绝对定位前端技术开发02绝对定位绝对定位的语法：position:

absolute;绝对定位规则

使用绝对定位的元素需要结合两个方向上的偏移属性进行位置的移动。

水平方向通过left或right属性来指定，垂直方向通过top或bottom属性来指定。left:50px或是right:100px都表示它在水平方向上偏移的位置。在实际应用中只要选择一个使用即可。垂直方向类似。02绝对定位绝对定位规则使用绝对定位的元素偏移的参考位置，即基准的位置是离它最近的已经定位的祖先元素。最近祖先元素已经定位设置position属性的元素，并且其值非static的任意一种方式。指“DOM”中，从自身节点开始往上直至根节点，所经过的所有节点都是它的祖先节点，其中的直接上级节点也叫父节点。从自身节点开始往上搜索使用了“已经定位”的元素，找到的第一个这样的元素它的左上角就是绝对定位的基准点。基准点

设置为绝对定位之后，元素就会脱离文档流。02绝对定位1.设置绝对定位的元素素会脱离文档流。2.按照设置水平方向和垂直方向上的偏移量进行移动。3.元素的宽度从原来父元素宽度的100%变为自适应内容大小。将第2个div元素设置绝对定位#second{

position:absolute;

left:100px;

top:50px;}绝对定位实例：该元素偏移的基准点是哪里？基准点是body元素02绝对定位CSS代码：HTML代码：<body><divid="container">

<divclass="child">第1个层元素</div>

<divclass="child"id="second">第2个层元素</div>

<divclass="child">第3个层元素</div> </div></body>div{

border:1pxsolid#000;}#container{

position:absolute; width:800px;

margin:150px