項目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