Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 6.1任務(wù)引入 制作非遺項(xiàng)目申報(bào)指南區(qū)域

項(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)