Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 项目6 非遗项目申报指南页面

项目6非遗项目申报指南页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS高级应用任务6.1

制作非遗项目申报指南区域前端技术开发任务引入一非遗项目申报指南页面的原型图列表列表列表制作申报指南区域，使用列表制作侧边栏任务描述非遗项目申报指南区域包括侧边栏和正文内容。1.使用列表制作申报指南的侧边栏。2.通过列表间的嵌套形成二级目录结构。3.设置列表的CSS属性美化列表样式。4.右侧是正文内容，设置正文样式。任务实施二3124在第一层第一个列表项中嵌套第二层有序列表创建右侧文本内容，设置溢出等样式创建第一层列表内容列表项图片设置列表嵌套右侧正文设置创建无序列表CSS样式设置二任务实施<ul>

<li>联合国教科文项目</li>

<li>非遗代表性项目</li>

<li>非遗代表性传承人</li>

<li>文化生态保护区</li></ul>创建第一层列表HTML代码在第一个列表项中嵌套第二层列表…

<li>联合国教科文项目

<ol>

<li>相关程序</li>

<li>所需材料</li>

<li>工作要求</li>

</ol> </li>…二任务实施ul{ list-style-image: url(../img/eg_arrow.gif);}ol{list-style-image:none;}li{ line-height:50px; font-size:26px;}lili{ font-size:20px;}设置列表的CSS代码1.设置无序列表项图片2.设置第一层列表项行高及字体大小3.设置第二层列表的字体大小二任务实施<divid="right">

…</div>创建右侧正文的HTML代码设置列表的CSS代码#right{ width:900px; height:320px; overflow:auto;

display:inline-block;}1.设置该层的显示方式，与左侧并排显示2.设置该层的大小3.设置文本溢出方式，在右侧加滚动条感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》创建列表信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备列表应用1创建无序列表2创建有序列表3列表样式属性401列表的常见应用01列表常见应用第1处.无序列表第2处.有序列表第3处.无序列表列表的特点呈多项并列关系的元素信息整齐直观，便于用户理解。案例：智慧职教网站页面列表常见应用水平导航栏

侧边栏

轮播插件的小图标02创建无序列表02列表类型HTML列表类型：列表名称描述相关标记无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<ul>创建列表，<li>列表项有序列表有序列表是一列项目，列表项目使用数字进行标记。<ol>创建列表，<li>列表项定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。<dl>创建定义列表，<dt>列表项，<dd>定义定列表项的描述注意和提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等02创建无序列表创建无序列表HTML代码：<ul>

<li>第一个列表项内容</li> <li>第二个列表项内容</li>

<li>第三个列表项内容</li>…</ul>说明：

无序列表以<ul>开始，</ul>结束。

<li></li>标记生成一个列表项

数量根据需要而定

无序列表的默认项目符号为实心圆点

可使用CSS修改样式。02创建无序列表网页源代码网页效果默认实心圆03创建有序列表说明：

无序列表以<ol>开始，</ol>结束。

<li></li>标记生成一个列表项

数量根据需要而定

有序列表的默认项目符号为数字

可使用CSS修改样式。03创建有序列表创建有序列表HTML代码：<ol>

<li>第一个列表项内容</li> <li>第二个列表项内容</li>

<li>第三个列表项内容</li>

…</ol>03创建有序列表HTML源代码网页效果默认数字03嵌套列表列表项内容可以是文本，图片，超链接，甚至可以是列表等其他网页元素。列表项内容是列表，形成嵌套列表。嵌套列表HTML源代码网页效果04列表样式属性列表属性样式设置前端技术开发04设置列表项类型的CSS属性——list-style-type属性list-style-type属性值常用值列表属性样式设置前端技术开发04设置列表项类型的CSS属性——list-style-type属性ul{list-style-type:square;}ol{list-style-type:upper-alpha;}无序列表符号为方块有序列表符号为大写字母属性样式设置前端技术开发02设置列表项图片的CSS属性list-style-image：none|URL(图片路径)说明：none是默认值。表示不设置图片。URL指定图片源。一般使用相对路径来指定本地图片。图片常用格式有GIF、PNG、JPEG（JPG）等。属性样式设置前端技术开发02设置列表项图片的实例HTML源代码网页效果总结前端技术开发感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》项目6非遗项目申报指南页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS高级应用任务6.2制作文件下载区域前端技术开发任务引入一非遗项目申报指南页面的原型图本任务制作文件下载区域任务描述文件下载区域1.使用列表创建文件下载内容区域。2.列表项内容为超链接，设置超链接样式，不显示下划线。3.列表项之间显示线框，设置列表项下边框。4.鼠标悬停在列表项上方时显示背景颜色为灰色。任务实施二3124不显示项目符号，悬停时的样式设置超链接样式使用HTML代码搭建网页元素，生成列表及超链接为每个列表项设置下边框样式列表样式超链接样式创建列表边框样式任务实施二文件下载区域HTML代码<ul> <li><ahref=“uploads/sbqd5.xlsx”target=“_blank”>››第五批…</a></li> <li><ahref="uploads/sbs5.xlsx"target="_blank">››国家级…</a></li> <li><ahref="uploads/sbcl5.xlsx"target="_blank">››国家级…</a></li> <li><ahref="uploads/sbqd4.xlsx"target="_blank">››省…</a></li> <li><ahref="uploads/sbcl4.xlsx"target="_blank">››国家级…/a></li> <li><ahref="uploads/sbs4.xlsx"target="_blank">››国家级…</a></li></ul>1.创建列表2.设置每个列表项均为超链接阶段性效果任务实施二文件下载区域CSS代码ul{ list-style-type:none;}li{ border-bottom:dotted1px#b2b2b2; line-height:50px;}li:hover{ background:#ccc;}a{ color:#000; text-decoration:none; line-height:39px;} 1.设置列表项不显示项目符号2.设置列表项的行高，显示下边框，悬停时显示背景色3.设置超链接样式，文字颜色，不显示下划线等样式感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》边框属性信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备边框属性介绍1边框样式设置2边框粗细设置3边框颜色设置401边框属性介绍前端技术开发01边框属性介绍边框颜色边框粗细边框样式border-colorborder-styleborder-width前端技术开发02边框样式设置边框样式设置前端技术开发02

边框样式属性下边框上边框右边框左边框网页元素有上(top)、右(right)、下(bottom)、左(left)四条边框。

名称属性上边框样式属性border-top-style:样式取值下边框样式属性border-bottom-style:样式取值左边框样式属性border-left-style:样式取值右边框样式属性border-right-style:样式取值边框样式设置前端技术开发02值描述none定义无边框hidden与none相同。不过应用于表时除外，对于表，hidden用于解决边框冲突dotted定义点状边框。在大多数浏览器中呈现为实线dashed定义虚线。在大多数浏览器中呈现为实线solid定义实线double定义双线。双线的宽度等于border-width的值groove定义3D凹槽边框。其效果取决于border-color的值ridge定义3D垄状边框。其效果取决于border-color的值inset定义3Dinset边框。其效果取决于border-color的值outset定义3Doutset边框。其效果取决于border-color的值inherit规定应该从父元素继承边框样式边框样式属性的取值：边框样式设置前端技术开发02如何设置标题的左边框？设置元素的上边框border-top-style:dashed;border-right-style:double;设置元素的右边框border-bottom-style:solid;设置标题的下边框边框样式设置前端技术开发02

边框样式综合设置-border-style属性border-style属性是一个复合属性，可以同时取1~4个值。情况一：设置1个值，表示四条边同时设置。p{border-style:solid;}属性样式设置前端技术开发02情况二：设置2个值，其第1个值设置上下边框，第2个值设置左右边框border-style:soliddashed;属性样式设置前端技术开发02border-style:soliddasheddouble;情况三：设置3个值，第1个值为上边框，第2个值为左右边框，第3个值为下边框1223属性样式设置前端技术开发02border-style:soliddasheddoubledotted;情况四：设置4个值，分别按照顺时针方向上、右、下、左边框设置。1234前端技术开发03边框粗细设置边框粗细设置前端技术开发02设置边框粗细属性：

名称属性上边框粗细属性border-top-width:关键字（thin、medium、thick）|长度下边框粗细属性border-bottom-width:关键字|长度左边框粗细属性border-left-width:关键字|长度右边框粗细属性border-right-width:关键字|长度综合属性border-width:关键字|长度边框粗细设置前端技术开发02边框粗细属性的实例：网页源代码网页效果04边框颜色设置04边框颜色设置

名称属性上边框颜色属性border-top-color:颜色关键字|RGB值下边框颜色属性border-bottom-color:颜色关键字|RGB值左边框颜色属性border-left-color:颜色关键字|RGB值右边框颜色属性border-right-color:颜色关键字|RGB值综合属性border-color:颜色关键字|RGB值设置边框颜色属性：04边框颜色设置网页效果网页源代码边框颜色属性的实例：04边框综合设置边框组合属性-borderborder属性可同时设置元素的四条边框的样式、粗细、颜色。网页源代码网页效果总结所有网页元素都有上(top)、右(right)、下(bottom)、左(left)四条边框。每一条边框都可以对样式(style)、宽度(width)和颜色(color)进行样式控制。bordersytlewidthcolortopborder-top-styleborder-top-widthborder-top-colorbottomborder-bottom-styleborder-bottom-widthborder-bottom-colorleftborder-left-styleborder-left-widthborder-left-colorrightborder-right-styleborder-right-widthborder-right-color3种属性4个方向1类边框属性与4个方向上的边框相组合可以细分为12个CSS边框属性。感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS3新增属性信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备边框圆角设置1元素阴影设置201边框圆角设置前端技术开发01边框圆角属性CSS3提供了创建圆角边框的属性,语法如下：border-*-*-radius：length|%length|%使用CSS3属性需要注意浏览器兼容性问题说明：

border-*-*-radius中第1个“*”用top或bottom，第2个“*”使用left或right来表示边框圆角位置。

使用1-2个值来设置水平方向(X轴)和垂直方向(Y轴)的值，长度或百分比来表示01边框圆角属性CSS3设置边框圆角的属性：属性描述border-radius每个分量可取1-4个值border-top-left-radius定义了左上角的弧度，1-2个值border-top-right-radius定义了右上角的弧度，1-2个值border-bottom-right-radius定义了右下角的弧度，1-2个值border-bottom-left-radius定义了左下角的弧度，1-2个值01边框圆角属性设置1个值，即一个正圆设置两个不相等的值，则是一个椭圆。总结：每个角可以使用X轴、Y轴上的两个值表示，相等时，可使用一个值表示。border-top-left-radius：15px;圆角设置一个值：圆border-top-left-radius：20px15px;圆角设置两个值：椭圆01边框圆角属性border-radius：length|%

/length|%设置圆角边框综合属性,语法如下：说明：

第一个分量可以使用1-4个值表示水平方向(X轴)上四个角的设置，长度或百分比来表示。

第二个分量可以使用1-4个值表示垂直方向(Y轴)上四个角的设置，长度或百分比来表示。01边框圆角属性border-radius:25px;border-radius:15px50px30px;border-radius:15px50px;border-radius:

15px50px30px5px;同时设置4个角1个值第1个值为左上和右下第2个值为右上与左下2个值第1个值为左上角第2个值为右上和左下第3个值为右下角3个值第1个值为左上角第2个值为右上角第3个值为右下角第4个值为左下角4个值01边框圆角属性border-radius:50%;用法一：如何将网页元素设置为圆形？

圆角半径为元素长度的50%，该元素显示为圆形用法二：简写方式border-radius:4px3px6px/2px

4px;border-top-left-radius:4px2px;border-top-right-radius:3px4px;border-bottom-right-radius:6px2px;border-bottom-left-radius:3px4px;X轴：3个值表示Y轴：2个值表示前端技术开发02元素阴影设置边框阴影设置前端技术开发02box-shadow：x-offsety-offsetblurspreadcolorstyle;CSS3提供了设置边框阴影的属性，语法如下：说明：

x-offset：定义水平阴影的偏移距离，可以使用负值。

y-offset：定义垂直阴影的偏移距离，可以使用负值。blur：定义阴影的模糊半径，只能为正值。spread：定义阴影的大小。color：定义阴影的颜色。style：定义是外阴影还是内阴影。outset（默认值）表示外阴影；inset表示内阴影。边框阴影设置前端技术开发02box-shadow属性为4个方向的边框定义独立的阴影效果。selector{box-shadow:-5px012pxred,/*左阴影*/

0-5px12pxyellow,/*上阴影*/

05px12pxblue,/*下阴影*/

5px012pxgreen;/*右阴影*/}其中每条边的阴影属性值之间用英文逗号隔开。-5px-5px边框阴影设置前端技术开发02box-shadow属性设置边框阴影效果实例：外阴影box-shadow:0010px#000;右下阴影box-shadow:2px2px5px#000;内阴影box-shadow:inset0px0px5px1px#000;1234透明阴影box-shadow:12px12px2px1pxrgba(0,0,255,.1);04总结CSS3设置圆角属性如下：CSS3设置边框阴影属性如下：box-shadow：x-offsety-offsetblurspreadcolorstyle;感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS3属性-设置图片边框样式信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备边框图片设置1边框图片切片2边框图片宽度3边框图片外偏移5组合属性6边框图片平铺方式401设置边框图片前端技术开发边框图片设置前端技术开发01border-image-source：url(图片路径)设置边框图片源：

仅border-image-source属性无法显示边框图片效果，需要设置边框图片宽度。div{

border-image-source:url(img/border.png);}路径一般使用相对路径前端技术开发02边框图片宽度边框图片宽度设置前端技术开发02设置边框图片宽度：border-image-width：length|%|auto;语法说明：

length设置数值，需要单位，如：20px。%设置百分比，相对于所在元素的长度或宽度进行图片缩放。

auto一般为元素长度或宽度（较小者）的一半。

可取1-4个值，按顺时针方向表示四个方向上的边框宽度。边框图片宽度设置前端技术开发02设置边框图片，同时设置边框图片宽度div{

border-image-source:url(img/border.png);

border-image-width:30px;}边框图片只出现在四个角位置，因此设置边框还需要结合图片切片属性。前端技术开发03边框图片切片边框图片切片设置前端技术开发03border-image-slice：number|%|fill;设置边框图片切片：语法说明：

可使用数字1~4个值，类似border属性设置，不要写单位，默认像素。

可使用百分比1~4个值。fill可选项，填充元素内容，类似背景图效果。边框图片切片设置前端技术开发03div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;}图片四个角固定为元素的四个角，可设置1-4个值，按顺时针方向（上、右、下、左）切分成9个方格。中间的方格为透明，即不显示。边框图片切片设置前端技术开发03设置图片切片后，不同的边框图片宽度：div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;}宽度：30px宽度：20px前端技术开发04边框图片平铺方式边框图片平铺设置前端技术开发04设置边框图片重复方式：border-image-repeat：stretch|repeat|round;属性值描述repeat取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。round取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。stretch取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。属性值说明如表所示。边框图片平铺设置前端技术开发04设置图片边框重复：div{

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;

border-image-repeat:repeat;}srecthroundrepeat前端技术开发05边框图片外偏移边框图片外偏移前端技术开发05设置边框向外偏移：border-image-outset：length|number;div{

width:200px;height:200px;background:#ccc;

border-image-source:url(img/border.png);

border-image-slice:33%33%;

border-image-width:20px;border-image-repeat:repeat;

border-image-outset:0px;}向外偏移：0向外偏移：10px前端技术开发06组合属性边框图片组合属性前端技术开发06border-image：url(border.png)30303030/20pxrepeat设置图片路径设置图片切割方式和宽度border-image：图片路径

图片切片方式/宽度

图片平铺方式;设置图片平铺方式设置组合属性：总结5个设置图片边框属性，1个组合属性。感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》项目6非遗项目申报指南页面信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》CSS高级应用任务6.3制作与美化水平导航栏前端技术开发任务引入一非遗项目申报指南页面的原型图制作水平导航栏任务描述制作与美化水平导航栏1.使用列表创建水平导航栏，在页面上居中显示。2.列表项内容为超链接，并设置超链接样式。3.文字样式的设置。4.列表样式的设置。5.鼠标悬停时列表项样式的设置。任务实施二3124列表项不显示项目符号，背景样式的设置等设置超链接样式使用列表来创建导航栏，并放置在一个层中，便于管理列表项设置浮动，让其横向排列列表样式超链接样式创建列表列表项横向排列任务实施二水平导航栏HTML代码<divid="nav"><ul> <li>

<ahref="#"target="_blank">首页</a> </li>…</ul></div>1.设置层的大小2.设置层的背景色层“nav”的CSS代码#nav{ width:1000px; height:60px; background:#CCC;

margin:0auto;}3.设置层在页面上居中显示阶段性网页效果任务实施二1.清除列表默认样式，边距和填充2.设置列表项宽度，并使其浮动起来导航栏列表的CSS代码#navul{ width:1000px; height:60px; margin:0px; padding:0px; }3.设置列表项的行高=列表高度=层高度，最外层父元素的高度#navulli{ float:left; width:200px; line-height:60px;

list-style:none;

text-align:center; background:#990000;} 4.设置列表项不显示项目符号，文字居中5.设置列表项背景色阶段性网页效果任务实施二1.设置超链接样式2.设置超链接悬停状态时，背景颜色为黑色。导航栏列表的CSS代码#navullia{

font-size:20px;

text-decoration:none;

color:#fff;}#navulli:hover{ background:#000;}#navulli{ background:url("../img/bg_6.png");}3.设置导航栏背景图片感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》背景设置信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备背景颜色设置1背景图片设置201背景颜色设置前端技术开发01背景颜色设置背景颜色属性设置：background-color:表示颜色的方式说明：transparent表示透明,默认值

英文单词，比如：red、green等

十六进制，比如：#FF0000，#00F

RGB方式，比如：rgb(255,0,0)01背景颜色设置HTML代码网页效果body{

background-color：#333;}h1{

background-color：red;}02背景图片设置前端技术开发02背景图片设置背景图片属性设置：background-image:url(图片路径)|none说明：url指定背景图片路径。图片的格式一般以GIF、JPG和PNG格式为主。

none是一个默认值，表示无背景图片。

CSS3中还可以设置多个背景图片，设置多个图片时用逗号隔开。

背景颜色和背景图片可以同时设置，当无法显示图片时会显示背景色。02背景图片设置body{

background-image:url(../img/bg_2.png);}CSS代码：HTML代码：<body>

<p>HTML（标准通用标记语言下的一个应用）标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。</p></body>网页效果:给页面设置背景图片：p{background-image:url(../img/bg_1.png);}给网页元素设置背景图片：<body></body>02背景图片设置设置背景图片时，图片大小与设置区域的关系情况一：背景图片>区域

图片会被裁剪，只显示区域大小的部分，一般是左上角部分。裁剪重复情况二：背景图片<区域

图片会出现重复。02背景图片平铺设置背景图片平铺属性：background-repeat:repeat|repeat-x|repeat-y|no-repeat属性值描述repeat默认。背景图像将在垂直方向和水平方向重复repeat-x背景图像将在水平方向重复突repeat-y背景图像将在垂直方向重复no-repeat背景图像将仅显示一次background-repeat属性取值02背景图片平铺设置body{background