網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性實(shí)訓(xùn)-制作社區(qū)網(wǎng)頁面_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性實(shí)訓(xùn)-制作社區(qū)網(wǎng)頁面_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性實(shí)訓(xùn)-制作社區(qū)網(wǎng)頁面_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性實(shí)訓(xùn)-制作社區(qū)網(wǎng)頁面_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3的屬性實(shí)訓(xùn)-制作社區(qū)網(wǎng)頁面_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

本章介紹CSS設(shè)置背景、文本、列表、圖像、表格、表單、鏈接等元素的屬性樣式。

CSS3的屬性

實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面目錄

CSS3的屬性5.1CSS背景屬性5.2CSS字體屬性5.3CSS文本屬性5.4CSS尺寸屬性5.5CSS列表屬性5.6CSS表格屬性5.7CSS內(nèi)容屬性5.8CSS屬性的應(yīng)用5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面習(xí)題55.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面5.9.1制作通知公告板塊1.頁面布局規(guī)劃頁面布局的首要任務(wù)是弄清網(wǎng)頁的布局方式，分析版式結(jié)構(gòu)，待整體頁面搭建有明確規(guī)劃后，再根據(jù)規(guī)劃切圖。通知公告板塊頁面的效果如圖5-34所示，頁面布局示意圖如圖5-35所示。5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面2．前期準(zhǔn)備1）欄目目錄結(jié)構(gòu)。2）頁面素材。3）外部樣式表。5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面3．編寫代碼（1）頁面結(jié)構(gòu)代碼index_bottom_left.html的結(jié)構(gòu)代碼如下。5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>首頁</title><linkrel="stylesheet"href="css/public.css"><linkrel="stylesheet"href="css/index.css"></head><body><divclass="left-bottom"><divclass="left-bottom_head"><divclass="tongzhigonggao"><p>通知公告</p></div><pclass="rightmore1"><ahref="#">更多>></a></p></div><ul><li><ahref="#">1《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li><li><ahref="#">2《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li><li><ahref="#">3《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li><li><ahref="#">4《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li><li><ahref="#">5《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li><li><ahref="#">6《生活垃圾管理?xiàng)l例》正式實(shí)施了，開展垃圾分類宣傳<spanclass="right">2023-08-18</span></a></li></ul></div></body></html>5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面（2）public.css樣式文件本樣式文件是社區(qū)網(wǎng)所有網(wǎng)頁都用到的公用樣式，代碼如下。*{margin:0;padding:0;font-family:"微軟雅黑";}ul,li{list-style:none;}a{text-decoration:none;}.right{float:right;}.left{float:left;}.clear{clear:both;}5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面（3）index.css樣式文件本樣式文件是index左下.html網(wǎng)頁用到的樣式，代碼如下。.left-bottom{width:834px;margin-top:18px;border:1pxsolidrgb(223,220,221);}.left-bottom_head{background:url(../images/left-bottom_hbg.jpg);width:834px;height:49px;}.tongzhigonggao{float:left;width:700px;}.tongzhigonggaop{text-align:center;margin-left:70px;padding-top:10px;font-size:18px;line-height:26px;color:#FFFFFF;}.more1{padding:14px31px00;}.more1a{font-size:12px;color:#FFFFFF;}.left-bottomulli{list-style:url(../images/list-style.png);padding-left:10px;}.left-bottomul{margin:20px020px35px;}.left-bottomullia{color:#454545;font-size:14px;line-height:34px;}.left-bottomulliaspan{padding-right:26px;}5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面5.9.2制作導(dǎo)航欄1.頁面布局規(guī)劃導(dǎo)航欄頁面的效果如圖5-36所示，頁面布局示意圖如圖5-37所示。5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面2．前期準(zhǔn)備與通知公告板塊相同，這里不再重復(fù)。3．編寫代碼（1）頁面結(jié)構(gòu)代碼nav.html的結(jié)構(gòu)代碼如下。5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>首頁</title><linkrel="stylesheet"href="css/public.css"/></head><body><header><divclass="daohang"><divclass="nav"><ul><li><ahref="#">網(wǎng)站首頁</a></li><li><ahref="#">生活指南</a><ul><li><ahref="#">餐飲旅游</a></li><li><ahref="#">文化娛樂</a></li><li><ahref="#">家政服務(wù)</a></li><li><ahref="#">教育培訓(xùn)</a></li></ul></li><li><ahref="#">熱點(diǎn)關(guān)注</a></li><li><ahref="#">政策解讀</a></li><li><ahref="#">公益捐贈(zèng)</a></li><li><ahref="#">在線調(diào)查</a></li><li><ahref="#">我要留言</a><ul><li><ahref="#">突發(fā)事件</a></li><li><ahref="#">百姓呼聲</a></li><li><ahref="#">建言獻(xiàn)策</a></li><li><ahref="#">代表直通車</a></li></ul></li><li><ahref="#">注冊(cè)加入</a><ul><li><ahref="#">企業(yè)加入</a></li><li><ahref="#">個(gè)人加入</a></li></ul></li><li><ahref="#">聯(lián)系我們</a></li></ul></div></div></header></body></html>5.9實(shí)訓(xùn)——制作社區(qū)網(wǎng)頁面（2）public.css樣式文件本樣式文件是社區(qū)網(wǎng)所有網(wǎng)頁都用到的公用樣式，代碼如下。*{margin:0;padding:0;font-family:"微軟雅黑";}.header{width:1200px;height:30px;margin:0auto;}ul,li{list-style:none;/*去掉列表前的黑點(diǎn)等樣式*/}a{text-decoration:none;}/*添加導(dǎo)航欄的背景圖片*/.daohang{width:100%;min-width:1200px;margin:0auto;background:url(../images/daohang1.jpg)center;height:57px;}/*設(shè)置導(dǎo)航欄*/.nav{width:1200px;margin:0auto;overflow:hidden;}.navulli{float:left;margin-top:-1px;}.navullia{width:130px;height:52px;text-align:center;line-height:40px;display:block;color:#FFFFFF;font-size:18px;margin:01.5px;padding-top:5px;}.navulli:hover{background:rgb(168,8,8);}.navulliul{position:absolute;display:none;}.navulliulli{

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論