項(xiàng)目6非遺項(xiàng)目申報(bào)指南頁面信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS高級(jí)應(yīng)用任務(wù)6.1

制作非遺項(xiàng)目申報(bào)指南區(qū)域前端技術(shù)開發(fā)任務(wù)引入一非遺項(xiàng)目申報(bào)指南頁面的原型圖列表列表列表制作申報(bào)指南區(qū)域，使用列表制作側(cè)邊欄任務(wù)描述非遺項(xiàng)目申報(bào)指南區(qū)域包括側(cè)邊欄和正文內(nèi)容。1.使用列表制作申報(bào)指南的側(cè)邊欄。2.通過列表間的嵌套形成二級(jí)目錄結(jié)構(gòu)。3.設(shè)置列表的CSS屬性美化列表樣式。4.右側(cè)是正文內(nèi)容，設(shè)置正文樣式。任務(wù)實(shí)施二3124在第一層第一個(gè)列表項(xiàng)中嵌套第二層有序列表創(chuàng)建右側(cè)文本內(nèi)容，設(shè)置溢出等樣式創(chuàng)建第一層列表內(nèi)容列表項(xiàng)圖片設(shè)置列表嵌套右側(cè)正文設(shè)置創(chuàng)建無序列表CSS樣式設(shè)置二任務(wù)實(shí)施<ul>

<li>聯(lián)合國教科文項(xiàng)目</li>

<li>非遺代表性項(xiàng)目</li>

<li>非遺代表性傳承人</li>

<li>文化生態(tài)保護(hù)區(qū)</li></ul>創(chuàng)建第一層列表HTML代碼在第一個(gè)列表項(xiàng)中嵌套第二層列表…

<li>聯(lián)合國教科文項(xiàng)目

<ol>

<li>相關(guān)程序</li>

<li>所需材料</li>

<li>工作要求</li>

</ol> </li>…二任務(wù)實(shí)施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;}設(shè)置列表的CSS代碼1.設(shè)置無序列表項(xiàng)圖片2.設(shè)置第一層列表項(xiàng)行高及字體大小3.設(shè)置第二層列表的字體大小二任務(wù)實(shí)施<divid="right">

…</div>創(chuàng)建右側(cè)正文的HTML代碼設(shè)置列表的CSS代碼#right{ width:900px; height:320px; overflow:auto;

display:inline-block;}1.設(shè)置該層的顯示方式，與左側(cè)并排顯示2.設(shè)置該層的大小3.設(shè)置文本溢出方式，在右側(cè)加滾動(dòng)條感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》創(chuàng)建列表信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備列表應(yīng)用1創(chuàng)建無序列表2創(chuàng)建有序列表3列表樣式屬性401列表的常見應(yīng)用01列表常見應(yīng)用第1處.無序列表第2處.有序列表第3處.無序列表列表的特點(diǎn)呈多項(xiàng)并列關(guān)系的元素信息整齊直觀，便于用戶理解。案例：智慧職教網(wǎng)站頁面列表常見應(yīng)用水平導(dǎo)航欄

側(cè)邊欄

輪播插件的小圖標(biāo)02創(chuàng)建無序列表02列表類型HTML列表類型：列表名稱描述相關(guān)標(biāo)記無序列表無序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。<ul>創(chuàng)建列表，<li>列表項(xiàng)有序列表有序列表是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。<ol>創(chuàng)建列表，<li>列表項(xiàng)定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。<dl>創(chuàng)建定義列表，<dt>列表項(xiàng)，<dd>定義定列表項(xiàng)的描述注意和提示：列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等02創(chuàng)建無序列表創(chuàng)建無序列表HTML代碼：<ul>

<li>第一個(gè)列表項(xiàng)內(nèi)容</li> <li>第二個(gè)列表項(xiàng)內(nèi)容</li>

<li>第三個(gè)列表項(xiàng)內(nèi)容</li>…</ul>說明：

無序列表以<ul>開始，</ul>結(jié)束。

<li></li>標(biāo)記生成一個(gè)列表項(xiàng)

數(shù)量根據(jù)需要而定

無序列表的默認(rèn)項(xiàng)目符號(hào)為實(shí)心圓點(diǎn)

可使用CSS修改樣式。02創(chuàng)建無序列表網(wǎng)頁源代碼網(wǎng)頁效果默認(rèn)實(shí)心圓03創(chuàng)建有序列表說明：

無序列表以<ol>開始，</ol>結(jié)束。

<li></li>標(biāo)記生成一個(gè)列表項(xiàng)

數(shù)量根據(jù)需要而定

有序列表的默認(rèn)項(xiàng)目符號(hào)為數(shù)字

可使用CSS修改樣式。03創(chuàng)建有序列表創(chuàng)建有序列表HTML代碼：<ol>

<li>第一個(gè)列表項(xiàng)內(nèi)容</li> <li>第二個(gè)列表項(xiàng)內(nèi)容</li>

<li>第三個(gè)列表項(xiàng)內(nèi)容</li>

…</ol>03創(chuàng)建有序列表HTML源代碼網(wǎng)頁效果默認(rèn)數(shù)字03嵌套列表列表項(xiàng)內(nèi)容可以是文本，圖片，超鏈接，甚至可以是列表等其他網(wǎng)頁元素。列表項(xiàng)內(nèi)容是列表，形成嵌套列表。嵌套列表HTML源代碼網(wǎng)頁效果04列表樣式屬性列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性list-style-type屬性值常用值列表屬性樣式設(shè)置前端技術(shù)開發(fā)04設(shè)置列表項(xiàng)類型的CSS屬性——list-style-type屬性u(píng)l{list-style-type:square;}ol{list-style-type:upper-alpha;}無序列表符號(hào)為方塊有序列表符號(hào)為大寫字母屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的CSS屬性list-style-image：none|URL(圖片路徑)說明：none是默認(rèn)值。表示不設(shè)置圖片。URL指定圖片源。一般使用相對(duì)路徑來指定本地圖片。圖片常用格式有GIF、PNG、JPEG（JPG）等。屬性樣式設(shè)置前端技術(shù)開發(fā)02設(shè)置列表項(xiàng)圖片的實(shí)例HTML源代碼網(wǎng)頁效果總結(jié)前端技術(shù)開發(fā)感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》項(xiàng)目6非遺項(xiàng)目申報(bào)指南頁面信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS高級(jí)應(yīng)用任務(wù)6.2制作文件下載區(qū)域前端技術(shù)開發(fā)任務(wù)引入一非遺項(xiàng)目申報(bào)指南頁面的原型圖本任務(wù)制作文件下載區(qū)域任務(wù)描述文件下載區(qū)域1.使用列表創(chuàng)建文件下載內(nèi)容區(qū)域。2.列表項(xiàng)內(nèi)容為超鏈接，設(shè)置超鏈接樣式，不顯示下劃線。3.列表項(xiàng)之間顯示線框，設(shè)置列表項(xiàng)下邊框。4.鼠標(biāo)懸停在列表項(xiàng)上方時(shí)顯示背景顏色為灰色。任務(wù)實(shí)施二3124不顯示項(xiàng)目符號(hào)，懸停時(shí)的樣式設(shè)置超鏈接樣式使用HTML代碼搭建網(wǎng)頁元素，生成列表及超鏈接為每個(gè)列表項(xiàng)設(shè)置下邊框樣式列表樣式超鏈接樣式創(chuàng)建列表邊框樣式任務(wù)實(shí)施二文件下載區(qū)域HTML代碼<ul> <li><ahref=“uploads/sbqd5.xlsx”target=“_blank”>??第五批…</a></li> <li><ahref="uploads/sbs5.xlsx"target="_blank">??國家級(jí)…</a></li> <li><ahref="uploads/sbcl5.xlsx"target="_blank">??國家級(jí)…</a></li> <li><ahref="uploads/sbqd4.xlsx"target="_blank">??省…</a></li> <li><ahref="uploads/sbcl4.xlsx"target="_blank">??國家級(jí)…/a></li> <li><ahref="uploads/sbs4.xlsx"target="_blank">??國家級(jí)…</a></li></ul>1.創(chuàng)建列表2.設(shè)置每個(gè)列表項(xiàng)均為超鏈接階段性效果任務(wù)實(shí)施二文件下載區(qū)域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.設(shè)置列表項(xiàng)不顯示項(xiàng)目符號(hào)2.設(shè)置列表項(xiàng)的行高，顯示下邊框，懸停時(shí)顯示背景色3.設(shè)置超鏈接樣式，文字顏色，不顯示下劃線等樣式感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》邊框?qū)傩孕畔踩夹g(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備邊框?qū)傩越榻B1邊框樣式設(shè)置2邊框粗細(xì)設(shè)置3邊框顏色設(shè)置401邊框?qū)傩越榻B前端技術(shù)開發(fā)01邊框?qū)傩越榻B邊框顏色邊框粗細(xì)邊框樣式border-colorborder-styleborder-width前端技術(shù)開發(fā)02邊框樣式設(shè)置邊框樣式設(shè)置前端技術(shù)開發(fā)02

邊框樣式屬性下邊框上邊框右邊框左邊框網(wǎng)頁元素有上(top)、右(right)、下(bottom)、左(left)四條邊框。

名稱屬性上邊框樣式屬性border-top-style:樣式取值下邊框樣式屬性border-bottom-style:樣式取值左邊框樣式屬性border-left-style:樣式取值右邊框樣式屬性border-right-style:樣式取值邊框樣式設(shè)置前端技術(shù)開發(fā)02值描述none定義無邊框hidden與none相同。不過應(yīng)用于表時(shí)除外，對(duì)于表，hidden用于解決邊框沖突dotted定義點(diǎn)狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線dashed定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線solid定義實(shí)線double定義雙線。雙線的寬度等于border-width的值groove定義3D凹槽邊框。其效果取決于border-color的值ridge定義3D壟狀邊框。其效果取決于border-color的值inset定義3Dinset邊框。其效果取決于border-color的值outset定義3Doutset邊框。其效果取決于border-color的值inherit規(guī)定應(yīng)該從父元素繼承邊框樣式邊框樣式屬性的取值：邊框樣式設(shè)置前端技術(shù)開發(fā)02如何設(shè)置標(biāo)題的左邊框？設(shè)置元素的上邊框border-top-style:dashed;border-right-style:double;設(shè)置元素的右邊框border-bottom-style:solid;設(shè)置標(biāo)題的下邊框邊框樣式設(shè)置前端技術(shù)開發(fā)02

邊框樣式綜合設(shè)置-border-style屬性border-style屬性是一個(gè)復(fù)合屬性，可以同時(shí)取1~4個(gè)值。情況一：設(shè)置1個(gè)值，表示四條邊同時(shí)設(shè)置。p{border-style:solid;}屬性樣式設(shè)置前端技術(shù)開發(fā)02情況二：設(shè)置2個(gè)值，其第1個(gè)值設(shè)置上下邊框，第2個(gè)值設(shè)置左右邊框border-style:soliddashed;屬性樣式設(shè)置前端技術(shù)開發(fā)02border-style:soliddasheddouble;情況三：設(shè)置3個(gè)值，第1個(gè)值為上邊框，第2個(gè)值為左右邊框，第3個(gè)值為下邊框1223屬性樣式設(shè)置前端技術(shù)開發(fā)02border-style:soliddasheddoubledotted;情況四：設(shè)置4個(gè)值，分別按照順時(shí)針方向上、右、下、左邊框設(shè)置。1234前端技術(shù)開發(fā)03邊框粗細(xì)設(shè)置邊框粗細(xì)設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框粗細(xì)屬性：

名稱屬性上邊框粗細(xì)屬性border-top-width:關(guān)鍵字（thin、medium、thick）|長(zhǎng)度下邊框粗細(xì)屬性border-bottom-width:關(guān)鍵字|長(zhǎng)度左邊框粗細(xì)屬性border-left-width:關(guān)鍵字|長(zhǎng)度右邊框粗細(xì)屬性border-right-width:關(guān)鍵字|長(zhǎng)度綜合屬性border-width:關(guān)鍵字|長(zhǎng)度邊框粗細(xì)設(shè)置前端技術(shù)開發(fā)02邊框粗細(xì)屬性的實(shí)例：網(wǎng)頁源代碼網(wǎng)頁效果04邊框顏色設(shè)置04邊框顏色設(shè)置

名稱屬性上邊框顏色屬性border-top-color:顏色關(guān)鍵字|RGB值下邊框顏色屬性border-bottom-color:顏色關(guān)鍵字|RGB值左邊框顏色屬性border-left-color:顏色關(guān)鍵字|RGB值右邊框顏色屬性border-right-color:顏色關(guān)鍵字|RGB值綜合屬性border-color:顏色關(guān)鍵字|RGB值設(shè)置邊框顏色屬性：04邊框顏色設(shè)置網(wǎng)頁效果網(wǎng)頁源代碼邊框顏色屬性的實(shí)例：04邊框綜合設(shè)置邊框組合屬性-borderborder屬性可同時(shí)設(shè)置元素的四條邊框的樣式、粗細(xì)、顏色。網(wǎng)頁源代碼網(wǎng)頁效果總結(jié)所有網(wǎng)頁元素都有上(top)、右(right)、下(bottom)、左(left)四條邊框。每一條邊框都可以對(duì)樣式(style)、寬度(width)和顏色(color)進(jìn)行樣式控制。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個(gè)方向1類邊框?qū)傩耘c4個(gè)方向上的邊框相組合可以細(xì)分為12個(gè)CSS邊框?qū)傩浴８兄x觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS3新增屬性信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備邊框圓角設(shè)置1元素陰影設(shè)置201邊框圓角設(shè)置前端技術(shù)開發(fā)01邊框圓角屬性CSS3提供了創(chuàng)建圓角邊框的屬性,語法如下：border-*-*-radius：length|%length|%使用CSS3屬性需要注意瀏覽器兼容性問題說明：

border-*-*-radius中第1個(gè)“*”用top或bottom，第2個(gè)“*”使用left或right來表示邊框圓角位置。

使用1-2個(gè)值來設(shè)置水平方向(X軸)和垂直方向(Y軸)的值，長(zhǎng)度或百分比來表示01邊框圓角屬性CSS3設(shè)置邊框圓角的屬性：屬性描述border-radius每個(gè)分量可取1-4個(gè)值border-top-left-radius定義了左上角的弧度，1-2個(gè)值border-top-right-radius定義了右上角的弧度，1-2個(gè)值border-bottom-right-radius定義了右下角的弧度，1-2個(gè)值border-bottom-left-radius定義了左下角的弧度，1-2個(gè)值01邊框圓角屬性設(shè)置1個(gè)值，即一個(gè)正圓設(shè)置兩個(gè)不相等的值，則是一個(gè)橢圓。總結(jié)：每個(gè)角可以使用X軸、Y軸上的兩個(gè)值表示，相等時(shí)，可使用一個(gè)值表示。border-top-left-radius：15px;圓角設(shè)置一個(gè)值：圓border-top-left-radius：20px15px;圓角設(shè)置兩個(gè)值：橢圓01邊框圓角屬性border-radius：length|%

/length|%設(shè)置圓角邊框綜合屬性,語法如下：說明：

第一個(gè)分量可以使用1-4個(gè)值表示水平方向(X軸)上四個(gè)角的設(shè)置，長(zhǎng)度或百分比來表示。

第二個(gè)分量可以使用1-4個(gè)值表示垂直方向(Y軸)上四個(gè)角的設(shè)置，長(zhǎng)度或百分比來表示。01邊框圓角屬性border-radius:25px;border-radius:15px50px30px;border-radius:15px50px;border-radius:

15px50px30px5px;同時(shí)設(shè)置4個(gè)角1個(gè)值第1個(gè)值為左上和右下第2個(gè)值為右上與左下2個(gè)值第1個(gè)值為左上角第2個(gè)值為右上和左下第3個(gè)值為右下角3個(gè)值第1個(gè)值為左上角第2個(gè)值為右上角第3個(gè)值為右下角第4個(gè)值為左下角4個(gè)值01邊框圓角屬性border-radius:50%;用法一：如何將網(wǎng)頁元素設(shè)置為圓形？

圓角半徑為元素長(zhǎng)度的50%，該元素顯示為圓形用法二：簡(jiǎn)寫方式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個(gè)值表示Y軸：2個(gè)值表示前端技術(shù)開發(fā)02元素陰影設(shè)置邊框陰影設(shè)置前端技術(shù)開發(fā)02box-shadow：x-offsety-offsetblurspreadcolorstyle;CSS3提供了設(shè)置邊框陰影的屬性，語法如下：說明：

x-offset：定義水平陰影的偏移距離，可以使用負(fù)值。

y-offset：定義垂直陰影的偏移距離，可以使用負(fù)值。blur：定義陰影的模糊半徑，只能為正值。spread：定義陰影的大小。color：定義陰影的顏色。style：定義是外陰影還是內(nèi)陰影。outset（默認(rèn)值）表示外陰影；inset表示內(nèi)陰影。邊框陰影設(shè)置前端技術(shù)開發(fā)02box-shadow屬性為4個(gè)方向的邊框定義獨(dú)立的陰影效果。selector{box-shadow:-5px012pxred,/*左陰影*/

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

05px12pxblue,/*下陰影*/

5px012pxgreen;/*右陰影*/}其中每條邊的陰影屬性值之間用英文逗號(hào)隔開。-5px-5px邊框陰影設(shè)置前端技術(shù)開發(fā)02box-shadow屬性設(shè)置邊框陰影效果實(shí)例：外陰影box-shadow:0010px#000;右下陰影box-shadow:2px2px5px#000;內(nèi)陰影box-shadow:inset0px0px5px1px#000;1234透明陰影box-shadow:12px12px2px1pxrgba(0,0,255,.1);04總結(jié)CSS3設(shè)置圓角屬性如下：CSS3設(shè)置邊框陰影屬性如下：box-shadow：x-offsety-offsetblurspreadcolorstyle;感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS3屬性-設(shè)置圖片邊框樣式信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備邊框圖片設(shè)置1邊框圖片切片2邊框圖片寬度3邊框圖片外偏移5組合屬性6邊框圖片平鋪方式401設(shè)置邊框圖片前端技術(shù)開發(fā)邊框圖片設(shè)置前端技術(shù)開發(fā)01border-image-source：url(圖片路徑)設(shè)置邊框圖片源：

僅border-image-source屬性無法顯示邊框圖片效果，需要設(shè)置邊框圖片寬度。div{

border-image-source:url(img/border.png);}路徑一般使用相對(duì)路徑前端技術(shù)開發(fā)02邊框圖片寬度邊框圖片寬度設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框圖片寬度：border-image-width：length|%|auto;語法說明：

length設(shè)置數(shù)值，需要單位，如：20px。%設(shè)置百分比，相對(duì)于所在元素的長(zhǎng)度或?qū)挾冗M(jìn)行圖片縮放。

auto一般為元素長(zhǎng)度或?qū)挾龋ㄝ^小者）的一半。

可取1-4個(gè)值，按順時(shí)針方向表示四個(gè)方向上的邊框?qū)挾取＿吙驁D片寬度設(shè)置前端技術(shù)開發(fā)02設(shè)置邊框圖片，同時(shí)設(shè)置邊框圖片寬度div{

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

border-image-width:30px;}邊框圖片只出現(xiàn)在四個(gè)角位置，因此設(shè)置邊框還需要結(jié)合圖片切片屬性。前端技術(shù)開發(fā)03邊框圖片切片邊框圖片切片設(shè)置前端技術(shù)開發(fā)03border-image-slice：number|%|fill;設(shè)置邊框圖片切片：語法說明：

可使用數(shù)字1~4個(gè)值，類似border屬性設(shè)置，不要寫單位，默認(rèn)像素。

可使用百分比1~4個(gè)值。fill可選項(xiàng)，填充元素內(nèi)容，類似背景圖效果。邊框圖片切片設(shè)置前端技術(shù)開發(fā)03div{

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

border-image-slice:33%33%;}圖片四個(gè)角固定為元素的四個(gè)角，可設(shè)置1-4個(gè)值，按順時(shí)針方向（上、右、下、左）切分成9個(gè)方格。中間的方格為透明，即不顯示。邊框圖片切片設(shè)置前端技術(shù)開發(fā)03設(shè)置圖片切片后，不同的邊框圖片寬度：div{

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

border-image-slice:33%33%;

border-image-width:20px;}寬度：30px寬度：20px前端技術(shù)開發(fā)04邊框圖片平鋪方式邊框圖片平鋪設(shè)置前端技術(shù)開發(fā)04設(shè)置邊框圖片重復(fù)方式：border-image-repeat：stretch|repeat|round;屬性值描述repeat取值為repeat時(shí)，表示4條邊的小方塊會(huì)不斷重復(fù)，超出元素部分將會(huì)被剪切掉。round取值為round時(shí)，表示4條邊的小方塊會(huì)鋪滿。為了鋪滿，邊框圖片會(huì)壓縮或拉伸。stretch取值為stretch時(shí)，表示4條邊的小方塊會(huì)拉伸，邊長(zhǎng)有多長(zhǎng)就拉多長(zhǎng)。屬性值說明如表所示。邊框圖片平鋪設(shè)置前端技術(shù)開發(fā)04設(shè)置圖片邊框重復(fù)：div{

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

border-image-slice:33%33%;

border-image-width:20px;

border-image-repeat:repeat;}srecthroundrepeat前端技術(shù)開發(fā)05邊框圖片外偏移邊框圖片外偏移前端技術(shù)開發(fā)05設(shè)置邊框向外偏移：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前端技術(shù)開發(fā)06組合屬性邊框圖片組合屬性前端技術(shù)開發(fā)06border-image：url(border.png)30303030/20pxrepeat設(shè)置圖片路徑設(shè)置圖片切割方式和寬度border-image：圖片路徑

圖片切片方式/寬度

圖片平鋪方式;設(shè)置圖片平鋪方式設(shè)置組合屬性：總結(jié)5個(gè)設(shè)置圖片邊框?qū)傩裕?個(gè)組合屬性。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》項(xiàng)目6非遺項(xiàng)目申報(bào)指南頁面信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》CSS高級(jí)應(yīng)用任務(wù)6.3制作與美化水平導(dǎo)航欄前端技術(shù)開發(fā)任務(wù)引入一非遺項(xiàng)目申報(bào)指南頁面的原型圖制作水平導(dǎo)航欄任務(wù)描述制作與美化水平導(dǎo)航欄1.使用列表創(chuàng)建水平導(dǎo)航欄，在頁面上居中顯示。2.列表項(xiàng)內(nèi)容為超鏈接，并設(shè)置超鏈接樣式。3.文字樣式的設(shè)置。4.列表樣式的設(shè)置。5.鼠標(biāo)懸停時(shí)列表項(xiàng)樣式的設(shè)置。任務(wù)實(shí)施二3124列表項(xiàng)不顯示項(xiàng)目符號(hào)，背景樣式的設(shè)置等設(shè)置超鏈接樣式使用列表來創(chuàng)建導(dǎo)航欄，并放置在一個(gè)層中，便于管理列表項(xiàng)設(shè)置浮動(dòng)，讓其橫向排列列表樣式超鏈接樣式創(chuàng)建列表列表項(xiàng)橫向排列任務(wù)實(shí)施二水平導(dǎo)航欄HTML代碼<divid="nav"><ul> <li>

<ahref="#"target="_blank">首頁</a> </li>…</ul></div>1.設(shè)置層的大小2.設(shè)置層的背景色層“nav”的CSS代碼#nav{ width:1000px; height:60px; background:#CCC;

margin:0auto;}3.設(shè)置層在頁面上居中顯示階段性網(wǎng)頁效果任務(wù)實(shí)施二1.清除列表默認(rèn)樣式，邊距和填充2.設(shè)置列表項(xiàng)寬度，并使其浮動(dòng)起來導(dǎo)航欄列表的CSS代碼#navul{ width:1000px; height:60px; margin:0px; padding:0px; }3.設(shè)置列表項(xiàng)的行高=列表高度=層高度，最外層父元素的高度#navulli{ float:left; width:200px; line-height:60px;

list-style:none;

text-align:center; background:#990000;} 4.設(shè)置列表項(xiàng)不顯示項(xiàng)目符號(hào)，文字居中5.設(shè)置列表項(xiàng)背景色階段性網(wǎng)頁效果任務(wù)實(shí)施二1.設(shè)置超鏈接樣式2.設(shè)置超鏈接懸停狀態(tài)時(shí)，背景顏色為黑色。導(dǎo)航欄列表的CSS代碼#navullia{

font-size:20px;

text-decoration:none;

color:#fff;}#navulli:hover{ background:#000;}#navulli{ background:url("../img/bg_6.png");}3.設(shè)置導(dǎo)航欄背景圖片感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》背景設(shè)置信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識(shí)儲(chǔ)備背景顏色設(shè)置1背景圖片設(shè)置201背景顏色設(shè)置前端技術(shù)開發(fā)01背景顏色設(shè)置背景顏色屬性設(shè)置：background-color:表示顏色的方式說明：transparent表示透明,默認(rèn)值

英文單詞，比如：red、green等

十六進(jìn)制，比如：#FF0000，#00F

RGB方式，比如：rgb(255,0,0)01背景顏色設(shè)置HTML代碼網(wǎng)頁效果body{

background-color：#333;}h1{

background-color：red;}02背景圖片設(shè)置前端技術(shù)開發(fā)02背景圖片設(shè)置背景圖片屬性設(shè)置：background-image:url(圖片路徑)|none說明：url指定背景圖片路徑。圖片的格式一般以GIF、JPG和PNG格式為主。

none是一個(gè)默認(rèn)值，表示無背景圖片。

CSS3中還可以設(shè)置多個(gè)背景圖片，設(shè)置多個(gè)圖片時(shí)用逗號(hào)隔開。

背景顏色和背景圖片可以同時(shí)設(shè)置，當(dāng)無法顯示圖片時(shí)會(huì)顯示背景色。02背景圖片設(shè)置body{

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

<p>HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML4.01后，后繼的HTML5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)Web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本應(yīng)用技術(shù)工作組-WHATWG）的組織。</p></body>網(wǎng)頁效果:給頁面設(shè)置背景圖片：p{background-image:url(../img/bg_1.png);}給網(wǎng)頁元素設(shè)置背景圖片：<body></body>02背景圖片設(shè)置設(shè)置背景圖片時(shí)，圖片大小與設(shè)置區(qū)域的關(guān)系情況一：背景圖片>區(qū)域

圖片會(huì)被裁剪，只顯示區(qū)域大小的部分，一般是左上角部分。裁剪重復(fù)情況二：背景圖片<區(qū)域

圖片會(huì)出現(xiàn)重復(fù)。02背景圖片平鋪設(shè)置背景圖片平鋪屬性：background-repeat:repeat|repeat-x|repeat-y|no-repeat屬性值描述repeat默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)repeat-x背景圖像將在水平方向重復(fù)突repeat-y背景圖像將在垂直方向重復(fù)no-repeat背景圖像將僅顯示一次background-repeat屬性取值02背景圖片平鋪設(shè)置body{background