網頁編程學習過程_第1頁
網頁編程學習過程_第2頁
網頁編程學習過程_第3頁
網頁編程學習過程_第4頁
網頁編程學習過程_第5頁
已閱讀5頁，還剩38頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、一、 HTML標簽（tag）指示元素的起始與結束，以小于號“<”開頭，以大于號“>”結尾。有兩種標簽首標簽（start tag）（如<html>）和尾標簽（end tag）（如</html>） 粗體顯示 <b>這句話應顯示為粗體。</b> 多級標題 h1、h2、h3、h4、h5及h6分別表示六級標題 <h1>這是標題</h1> <h2>這是子標題</h2> 首標簽和尾標簽不是必須的，如下面的換行換行標簽：<br />瀏覽器讀HTML就跟你讀書一樣，也是從上往下，從左到右進行的

2、。 <html> <head> 提供關于當前文檔的信息 </head> <body>提供文檔的內容 </body> </html>指定HTML文檔的網頁標題<title>我的第一個網站</title>網頁標題（title）不是顯示在網頁里，而是顯示在瀏覽器窗口的標題欄上的。網頁里顯示的所有內容都必須放在body元素里。文本段落<p>哇！這是我的第一個網站。</p>HTML通用模板</html>。 <head><title>我的網站</

3、title> </head> <body><h1>標題</h1><p>一些文字。</p><h2>子標題</h2><p>一些文字。</p> </body> </html>設置斜體<i>這句話應顯示為斜體</i> i表示斜體（italic）顯示小字體<small>這句話應顯示為小字體</small>畫水平線<hr />列表：ul代表“無序列表（unordered list）” ol代表“有序

4、列表（ordered list）” li代表“列表項（list item）<ul><li>一個列表項</li><li>另一個列表項</li></ul>該例在瀏覽器中將顯示如下：· 一個列表項 · 另一個列表項<ol><li>第一個列表項</li><li>第二個列表項</li></ol>該例在瀏覽器中將顯示如下：1. 第一個列表項 2. 第二個列表項屬性屬性應寫在元素的首標簽上。具體寫法是：屬性名稱（attribute name）后緊

5、跟一個等號（“=”），后面寫上用雙引號括起來的屬性值（attribute value）。對于style屬性的值，可以用分號（“;”）來分隔多個樣式指令。每個顏色都有其對應的十六進制代碼十六進制代碼由“#”打頭，后面跟六位數字或字母。FFFFFFFFCCFFFF99FFFF66FFFF33FFFF00FFFFFFCCFFCCCCFF99CCFF66CCFF33CCFF00CCFFFF99FFCC99FF9999FF6699FF3399FF0099FFFF66FFCC66FF9966FF6666FF3366FF0066FFFF33FFCC33FF9933FF6633FF3333FF0033FFFF

6、00FFCC00FF9900FF6600FF3300FF0000CCFFFFCCCCFFCC99FFCC66FFCC33FFCC00FFCCFFCCCCCCCCCC99CCCC66CCCC33CCCC00CCCCFF99CCCC99CC9999CC6699CC3399CC0099CCFF66CCCC66CC9966CC6666CC3366CC0066CCFF33CCCC33CC9933CC6633CC3333CC0033CCFF00CCCC00CC9900CC6600CC3300CC000099FFFF99CCFF9999FF9966FF9933FF9900FF99FFCC99CCCC9999

7、CC9966CC9933CC9900CC99FF9999CC9999999999669999339999009999FF6699CC6699996699666699336699006699FF3399CC3399993399663399333399003399FF0099CC0099990099660099330099000066FFFF66CCFF6699FF6666FF6633FF6600FF66FFCC66CCCC6699CC6666CC6633CC6600CC66FF9966CC9966999966669966339966009966FF6666CC666699666666666633

8、6666006666FF3366CC3366993366663366333366003366FF0066CC0066990066660066330066000033FFFF33CCFF3399FF3366FF3333FF3300FF33FFCC33CCCC3399CC3366CC3333CC3300CC33FF9933CC9933999933669933339933009933FF6633CC6633996633666633336633006633FF3333CC3333993333663333333333003333FF0033CC0033990033660033330033000000FF

9、FF00CCFF0099FF0066FF0033FF0000FF00FFCC00CCCC0099CC0066CC0033CC0000CC00FF9900CC9900999900669900339900009900ff6600cc6600996600666600336600006600FF3300CC3300993300663300333300003300FF0000CC00009900006600003300000000制作鏈接：<a href=" URL（統一資源定位符）URL里必須包含http:/如何在同一網站的網頁之間添加相互鏈接？在同一網站的不同網頁間做鏈接，那就不必拼

10、寫出網頁的完整URL。假如你有兩個網頁（比如說page1.htm和 page2.htm），而且它們被存放在同一個文件夾中，那么你在做鏈接的時候，只要寫出文件名就行了。這樣，page1.htm到page2.htm的鏈接將如下所示：<a href="page2.htm">點擊這里轉到第2頁</a>如果page2.htm被放在下一級文件夾中（比如“subfolder”），那么鏈接將是這樣：<a href="subfolder/page2.htm">點擊這里轉到第2頁</a>反之從page2.htm（在下級文件夾中

11、）到page1.htm的鏈接將是這樣：<a href="./page1.htm">轉到第1頁</a>在一個網頁內部做鏈接：比如在網頁開始處提供一個目錄，在其中列出指向下面各章的鏈接。用id屬性標出要被指向的元素。例如：<h1 id="heading1">標題1</h1>然后通過在鏈接中利用“#”來指向那個元素。 “#”后面必須緊跟著一個id屬性的值，表明鏈接指向該id屬性被定義的地方。例如：<a href="#heading1">轉到標題1</a>例子：<h

12、tml> <head></head><body><p><a href="#heading1">轉到標題1</a></p><p><a href="#heading2">轉到標題2</a></p><h1 id="heading1">標題1</h1><p>一些文字。</p><h1 id="heading2">標題2</h

13、1><p>一些文字。</p> </body></html>為e-mail地址做鏈接：<a href="mailto:ecnuzhengchen">給辰哥發郵件</a>鏈接上使用title屬性：title屬性用于為該鏈接輸入一個簡短描述。當你把鼠標光標停留在該鏈接上（別點擊它）時，會有相應的提示文字。<a href=" title="上網站學習HTML"></a>在網頁中加入圖片：img元素沒有尾標簽，它與<br />一樣，不與特定的

14、文本相關。alt屬性用于給出圖像的替用描述，假如由于某些原因該圖像未能顯示出來，瀏覽器就通過顯示這個描述來替代圖像。加入同文件夾的圖片：<img src="david.jpg" alt="David" />加入不同文件夾的圖片：<img src="本地路徑路徑logo.png">加入互聯網中的圖片：<img src="圖片用作鏈接：<a href=""> <img src="logo.png"></a>width和hei

15、ght屬性：width和height屬性分別用于設置圖像的寬度和高度，以像素為單位。表格：創建表格的3個基本元素1.首標簽<table>和尾標簽</table>分別表示一個表格的開始與結束。2.tr是“table row（表格行）”的縮寫，用于表示一行的開始和結束。3.td是“table data（表格數據）”的縮寫，用于表示行中各個單元格（cell）的開始和結束。例子<table><tr><td>單元格1</td><td>單元格2</td></tr><tr><td&g

16、t;單元格3</td><td>單元格4</td></tr></table>表格屬性：border用于指定表格四周邊框的厚度<table border="1"><tr><td>單元格1</td><td>單元格2</td></tr><tr><td>單元格3</td><td>單元格4</td></tr></table>width <table bor

17、der="1" width="30%">顯示一個表格，其寬度是屏幕寬度的30align: 指定整個表格、某行或某個單元格里內容的水平對齊方式，比如左對齊、居中或右對齊。valign: 指定某個單元格里內容的垂直對齊方式，比如靠上、置中或靠下。例子：<td align="right" valign="top">單元格1</td>表格的高級屬性：colspan是“column span（跨列）”的縮寫，colspan屬性用在<td>標簽中，用來指定單元格橫向跨越的列數：<

18、table border="1"><tr><td colspan="3">單元格1</td></tr><tr><td>單元格2</td><td>單元格3</td><td>單元格4</td></tr></table>執行完之后將在瀏覽器中如下顯示：單元格1單元格2單元格3單元格4如果我們將colspan設為“2”，則該單元格將只跨越兩列，于是有必要在第一行插入另外一個單元格，以確保兩行占據相同的列

19、數。<table border="1"><tr><td colspan="2">單元格1</td><td>單元格2</td></tr><tr><td>單元格3</td><td>單元格4</td><td>單元格5</td></tr></table>顯示入下：rowspan指定單元格縱向跨越的行數<table border="1"><

20、;tr><td rowspan="3">單元格1</td><td>單元格2</td></tr><tr><td>單元格3</td></tr><tr><td>單元格4</td></tr></table>顯示效果如下：在進行HTML編碼之前，你最好先在紙上把表格設計好。頁面布局（CSS）級聯樣式表（Cascading Style Sheets，簡稱CSS）為網站設計布局頁面。例子：<p style=&q

21、uot;font-size:20px;">這里的文字大小為20</p><p style="font-family:黑體;">這里的文字字體為黑體</p><p style="font-size:20px; font-family:黑體;">這里是文字大小為20、采用黑體的文字</p> /在這里同時進行了字體類型與字體大小的設置，請注意用分號將它們隔開。CSS可以對頁面布局進行集中管理。也就是說，你不必在每個標簽里都使用style屬性；相反，你可以只聲明一次，瀏覽器便會按相應的頁面布

22、局效果來顯示文本：例子：<html><head><title>我的第一個CSS頁面</title><style type="text/css"> h1 font-size:30px; font-family:宋體; h2 font-size:15px; font-family:黑體; p font-size:8px; font-family:"隸書"</style> /集中管理</head><body><h1>我的第一個CSS頁面</h1&g

23、t;<h2>歡迎參觀我的第一個CSS頁面</h2><p>你可以在這里了解CSS的原理</p></body></html>CSS的其他功能：設置文字顏色<p style="color:green;">綠色的文字</p>設置背景圖片：<body style="background-image:url('http:/ 或者路徑或者同文件夾下的文件名');"> </body>兩種方法使用css1. 使用style屬性2. 把cs

24、s放在文檔的頭部head在網頁中某一個位置加上框框<p style="padding:25px;border:1px solid red;">我愛CSS</p>顯示效果關于css中的paddingpadding 簡寫屬性在一個聲明中設置所有內邊距屬性。例子：<html><head><style type="text/css">td.test1 padding: 1.5cmtd.test2 padding: 0.5cm 2.5cm</style></head><bod

25、y><table border="1"><tr><td class="test1">這個表格單元的每個邊擁有相等的內邊距。</td></tr></table><br /><table border="1"><tr><td class="test2">這個表格單元的上和下內邊距是 0.5cm，左和右內邊距是 2.5cm。</td></tr></table>&

26、lt;/body></html>效果:float屬性：定義元素的漂浮方式：靠左還是靠右。例子：<img src="sch.bmp" alt="Bill Gates" style= "float:left;" /><br/><br/><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet doloremag

27、na aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>控制圖片出現的位置<img src="sch.bmp" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />在該例中

28、，圖像被放置在瀏覽器中位于距底端50象素、距右邊界10象素的位置。這里只是一個例子，實際上你可以把它放在你所期望的任何位置上。二、 CSS加在head部分的<style type="text/css">和</style>分別被瀏覽器識別為CSS的開始和結束。<head><style type=”text/css”>Code here</style></head>CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：選擇器 屬性: 屬性值; 例子:h1 font-size: 12px;h

29、2,h4 font-size: 12px; display:inline; 在CSS中，注釋以“/*”開始，以“*/”結束Css中的class和id類名和id名不可以用數字開頭。class的定義方法： 指定標簽. 類名 樣式id的定義方法：指定標簽#id名 樣式<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="

30、/1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!- h1.dabiaoti font-weight: bolder; text-align: center; h1#daohang font-size: 12px;

31、 font-weight: bolder; text-align: left; h1.xinwen font-size: 16px; font-weight:bold; text-align: center; color:green; -> </style> </head> <body> <h1 class="dabiaoti">我是頁面最上端的標題1</h1> <h1 id="daohang">我是頁面左側的標題1，用來導航</h1> <h1 class=&

32、quot;xinwen">我是頁面新聞的標題1</h1> <p class="xinwen">我是新聞的內容。</p> </body><p class="xinwen">我是新聞的內容。</p>這里是錯誤的因為類"xinwen"是給標簽h1定義的，而沒有給標簽p定義。然后我們在想要應用類的標簽上加上class(類)或者id屬性：class的應用方法：<指定標簽 class="類名">id的應用方法：<指定標簽

33、id="id名">也可以不指定標簽的類或id就拿上面的例子來說，你可能希望xinwen類可以應用于段落標簽<p>。那么你只需要將定義部分的h1.xinwen改為.xinwen，即去掉h1。這種定義中不含標簽名的類當然也就不再局限于某一個標簽了。class(類)與id的區別同一id在一個頁面內只能應用一次，而class則是用于描述多次出現的元素。這從它們的名稱上很容易理解。id就類似元素的身份證號碼，它必須是唯一的，而class則是一類具有共同屬性的元素的合稱，是一類。為網頁添加樣式表的幾種方式：A：內部樣式表<head> <style t

34、ype="text/css"> /*符合CSS語法結構的CSS語句，例如*/ body background-color: blue; </style> </head> B：內嵌樣式表<p style="text-indent:24px;">段落內容</p>C：外部樣式表使用外部樣式表時，CSS文件與網頁文件(html)是分離開來的。要讓某一個網頁調用一個外部CSS文件，你需要在網頁的<head>部分插入以下內容：<head> <link rel="styles

35、heet" type="text/css" href="文件位置/你的CSS文件名.css" />/*文件位置就是所處在的文件夾相對與當前網頁的相對路徑*/ </head> 為同一個標簽多次設置樣式表為同一個標簽多次設置樣式表，這些樣式表會最終層疊成一個樣式表來作用于標簽。例如，你在外部樣式表中為p定義了如下樣式：p text-align: left; 而在內部樣式表中又定義了如下樣式：p text-indent: 24px;那么最終網頁內p標簽的樣式將為： p text-align: left;text-indent: 24

36、px;幾種方法插入的樣式表的優先級1. 行內樣式表(內嵌樣式表) 2. 內部樣式表 3. 外部樣式表 4. 補充規則：優先級相同的情況下，后定義的屬性會覆蓋先前定義的。 例子：外部樣式表的內容：p text-align: center; 內部樣式表的內容：p text-align: left; 最終頁面中的段落將是左對齊CSS文字屬性(font屬性)定義字體 font-family<head><style type="text/css"> <!- p.song font-family: "宋體" /*注意中文字體要加引號，英

37、文就不用了*/ p.hei font-family: "黑體" p.eng font-family: Arial; -> </style></head><body> <p class="song">我的字體是宋體</p> <p class="hei">我的字體是黑體</p> <p class="eng">My font family is Arial.</p> </body>p font-f

38、amily: "黑體", "宋體", "新宋體" 這樣，當客戶的計算機中不存在黑體的時候，它就會以后面的備用字體顯示文字。定義文字大小：font-sizep.f16 font-size: 16px; 定義文字樣式font-style: p.ita font-style: italic; <p>我是正常樣式</p> <p class="ita">我是斜體</p> 定義文字粗細：font-weightp.b font-weight: bold; <p>我是正常

39、的字體。</p> <p class="b">我是粗體</p>文本屬性：文本屬性主要用于控制頁面內文本的屬性，例如顏色、間距和首行縮進等等首行縮進：text-intendp text-indent: 24px; 加入上面CSS語句的頁面，所有的段落首行都將自動縮進24個像素。文本顏色：color p.lv color: green; p.hong color: red; <p class="lv">我是綠色的</p><p class="hong">我是紅色的<

40、/p> 文本對齊屬性：text-alignp.zhong text-align: center; p.zuo text-align: left; p.you text-align: right;<p class="zhong">我的對齊方式是居中</p><p class="zuo"><span class="lv">我的對齊方式是左對齊</span></p><p class="you"><span class="

41、;lv">我的對齊方式是右對齊</span></p> 文本修飾：text-decorationp.shang text-decoration: overline; p.xia text-decoration: underline; p.zhong text-decoration: line-through;a.none text-decoration:none; <p class="shang">上劃線</p><p class="xia">下劃線</p><p c

42、lass="zhong">中劃線</p><p ><a href=" class="none">我是一個鏈接，但是沒有下劃線。</a></p>一些常用的英文文本修飾：背景屬性：background背景顏色屬性：background-color<style type="text/css"> body background-color:red ;</style> 背景圖片：background-image<style type=&quo

43、t;text/css"> body background-image:url(images/logo.gif);</style> 背景圖片注意事項：默認情況下背景圖片將會不斷重復，直到添滿整個頁面，下面我們來看看如何控制圖片的重復。A：不重復<style type="text/css"> body background-image:url( background-repeat:no-repeat; </style> B：只在水平方向重復<style type="text/css"> body

44、 background-image:url( background-repeat:repeat-x;</style> C：只在垂直方向重復<style type="text/css"> body background-image:url( background-repeat:repeat-y;</style>背景圖片位置：background-position<style type="text/css"> body background-image:url( background-position:cent

45、er; background-repeat:no-repeat;</style> 背景圖片出現的位置可以是：top、left、right、bottom、center。將背景圖片固定在頁面的某個位置：background-attachment通過該屬性可以設置背景圖片是否隨著滾動條滾動而改變位置。<style type="text/css"> body background-image:url( background-attachment:fixed; background-repeat:no-repeat </style>backgrou

46、nd-attachment屬性值有：fixed（固定）、Scroll（滾動）。列表：Word中有一個“項目符號和編號”的功能。在XHTML中我們無法對列表項目符號做出更改，而CSS賦予了我們這樣的能力。因為在CSS中，已經提供了進行列表的專用列表屬性。列表屬性包括了list-style（列表樣式）、list-item（列表項）等多種屬性，我們先來看一下列表屬性的詳細列表：<html><head> <title> fenji css </title> <style type=“text/css”>/*定義CSS*/ <!-pdis

47、play：block；white-space：normal /*定義顯示屬性為“block”，意思是在新的區域里顯示； white-space的屬性normal使多重空白合成為一個*/ emdisplay：inline/*定義EM的顯示屬性為“inline” 目的是為了其控制下的文本顯示中不折行*/lidisplay：list-item；list-style：square/*定義li的顯示屬性為“list-item”，顯示在列表項中加入一個符號標記， 而list-style屬性值定義為square使列表項前的標記為方塊*/imgdisplay：block /*定義圖片屬性為block使圖片在新

48、的位置打開*/ -> </style> </head> <body> <p><em>sample</em>text<em>sample</em>text<em>sample</em> text<em>sample</em> text<em>sample</em></p>/*定義一段文本*/<ul>/*定義列表項*/ <li>list-item 1</li> <li>

49、;list-item 2</li> <li>list-item 3</li> </ul> <p><img src=“ss01068.jpg” width=“280”height=“185” alt=“invisible”></p>/*定義一幅圖片*/ </body> </html> Div和spandiv和span是XHTML中比較特殊的標簽。結合CSS他們可以實現許多方便的功能。相對與其他XHTML標簽，div和span對于它們包含的元素是沒有意義的。例如當你看到<h1>&

50、lt;/h1>標簽，你知道里面是標題，當你看到<p></p>標簽的時候你知道里面是一個新的自然段。可是div和span標簽并沒有這樣的意義。div只是一個分塊的標簽，他可以將網頁分成幾個區塊。div里面可能包含一個標題，一個段落，也可能包含圖片在內的很多元素，甚至div也可以再包含div。而span是行級元素(行內標簽)，通常情況下它都用來定義一小段文字的樣式。它們的另一個區別就是div會造成換行，而span則不會。<style type="text/css"> <!-.box background-color: #EEFAF

51、F; width: 30%; float: left; .boxhead font-size: 14px; font-weight: bold; background-color: #AEC6FD; text-align: center; width: 100%; color: #FFFFFF; -> </style> </head> <body><div class="box"><div class="boxhead">我在div內，類為boxhead</div><p&

52、gt;我在div內</p><p>我在div內</p><p>我在div內</p><p>我在div內</p></div></body> </html> 在上面的例子中，我們首先在頁面內放了一個class為box的div，而在它的內部又放了一個class為boxhead的div。為了便與觀察，我們為div添加了背景顏色。下面我們來看看對這兩個div定義的前面教程中沒有的屬性：對box的屬性：width: 30%;表示這個box div占頁面寬度的30%，而浮動屬性float: le

53、ft; 則表示box div浮動在頁面的左側。 對boxhead的屬性：width: 100%;由于boxhead div在box div之內，那么這里的100%是指box的寬度。 行級標簽<span>(行內標簽)本實例在上面實例的基礎之上，只修改一段文本的顏色。修改如下代碼：將第一個“<p>我在div內</p>”修改為<p><span style="color:red">我在div內，也在span內，</span>屬性為box。</p> 盒子首先要清楚，CSS中沒有box這個屬性。CSS的

54、盒子(box)是由以下幾個部分組成的：內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。如果把CSS的盒子看做現實生活中的盒子，那么內容就是盒子里裝的貨物；而填充就是怕貨物損壞而添加的泡沫或者其它抗震的東西；邊框就是盒子本身了；至于邊界則說明盒子擺放的時候的不能與其他物體緊挨在一起，而必須有一段空隙。當然了，CSS中的盒子是平面的。CSS邊框(border).box background-color: #EEFAFF; width: 30%; float: left; border: 1px so

55、lid #000000; 在border: 1px solid #000000;一句中，我們一起為border指定了三個屬性值，其實它等效與下面的CSS語句：border-style:solid;border-color:#000000;border-width:1px; 下面讓我們來看看如何控制某一側的邊框屬性。下面的例子添加一個1像素的虛線下側邊框。修改的代碼如下：border-bottom:1px dashed #000000;CSS填充屬性(padding)填充屬性定義的是內容(content)與邊框(border)的距離下面我們來為boxhead div添加一個5像素的填充：.box

56、head font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; padding:5px; 與邊框屬性(border)一樣，填充屬性(padding)也可以只設定某一邊。例如：padding-left、padding-bottom。填充距的屬性列表CSS邊界屬性(marging)邊距屬性的詳細列表： 定位(position)相對定位(relative)相對定位是

57、指相對它本來應該處的位置所做的移動。 <style type="text/css">.dingwei position:relative; left:50px; </style> <p>我是一段正常的文本</p> <p class="dingwei">我本來應該在它的正下方，可是relative相對定位讓我在正常位置的基礎上向右移動了50個像素。</p> 絕對定位(absolute)絕對定位非常好理解，你指定元素出現的坐標(x,y)，然后它就準確無誤地顯示在那里。 .dingwei1

58、 position:absolute; top:35px; left:35px; color:#FF0000 .dingwei2 position:absolute; left:50px; top:50px; color:#0000FF; <p class="dingwei1">CSS</p> <p class="dingwei2">絕對定位</p>定位中使用的left屬性表示元素距離左側的距離，而top屬性表示距離上方的位置。如果用坐標系來理解的話left就是橫坐標x，而top就是縱坐標y。絕對定位會按照

59、我們給定的坐標x，y來準確地定位你一個元素。但是問題在于，坐標系的原點在哪里呢？答案就是父元素。上例中，class為"dingwei2"的元素設置為絕對定位，它的父元素為body，所以它其實是相對body位置來定位的的。如果有如下代碼：<p> 段落正文 <strong>強調文字</strong><p>若給strong元素設置絕對定位，那么坐標原點將會是父元素p的位置。定位屬性詳細列表：鏈接（a）對于很多追求頁面美觀的站長來說，默認的鏈接樣式實在是太難以容忍了。<style type="text/css"

60、;> a:link color: #FF0000; text-decoration: none; a:visited color: #333333; a:hover text-decoration: none; color: #FFFFFF; background-color:#0000FF; a:active text-decoration: none; color: #FFFFFF; </style> 其中a:link、a:visited、a:hover和a:active分別對應未訪問的鏈接、已經訪問過的鏈接、鼠標懸停的鏈接和激活的鼠標鏈接(按下鼠標左鍵的時候)。這段代碼

61、看起來很簡單，但是一定要注意幾個樣式的順序不能顛倒，否則可能造成部分樣式無法正常顯示。下面再來看看如何只更改部分頁面的鏈接樣式。改變局部的鏈接樣式：就以菜鳥吧本身為例子吧。您也許已經注意到了，在菜鳥吧頁面的導航部分(頁面上方)的鏈接和教程部分的鏈接具有不同的樣式。事實上是我們只為導航部分的鏈接定義了樣式，而教程主體部分的鏈接則是正常的鏈接樣式，不受定義影響。如何實現這種對局部鏈接的樣式定義呢？其實這是很簡單的。我們只要在鏈接樣式的定義前面加上相應class或者id即可。例如本頁面導航部分的id是navbar，那么定義的語句就應該是：#nvbar a:link color: #003366; t

62、ext-decoration: none; #nvbar a:visited text-decoration: none; color: #000000; #nvbar a:hover color: #FFFFFF; background-color:#FF0000; #nvbar a:active text-decoration: none; 這樣鏈接樣式的定義就只對id為nvbar的內容起作用了。相應的，如果你希望這些鏈接的樣式只對某個類起作用只要上面的#nvbar替換成該類即可。例如只對class為rightbox的內容起作用，那么就可以定義為：.rightbox a:link color: #003366; text-decoration: none; 假設我們現在有一個頁面，它使用了上面的CSS代碼。頁面中有一個鏈接，它的代碼

溫馨提示

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

評論

0/150

提交評論