《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)的藍(lán)圖-簡(jiǎn)單布局-使用CSS裝飾頁(yè)面_第1頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)的藍(lán)圖-簡(jiǎn)單布局-使用CSS裝飾頁(yè)面_第2頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)的藍(lán)圖-簡(jiǎn)單布局-使用CSS裝飾頁(yè)面_第3頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)的藍(lán)圖-簡(jiǎn)單布局-使用CSS裝飾頁(yè)面_第4頁(yè)
《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)的藍(lán)圖-簡(jiǎn)單布局-使用CSS裝飾頁(yè)面_第5頁(yè)
已閱讀5頁(yè)，還剩13頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

項(xiàng)目02網(wǎng)頁(yè)的藍(lán)圖--簡(jiǎn)單布局任務(wù)2-1使用CSS裝飾網(wǎng)頁(yè)任務(wù)02-1使用CSS裝飾網(wǎng)頁(yè)

知識(shí)點(diǎn)理解DIV+CSS網(wǎng)頁(yè)布局掌握三種CSS樣式表技能點(diǎn)學(xué)會(huì)使用DIV+CSS進(jìn)行簡(jiǎn)單的頁(yè)面布局學(xué)會(huì)根據(jù)需要使用三種CSS樣式表一、DIV+CSS網(wǎng)頁(yè)布局流程用div劃分頁(yè)面規(guī)劃各內(nèi)容塊的位置用css定位

Banner菜單主導(dǎo)航主體內(nèi)容footerBanner

菜單主導(dǎo)航左

右

footer.main{ width:90%; margin:0auto;}.nav_top{ background:#333; height:30px; width:100%; position:fixed; top:0; z-index:99;}……二、CSS樣式表CSS（CascadingStyleSheets，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組樣式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。樣式表實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開(kāi)發(fā)+=內(nèi)容與樣式和諧統(tǒng)一的完整網(wǎng)頁(yè)Html代碼CSS樣式1.CSS樣式表簡(jiǎn)介—樣式規(guī)則CSS樣式表的核心是樣式規(guī)則，多個(gè)樣式規(guī)則就構(gòu)成了樣式表樣式規(guī)則的組成：選擇器{樣式屬性:屬性值;}例如：

p{color:red;font-size:30px;font-family:隸書(shū);}樣式屬性屬性的值1.CSS樣式表簡(jiǎn)介—層疊為什么說(shuō)CSS是“層疊式”樣式表呢？所謂的層疊，主要包含以下幾個(gè)方面：（1）在樹(shù)形結(jié)構(gòu)中的子元素能夠繼承父元素定義的大多數(shù)樣式；（2）同一元素的樣式可以多次定義，如果不發(fā)生沖突，全部樣式可以疊加起來(lái)應(yīng)用；重復(fù)定義發(fā)生沖突時(shí)則根據(jù)優(yōu)先級(jí)依照內(nèi)層優(yōu)先、后定義優(yōu)先的原則進(jìn)行覆蓋，即內(nèi)層子元素樣式覆蓋父元素樣式、后定義的樣式覆蓋先定義的樣式。1.CSS樣式表簡(jiǎn)介—樣式表的優(yōu)點(diǎn)優(yōu)點(diǎn)：（1）表現(xiàn)和內(nèi)容分離。將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，大大縮減頁(yè)面代碼。（2）縮短改版時(shí)間。只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)。

（3）一次設(shè)計(jì)，多次使用?？梢詫⒄军c(diǎn)上同類網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，如果改動(dòng)CSS文件，那么多個(gè)網(wǎng)頁(yè)都會(huì)隨之發(fā)生變動(dòng)。2.樣式表分類根據(jù)樣式代碼的位置，樣式表有三種使用方法：內(nèi)嵌樣式表外部樣式表行內(nèi)樣式表2.1內(nèi)嵌樣式表使用情境:如果開(kāi)發(fā)人員只定義當(dāng)前網(wǎng)頁(yè)的樣式，可使用內(nèi)嵌樣式表。內(nèi)嵌的樣式表“嵌”在網(wǎng)頁(yè)的<head></head>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在當(dāng)前網(wǎng)頁(yè)上使用。使用格式：<head>

<styletype="text/css">

樣式規(guī)則</style>

…頭部的其它標(biāo)記<head>2.1內(nèi)嵌樣式表使用方法：<head> <title>內(nèi)嵌樣式表</title> <styletype="text/css">

h3{font-size:20pt;font-family:"微軟雅黑";}

p{width:200px;height:100px;background:blue;} </style></head>聲明文檔樣式表結(jié)束文檔樣式表開(kāi)始，類型為CSS樣式樣式規(guī)則<body> <h3>這是藍(lán)色盒子</h3> <p>段落1</p> <br> <p>段落2</p>

</body>在頁(yè)面頭部<head>與</head>標(biāo)記之間使用<style>…</style>標(biāo)記定義，只對(duì)該頁(yè)面有效。

如果希望一個(gè)網(wǎng)站中多個(gè)頁(yè)面的樣式保持一致，如何解決？外部樣式表文件可以解決2.2外部樣式表使用情境：當(dāng)要在站點(diǎn)多個(gè)網(wǎng)頁(yè)上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在外部樣式表中定義樣式，并鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。如果需要更新樣式，只需在外部樣式表中修改一次，而該更新會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁(yè)上。使用格式：<head><title>標(biāo)記名選擇符</title>

……

<linkhref="相對(duì)或絕對(duì)路徑/樣式文件.css"

rel="stylesheet"/>……<head>css文件選擇符{樣式規(guī)則}2.2外部樣式表使用方法：步驟1，創(chuàng)建樣式表文件common.cssp{font-family:華文楷體;font-size:18px;color:#FF00CC;}h2{font-family:黑體;font-size:28px;background-color:#CCFF33;text-align:center;}2.2外部樣式表使用方法：步驟2，創(chuàng)建page1.html<html><head><title>李白詩(shī)詞</title></head><body><h2>將進(jìn)酒</h2><h3><ahref="#">作者：李白</a></h3><p>君不見(jiàn)黃河之水天上來(lái)，奔流到海不復(fù)回。<br>君不見(jiàn)高堂明鏡悲白發(fā)，朝如青絲暮成雪。<br>人生得意須盡歡，莫使金樽空對(duì)月。<br>天生我材必有用，千金散盡還復(fù)來(lái)。</p></body></html>步驟3，創(chuàng)建page2.html<html><head><title>杜甫詩(shī)詞</title></head><body><h2>登高</h2><h3><ahref="#">作者：杜甫</a></h3><p>風(fēng)急天高猿嘯哀，渚清沙白鳥(niǎo)飛回。<br>無(wú)邊落木蕭蕭下，不盡長(zhǎng)江滾滾來(lái)。<br>萬(wàn)里悲秋常作客，百年多病獨(dú)登臺(tái)。<br>艱難苦恨繁霜鬢，潦倒新停濁酒杯。</p></body></html>2.2外部樣式表使用方法：步驟4，把樣式文件和網(wǎng)頁(yè)綁定使用LINK（鏈接）標(biāo)簽:<head><linkhref="common.css"rel="stylesheet"></head>步驟5，瀏覽查看page1和page2樣式文件：common.cssPage1.htmlPage2.html2.3內(nèi)聯(lián)樣式表（行內(nèi)樣式）使用情境：如果某個(gè)頁(yè)面某個(gè)元素有特殊樣式，可以直接把CSS代碼添加到HTML的標(biāo)記中，即作為HTML標(biāo)記的屬性標(biāo)記存在。通過(guò)這種方法，可以很簡(jiǎn)單地對(duì)某個(gè)元素單獨(dú)定義樣式。使用格式：<標(biāo)記名style="樣式規(guī)則1;樣式規(guī)則2;…;">2.3內(nèi)聯(lián)樣式表使用方法：<head><title>內(nèi)聯(lián)CSS樣式應(yīng)用</title></head><bodystyle="background-color:#CCCCCC"><h2>靜夜思</h2><h3>作者：李白</h3><pstyle="color:#FF0000;font-size:18px;font-family:隸書(shū);border-bottom-style:dashed;border-bottom-width:1px;">

床前明月光，<br/>

疑是地上霜。<b

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論