11-11學(xué)院網(wǎng)站制作——新聞列表頁設(shè)計(jì)（2）

1、q山東信息職業(yè)技術(shù)學(xué)院shandong col iege of inforut ion technologysack： & > m<po > m20180902.00mt. mmht cmbomm0mi201b-11j0 muvmzfl”飛町 mt皿活6m18-11-j0 v晶歡。巴imrah 姣mmsk2018-11-30 mam "mmvemr* wmb205130 ytibxk人201863 massmmmt cwsoraraim*2018-11-w.*mwl wew mutmmb2018*11)0. mmunrememhmmsbmmrx>1s-

2、1b30*wbmcmm mt201&-11j0 asmmmvmammlmk2018-002 grgjfimbk. juiimr eumumb201s-11j0. mttsbmzflrxn*2o18-11-3o2o1s-11-3offum2018-11-30 «ma nttsaamnt hwm20u1j0 mimi iwmtmm0 mbiia2o18-11jo1/235 茍上t515 ss 1 s-3.2的口img菁ehwbe唆室gib業(yè)未級(jí)2»，眼狀筋.stfwft工州.姬以書您洌課程名稱web前端開發(fā)（1）課次40任務(wù)、項(xiàng)目、課題名稱學(xué)院網(wǎng)站制作一新聞列表頁設(shè)計(jì)（

3、2）課時(shí)2學(xué)時(shí)教學(xué)內(nèi)容創(chuàng)建主頁，搭建主頁結(jié)構(gòu)，添加頁面各元素 創(chuàng)建外部樣式表，設(shè)置各元素的樣式教學(xué)目標(biāo)能夠創(chuàng)建主頁，搭建主頁結(jié)構(gòu)，添加頁面各元素 能夠創(chuàng)建外部樣式表，設(shè)置各元素的樣式教學(xué)重點(diǎn)創(chuàng)建主頁，搭建主頁結(jié)構(gòu)，添加頁面各元素教學(xué)難點(diǎn)創(chuàng)建外部樣式表，設(shè)置各兀素的樣式教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：（2分鐘）上節(jié)課給大家留下了制作學(xué)院官網(wǎng)首頁的頁腳部分這節(jié)課我們對(duì)新聞列表頁進(jìn)行制作。新授：一、右側(cè)部分制作（25分鐘）（帶領(lǐng)同學(xué)們一起操作）省屬公辦國家示范性軟件職業(yè)技術(shù)學(xué)院分析基本頁面結(jié)構(gòu)：<div idlistr><div class=rtop><h2>新聞中心

4、</h2><span>當(dāng)前位置：<a href=，/index 1. html>首頁</a> > <a target blank" href=#> 新聞中心</a> >列表</span></div><div class="rcon><ul><li><span class=，zdate，z>2018-09-02</span><a href=newsdetail. html title="我院被確

5、定為空軍士官人才培養(yǎng)定點(diǎn)院 校 target=_blank>我院被確定為空軍士官人才培養(yǎng)定點(diǎn)院校</a></li></ul></div><br><div>共30條記錄1/2頁&nbsp;<a href=#>首頁</a> <a href=#>上一頁</a>&nbsp;<a href=首>下一頁</a> <a href ="#> 尾頁 </a>&nbsp;第<select><

6、option value=1 selected=selected>l/option><option value=2” >2</option></select>頁</div></div>二、添加css效果(35分鐘)(帶領(lǐng)同學(xué)一起操作)設(shè)置css樣式：#listr(width:858px;border:ipx solid #ccc;background:#fff;floatrright;padding:lopx 20px;overflow:hidden;margin-bottom:20px;)rtop(width:858px

7、;height:30px;line-height:30px;.rtop h2width:75px;height: 30px;text-align: center;border-bottom:2px solid rgb(2, 81, 178);font-size:14px;color:#la4aa7;float:left;.rtop spandisplay:inline-block;width:783px;height: 31px;border-bottom:ipx solid #999;font-size:14px;float:left;).rtop span acolor:#000;/*右邊列表內(nèi)容*/. rcon (width:858px;min-height: 600px;). rcon ul li (width:843px;height:34px;line-height:34px;background:url (. /images/icon. png) no-repeat left center;padding-left:15px;border-bottom:ipx dashed #999;float:left;).rcon ul li . datefloat:right;,