版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
HTML+CSS+JavaScript
網(wǎng)頁制作機械工業(yè)出版社同名教材配套電子教案7.1案例:網(wǎng)絡(luò)花店友情鏈接局部頁面——設(shè)置鏈接樣式7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.3案例:網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單——設(shè)置縱向?qū)Ш讲藛?.4案例:網(wǎng)絡(luò)花店主導(dǎo)航菜單——設(shè)置橫向?qū)Ш讲藛?.5實訓(xùn):網(wǎng)絡(luò)花店商務(wù)安全中心頁面第7章鏈接與導(dǎo)航設(shè)計【案例展示】使用CSS設(shè)置鏈接樣式的基本知識制作網(wǎng)絡(luò)花店友情鏈接局部頁面,本例文件7-1.html在瀏覽器中的瀏覽效果如圖7-1所示。7.1案例:網(wǎng)絡(luò)花店友情鏈接局部頁面
7.1.1設(shè)置文字鏈接偽類中通過:link、:visited、:hover和:active來控制鏈接內(nèi)容訪問前、訪問后、鼠標懸停時以及用戶激活時的樣式。需要說明的是,這4種狀態(tài)的順序不能顛倒,否則可能會導(dǎo)致偽類樣式不能實現(xiàn)。【演示7-1-1】改變文字鏈接的外觀。7.1案例:網(wǎng)絡(luò)花店友情鏈接局部頁面
7.1.2設(shè)置圖文鏈接網(wǎng)頁設(shè)計中對文字鏈接的修飾不僅限于增加邊框、修改背景顏色等方式,還可以利用背景圖片將文字鏈接進一步的美化?!狙菔?-1-3】設(shè)置圖文鏈接。
7.1案例:網(wǎng)絡(luò)花店友情鏈接局部頁面
【案例展示】使用CSS設(shè)置列表樣式的基本知識制作網(wǎng)絡(luò)花店鮮花展示頁面,本例文件7-2.html在瀏覽器中的瀏覽效果如圖7-5所示。7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式
7.2.1表格布局與列表布局的對比
1.表格布局
2.列表布局使用列表布局來實現(xiàn)新聞列表,不僅結(jié)構(gòu)清晰,而且代碼數(shù)量明顯減少,如圖7-7所示。7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式
7.2.2設(shè)置列表類型通常的項目列表主要采用<ul>或<ol>標簽,然后配合<li>標簽羅列各個項目。在CSS樣式中,列表項的標志類型是通過屬性list-style-type來修改的,無論是<ul>標記還是<ol>標記,都可以使用相同的屬性值,而且效果是完全相同的?!狙菔?-2-1】設(shè)置列表類型
。
7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.2.3設(shè)置列表項圖片符號
list-style-image屬性主要使用圖像來替換列表項的標記,當list-style-image屬性的屬性值為none或者設(shè)置的圖片路徑出錯時,list-style-type屬性會替代list-style-image屬性對列表產(chǎn)生作用。【演示7-2-3】設(shè)置列表項圖片符號
。
7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.2.4設(shè)置列表項位置
list-style-position屬性用于設(shè)置在何處放置列表項標記,其屬性值只有兩個關(guān)鍵詞outside(外部)和inside(內(nèi)部)。【演示7-2-4】設(shè)置列表項位置。
7.2案例:網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式【案例展示】使用CSS設(shè)置縱向?qū)Ш讲藛蔚幕局R制作網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單,本例文件7-3.html在瀏覽器中的瀏覽效果如圖7-17所示。7.3案例:網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單
7.3.1普通的超鏈接導(dǎo)航菜單普通的鏈接導(dǎo)航菜單的制作比較簡單,主要采用將文字鏈接從“行級元素”變?yōu)椤皦K級元素”的方法來實現(xiàn)?!狙菔?-3-1】制作鏈接導(dǎo)航菜單
。
7.3案例:網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單
7.3.2縱向列表模式的導(dǎo)航菜單
由于縱向?qū)Ш讲藛蔚膬?nèi)容并沒有邏輯上的先后順序,因此可以使用無序列表制作縱向?qū)Ш讲藛巍!狙菔?-3-2】制作縱向列表模式的導(dǎo)航菜單
。
7.3案例:網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單
【案例展示】使用CSS設(shè)置橫向?qū)Ш讲藛蔚幕局R制作網(wǎng)絡(luò)花店主導(dǎo)航菜單,本例文件7-4.html在瀏覽器中的瀏覽效果如圖7-27所示。7.4案例:網(wǎng)絡(luò)花店主導(dǎo)航菜單
導(dǎo)航菜單不只有縱向排列的形式,許多時候還需要頁面的菜單能夠在水平方向顯示。通過CSS屬性的控制,可以實現(xiàn)列表模式導(dǎo)航菜單的橫豎轉(zhuǎn)換。在保持原有HTML結(jié)構(gòu)不變的情況下,將縱向?qū)Ш睫D(zhuǎn)變成橫向?qū)Ш阶钪匾沫h(huán)節(jié)就是設(shè)置<li>標簽為浮動?!狙菔?-4-1】制作橫向列表模式的導(dǎo)航菜單
。
7.4案例:網(wǎng)絡(luò)花店主導(dǎo)航菜單
【實訓(xùn)展示】制作網(wǎng)絡(luò)花店商務(wù)安全中心頁面,本例文件safe.html在瀏覽器中的瀏覽效果如圖7-33所示,頁面局部布局示意圖如圖7-34所示。7.5實訓(xùn):網(wǎng)絡(luò)花店商務(wù)安全中心頁面
制作過程如下:①頁面布局規(guī)劃。頁面布局的首要任務(wù)是弄清網(wǎng)頁的布局方式,分析版式結(jié)構(gòu)。從頁面布局示意圖可以看出,頁面中的主要內(nèi)容包括頂部的網(wǎng)站標識及導(dǎo)航菜單、左側(cè)的網(wǎng)購標準及新聞列表、右側(cè)的主體內(nèi)容及底部的版權(quán)信息。②建立目錄結(jié)構(gòu)。在實訓(xùn)文件夾下創(chuàng)建文件夾images和css,分別用來存放圖像素材和外部樣式表文件。③準備素材。將本頁面需要使用的圖像素材存放在文件夾images下。7.5實訓(xùn):網(wǎng)絡(luò)花店商務(wù)安全中心頁面
制作過程如下:④外部樣式表。在文件夾css下新建一個名為style.css的樣式表文件。⑤網(wǎng)頁結(jié)構(gòu)文件。在當前文件夾中,用記事本新建一
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2031年中國國庫集中支付系統(tǒng)行業(yè)投資前景及策略咨詢研究報告
- 二零二五版智能小區(qū)門窗定制與物業(yè)智能化運營合同3篇
- 2025年消防設(shè)備設(shè)施檢測與總承包合同
- 二零二五版農(nóng)產(chǎn)品出口合同食品安全標準規(guī)定3篇
- 2024-2030年中國超聲波清洗液行業(yè)市場全景監(jiān)測及投資前景展望報告
- 二零二五年度餐飲業(yè)節(jié)能改造工程合同6篇
- 二零二四年度專業(yè)技術(shù)人才引進與委托培養(yǎng)合同3篇
- 2025年中國電絕緣紙板行業(yè)市場深度分析及發(fā)展趨勢預(yù)測報告
- 2025年LED七粒頭燈項目投資可行性研究分析報告
- 2025年度零擔運輸合同電子簽章實施規(guī)范4篇
- 2019級水電站動力設(shè)備專業(yè)三年制人才培養(yǎng)方案
- 室內(nèi)裝飾裝修施工組織設(shè)計方案
- 洗浴中心活動方案
- 送電線路工程施工流程及組織措施
- 肝素誘導(dǎo)的血小板減少癥培訓(xùn)課件
- 韓國文化特征課件
- 抖音認證承諾函
- 清潔劑知識培訓(xùn)課件
- 新技術(shù)知識及軍事應(yīng)用教案
- 高等數(shù)學(xué)(第二版)
- 肺炎喘嗽的中醫(yī)護理常規(guī)
評論
0/150
提交評論