實訓網(wǎng)頁編程技術_第1頁
實訓網(wǎng)頁編程技術_第2頁
實訓網(wǎng)頁編程技術_第3頁
實訓網(wǎng)頁編程技術_第4頁
實訓網(wǎng)頁編程技術_第5頁
已閱讀5頁，還剩261頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第一 HTML......................................................................................................HTML簡 HTML歷 HTML語 網(wǎng)頁分 瀏覽 HTML文檔結 刷新頁 章節(jié)概 第二 <a>和<img>............................................................................................ 章節(jié)概 第三 表格和框 TR的屬 TD的屬 章節(jié)概 第四 常用和表 列 滾動字 表 章節(jié)概 第五 CSS樣 CSS簡 CSS體 CSS樣式分類及樣式屬 行內(nèi)樣 內(nèi)嵌樣 外部樣 章節(jié)概 第六 CSS樣式屬 字體屬 背景屬 文本屬 BOX屬 分類屬 章節(jié)概 第七 DIV+CSS布 網(wǎng)頁布 表格布 div+css布 章節(jié)概 第八 JavaScript簡 JavaScript簡 數(shù)據(jù)類 變 函 章節(jié)概 第九 JavaScript內(nèi)置對 內(nèi)置對象 內(nèi)置對象 內(nèi)置對象 內(nèi)置對象 內(nèi)置對 體驗 內(nèi)置對象 內(nèi)置對象 內(nèi)置對象 章節(jié)概 第十 HTML處 回顧單擊鼠標鍵盤表單窗口章節(jié)概 第十一 表單驗 章節(jié)概 第十二 網(wǎng)頁特 網(wǎng)頁特效1-浮動 網(wǎng)頁特效5-浮動章節(jié)概 第一章HTMLHTMLHTML全稱為HyperTextMark-upLanguage，翻譯為超文本語言，也稱作標記或（HeadHTML不是編程語言，而是一種以什么尺寸、位置來顯示等。這些描述都是用HTML來描述的。HTMLHTMLSGML語言，SGMLGMLGML（GeneralizedMarkupLanguage：通用語言）是一種IBM格式化文檔語言，用小節(jié)和次重要小節(jié)（通過標題的級來區(qū)分、段落、列表、表等。GML是SGML（StandardHTML語法結構：HTML<屬性="值">內(nèi)容</<p>是HTML中的段落，下面以<p>為例來詳細解釋語法格式：HTML（align結束中包含的內(nèi)容稱之為區(qū)域。不區(qū)分大小寫，<p>和<P>是相同的。HTML使用編寫網(wǎng)頁，網(wǎng)頁基本上可以分為3類html,htm等。。JavaScriptHTMLCSS來實現(xiàn)。這本書所講解的就是靜態(tài)網(wǎng)頁和頁兩部分內(nèi)容頁文件的擴展名包括html，htm等。。交互式網(wǎng)頁是指用戶可以提供給信息根據(jù)用戶提交的信息響應用戶的要求。如網(wǎng)上、、等等。交互式網(wǎng)頁文件的擴展名包括aspx，jsp，php，asp等。 Exploer（IEMozillaFirefox（火狐公司的Chrome代碼演示：代碼演示：HTML<title>HTML簡介圖HTML簡 中，命名為index.html。這時我存html文 ，鼠標雙擊index.html文件，我們的網(wǎng)頁已經(jīng)運行在瀏圖瀏覽網(wǎng)HTML在上面的例子中用到了4個，除了<title>外，其余的三個構成了<HTML><html>表示網(wǎng)頁文件的開始，應該把它放在文檔的最前面，其他所有的都應該圖HTML代碼演示：HTML <title>HTML簡介 <!—在這里寫注釋 <html><head>></head><body>⑥“<!-- -->”這對稱為注釋，<!--是注釋的開始-->是注釋的結束。它</body></html>Dreamweaver寫大量的，效率很低?，F(xiàn)在來學個專門制作網(wǎng)頁的工具Dreamweaver， 8版本開發(fā)網(wǎng)頁圖啟動圖查看網(wǎng)頁代這時，我們發(fā)現(xiàn)Dreamweaver已經(jīng)幫我們生成了HTML，除了第1行和第4行圖保存網(wǎng)頁文結代碼演示：Meta-編<html<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>HTML簡介使用meta確定編碼格式①這是<meta>，中的charset表示當前網(wǎng)頁的編碼格式，值GB2312表示GB2312字符集，否則就會顯示亂碼，不過中文操作系統(tǒng)中已經(jīng)安裝了。如果GB2312編碼的網(wǎng)頁就會出現(xiàn)亂碼，因為英文操作系統(tǒng)GB2312字符集。我們在瀏覽網(wǎng)頁時偶爾會遇到網(wǎng)頁顯示亂碼，多數(shù)是因為META中的編碼設置不正確。代碼演示：Meta-刷新<metahttp-equiv="Refresh"content="2" ①<metahttp-equiv="Refresh"content="2"/>中的Refresh表示刷新content="2"表示2秒鐘。這個META實現(xiàn)了當網(wǎng)頁2秒后重新刷新這個網(wǎng)頁，就像點擊了瀏覽器上的按鈕。在網(wǎng)頁中的一些聊天程序就使用了網(wǎng)頁刷代碼演示：Meta-刷新<metahttp-equiv="refresh" ①<metahttp-equiv="refresh"content="2;URL=http://www. Refresh表示刷新，content="2"表示2秒鐘，URL表示。這個META實現(xiàn)了當網(wǎng)頁2秒后轉(zhuǎn)向到. /。例如，CSND的論

圖Meta的刷HTML中有很多的，包括文本，段落等，下面我們介紹一些常用標換段下上文字標<B>、<I>、<這三個都屬于文本，<b>用于將文字變?yōu)榇煮w，<i>用于將文字變<title>粗體|斜體|下劃線<b>粗體的開始，</b><b>粗體的開始，</b>圖粗體斜體下劃線<BR>用于換行 <br>表示換行，當瀏覽器遇到 圖換行<P>表示段落<p <fontcolor="#FF0000">第一個段落</font><palign="left">第二個段落代碼解析①<p>表示段落，兩個相鄰的<p>之間14所示的效果。Align圖段落②<font>用來修飾字體，color屬性表示字體的顏色，"#FF0000"是顏色值再來的代碼演示，我們希望詩中的每一句話顯示一行，但結果卻沒能實圖引入床前， 圖預格式化段落<pre>HTML文件中采用的文字版面都原樣顯示在了瀏<SPAN>類似于<p>，也屬于段落，通常稱其為行級層，兩個<span>之間不會空 代碼解析<span>顯示在同一行，圖<div>第一個<div><div>第二個 代碼解析<div>顯示在兩行，圖<SUB<SUB>是下標，<SUP>是上標，它們屬于文本，如圖19所示<title>sub和下標上標代碼解析圖<sub>和<hrwidth="100"size="1" 代碼解析noshade表示水平線沒有陰影。圖水平線<Hn>表示文字的標題，屬于文本，其中的n表示一個整數(shù)，取值范圍是1-6,也就是說<hn>表示<h1><h2><h3><h4><h5><h6>。代碼演示如圖所示。代碼解析插入特殊字

圖標題特殊字符以&開始，以;結束。常用的特殊字符。 代碼解析<顯示成< 圖特殊字>空&<>￥“??±‰÷Meta中的charset用于設置網(wǎng)頁的編碼，gb2312是簡體中文編碼，Refresh第二章<a>和在網(wǎng)頁中使用<html<title>在網(wǎng)頁中<img ①<img>的作用是在網(wǎng)頁中，src屬性指定的路徑，運行效果在網(wǎng)頁中插入背景<title>在網(wǎng)頁中插入背景<bodybackground="images/rose.jpg">①background屬性表示網(wǎng)頁的背景圖像，它必須放在<body>內(nèi)，背景圖像會在圖在網(wǎng)頁中插入背景的的left、center、right（右表的屬的寬和高（width和代碼演示：的width和<html<imgsrc="images/rose.jpg"width="100" ①控制顯示大小是由width和height兩個屬性共同完成的，當width和height時，的寬和高按照原始大小顯示。運行效果如圖所示。圖控制的寬度和高的邊框?qū)Σ迦氲倪€可以在周圍加上邊框代碼演示：的<html<imgsrc="images/rose.jpg"width="200"height="150" ①border屬性是為加一個邊框，<imgborder="n">，n為一個數(shù)值，單位為像圖設置的邊與文字的位置關系<html<title>的align屬性與文字的位置關系<imgsrc="images/rose.jpg"width="200"height="150"border="1"align="bottom"> ①與文字的位置關系是通過設置img的align屬性實現(xiàn)的，當align設置為bottom時，表示與文字底部對齊，如圖所示。還有其他的對齊方式，見表圖與文字絕對底部對局中對表的align屬的上下左右區(qū)域（hspace和 周圍（上、下、左、右）的文字與的距離是可以設置的<html左<imgsrc="images/rose.jpgwidth="50height="50hspace="10"vspace="10"border="1"align="middle">右<br>①運行結果如圖所示，hspace="10"表示左邊和右邊的文字距離有10px，vspace="10"表示上面和下面的文字距離有10px。圖的垂直和水平距文字代替顯示，來代替的顯示，這是利用img的alt屬性來完成的。代碼演示：的alt屬<html<imgsrc="images/rose.jpg"alt="這是一朵玫瑰花" ①alt屬性有兩種使用情況。第一，當鼠標懸停在上時，鼠標的下方會提示“這是一朵玫瑰花”，如圖所示。第二，由于某種原因?qū)е虏荒茱@示時，這時在位置會顯示Alt的值“這是一朵玫瑰花”。比如關閉了瀏覽器顯示功【工具】->【Internet選項】在彈出的框中選擇【高級】選項卡，然后取消“顯示”選項，如圖8所示，點擊“確定”按鈕，最后再來瀏覽網(wǎng)頁，這時不顯示了。圖Alt提圖瀏覽器顯示圖文字代替相對路 index.htmlrose.jpg圖從上圖可以看出Index.html文件在 下，rose.jpg文件在 下，web與 同在 <html<title>相對路徑<imgsrc="../images/rose.jpg"alt="這是一朵玫瑰花" <img的src屬性值"../images/rose.jpg"是一個路徑，這個路徑是以當前文件 （c:\html， images中找rose.jpg，這種路徑稱為相對路徑。相對路徑的優(yōu)點在于無論 ndex.html絕對路 <html <img>src屬性值"file:///C|/html/images/rose.jpg"是一個路徑，這個路徑是以硬盤根目錄（c:\）為參考點的，當前網(wǎng)頁文件（index.html）將引用c:\html\images\rose.jpg文件，這種路徑稱為絕對路徑。當將html 移動到其他位置時，index.html文件就無法找到rose.jpg文件，因此圖相絕路超HTML文件最重要的應用之一就是超，通過網(wǎng)頁上提供的超功能，用戶可文字在 代碼演示：超<html<title>超 ①<a>實現(xiàn)了超，href屬性用來明確的目標文件，target屬性用來明“這里”時網(wǎng)頁轉(zhuǎn)到了目標文件Second.html運行，實現(xiàn)了超。圖文本超Second.html代碼演示：超Second.html代<html<title>超錨<html<p><ahref="#三">三 <p><ahref="#"> <p>三<aname="三"></a> <p><aname=" ①href="#三"表示到名為“三”的位置顯示③name="三"表示定義一個，的名稱是“三當網(wǎng)頁運行后，點擊圖左側(cè)的“三”錨，網(wǎng)頁就會直接跳到“三”錨“name”，二是空“#”。圖錨超<html<a<imgsrc="images/rose.jpg"width="200"height="150"</a>①為添加超只要將源碼寫在超<a>和</a>之間即可。在瀏覽<html<imgsrc="images/.jpg" <map <areashape="rect"coords="456,251,485,319" <areashape="circle"coords="402,299,23" <areashape="poly"coords="400,365,446,268,446,381"href="ningxia.html">域，把這個區(qū)域稱作地圖，<map>的name屬性是地圖的名稱。<area>可以理解為一①usemap="#Map"表示名為“Map”的地圖，因為是文件內(nèi)部，所以<map>，命名為“Map”<area>，shape表示形狀，coords表示<area>的坐標，“href”表示④當點擊這個區(qū)域時，到shanxi.html文件⑤當點擊這個區(qū)域時，到ningxia.html文件超載的文件做成壓縮格式或者其他可以的格式，如*.rar。<html<ahref="images/rose.rar">rose.rar文件 ①href的目標文件是rar文件，當點擊這個時會自動彈出如圖所示 圖文<title>電子郵件超<a ">們</a>①電子郵件的格式是“mailto:郵件地址，當用戶點擊這個超時，彈出如圖電子郵件超圖啟用OutLookExpressHTTP代碼演示：HTTP<a ">搜狐</a>①當點擊這個超時，會打開搜狐Dreamweaver 圖相冊的大拷貝到C:\ 中 下，與圖添加鼠標經(jīng)過圖彈出框如圖所示。其“按下時，前往的URL”是指的超，設置為重復3，4步，選擇下一幅圖像，直到將6幅都加入到index.html中為止 <img>在網(wǎng)頁<a>實現(xiàn)超超分為文本超、新窗口中打開、超、超、熱區(qū)超、超、電子郵件超、HTTP超。第三章表格和框<tablewidth="300" <td>thistextisinthe <td>thistextisinthe <td>thistextisinthetable①<table>用于定義一個表格。一個表格必須包含至少一個橫行組，每一個橫②<thead>元素定義頭③<tr>用于定義一行④<td>用于定義一列。<td>也叫做單元格，必須放在<tr>中⑤<tbody>⑥<tfoot>圖簡單的表表格的邊框代碼演示：表格的<tablewidth="200"border="1">①border="n"，nn0n0n圖表格的寬和高（width和代碼演示：表格的width<tablewidth="200"height="100"border="1"><tablewidth=nmtableheight=nm%>，n（px）,m0-1000%-100%，這個百分比是相對于表格所在的容器200px100px。圖表格的寬和表格的對齊Align代碼演示：表格的<tablewidth="200"height="100"border="1" alignleft、center、right，分別表align時是居左對齊。這個例子中圖表格的背景色（Bgcolor）和背景圖像代碼演示：表格的Bgcolor<tablewidth="200"background="bg.jpg"bgcolor表示背景色，background表示背景圖像，當兩者同時使用時背景圖像會遮住背景色，BackgroundBody的背景圖像效表格的填充和邊距（Cellspacing和Cellpadding表示表格的邊距，Cellspacing表示表格的間距。邊距是指單元格內(nèi)的元Cellspacing<tablewidth="300"border="1"cellpadding="10"cellspacing="10">cellpadding="10"10px，cellspacing="10"10px，如果不設cellpaddingcellspacing2px。圖表格的邊距（cellpadding）和填充表格的<tablewidth="300"<tablewidth="100"border="1"align="center">表格邊表格寬表格高leftcenterright(左中右表格對顏<table>圖TR行的高度(height代碼演示：<tr>Height和<tablewidth="300"<trheight="30" <trheight="40"<trheight="50"<trheight="n">表示行的高度，單位是像素。當設置行高時這一行的所有列都與行高相同。<trbgcolor="顏色值">表示這一行的背景色。本例中第一行的高度是30px,背景色是"#CCCCCC"40px，背景色是"#999999"，第三行50px，背景色是"#666666"，如圖所示。圖行的高度和背景TD單元格的寬和高（Width和代碼演示：單元格的width<tablewidth="300"border="1"cellpadding="2"cellspacing="2"bgcolor="#CCCCCC"> <tr <tdwidth="100"height="20">& <tdwidth="100"height="30">& <tdwidth="100"height="40">& 300px20px100px20px100px30px100px40px40px。Dreamweaver中顯示表格的寬度數(shù)據(jù)，每一列設置的值均100px90px92px。這是因border="1"cellpadding="2"cellspacing="2"屬性，他們占用了表格的一部分和單元格的水平和垂直對齊(Align和代碼演示：單元格的Align<tablewidth="300"border="1"cellspacing="0"<tr <tdalign="left">左 <tr<tdalign="center">中<tralignleft、center、rightvaligntop、middle、bottom，分別表示上、中、下。對單元格的背景色代碼演示：單元格的<tablewidth="300"border="0"bgcolor="#CCCCCC"><trbgcolor="#999999"><tdbgcolor="#666666">&;</td>"#666666"景單元格跨行(rowspan)屬<tablewidth="300" <tdrowspan="n">中n是一個整數(shù)，表示這個單元格在垂直方向跨的行數(shù)圖單元格跨列（colspan）屬<tablewidth="300" <td<td<tdcolspan="n">n是一個整數(shù)，表示這個單元格在水平方向跨的列數(shù)。圖leftcenterright（左中右topmiddlebuttom（上中下顏數(shù)數(shù)表<td>的屬使用<Frameset>制作框架網(wǎng)FrameSet.html、Left.html、Sanzijing.html、Baijiaxing.htmlFrameSet.html文件，運行結果如圖所示。當點擊“三”時，右側(cè)子窗口顯示Sanzijing.html文件，當點擊“百家姓”時，右側(cè)子窗口顯示Baijiaxing.html文件。圖框架導FrameSet.html文件代<framesetrows="*"cols="150,*"framespacing="0"frameborder="no"border="0"> <framesrc="Left.html"name="leftFrame"scrolling="No" <framesrc="Sanzijing.html"name="mainFrame"id="mainFrame"title="mainFrame"/> ①<framesetrows="n1,n2,…"，rows…星號"*"表示分配給前面所有窗口后剩下的高度，例如，<framesetrows="20%,30%,*這里的"*"就代表第三行的高度50。<framesetcols="n1,n2,…">，colsrowsFrameset.html文件中，yes或框架邊框的寬度，需要設置表<Frameset>的屬②這個<frame>表示左側(cè)子窗口，src屬性表示這個子窗口顯示Left.html文件Name屬性表示窗口名稱為leftFrame”③這個<frame>表示右側(cè)子窗口，src屬性表示這個子窗口顯示Sanzijing.html文件，Name屬性表示窗口名稱為”mainFrame”。表<Frame>的屬Left.html文件代<body<p><ahref="Sanzijing.html"target="mainFrame">三</a></p><p><ahref="Baijiaxing.html"target="mainFrame"></a></p><p><a "target="_top">搜狐</a>③①target="mainFrame"表示當點擊“三”時，在名稱為"mainFrame"的窗口中打開Sanzijing.html網(wǎng)頁文件，實現(xiàn)了框架導航。②target="mainFrame"表示當點擊“”時，在名稱為"mainFrame"的窗口中打開Baijiaxing.html網(wǎng)頁文件，實現(xiàn)了框架導航。②target="_top"表示當點擊“搜狐”時，取消框架，在整個瀏覽器窗口中打開h Sanzijing.html文件代三Baijiaxing.html文件例：使用在這個案例中要制作兩個文件，IFrame.htmlAd.htmlIFrame.html中添加一個Ad.htmliFrame.html的第二行中。<tablewidth="100%"border="0"cellspacing="0"<tr<td <trmarginwidth="0"><IFrame>框架，widthheight屬性設置了框架的寬和高，與它所在的容器（第二行的單元格）的寬和高相同，name屬性設置框架的名稱為“InnerFrame”,frameborder設置框架沒有邊框，src設置框架中顯示的文件是Ad.html，scrolling設置框架沒有滾動條，marginheightmarginwidth設置框架0。0框架的邊框，0沒邊框，1Yes或框架滾動條，Yes有滾動條，No沒有滾動表IFrame

圖<table>borderwidthheightalignbgcolorbackgroundcellspacing,<td>widthheight,alignvalignbgcolorrowspancolspan<iframe>widthheightname,framebordersrcscrollingmarginheight,第四章常用和表1所示。列表分為有序列表和無序列表。<ol>有序列<oltype="1" 代碼解析type屬性設置序號的種類，start控制開始序號的位置。有序列表序號種類共有三表有序列表序號種圖有序列表<UL>無序列<ul 代碼解析type屬性設置序號的種類,type="disctype="square表無序列表序號種圖無序列表<marqueeheight="200" ①height②width③direction設置滾動的方向，left向左滾動；right向右滾動 up向上滾動down④scrollamount⑤設置字幕的背景色。圖滾動字幕表""文件路get或post傳送大量數(shù)據(jù)，get傳遞的數(shù)據(jù)小于256K，post隱藏傳遞數(shù)據(jù)，get在URL中顯示傳遞數(shù)據(jù)。表單元

表<form>的屬checked元素被選中><input>表示表單元素，type是非常重要的屬性，type不同的值表現(xiàn)為不同的元素類框單選按多選按提交按復位按按圖像按表元素的數(shù)數(shù)表<input>的屬<selectname="元素名稱<optionvalue=”值"selected>選項<optionvalue=”值"><optionvalue=”值">選項<optionvalue=”值">選項…選項的表<select>的屬<textareaname="cols="文本框?qū)挾萺ows="文本框高度<textarea>屬性見表數(shù)數(shù)表<textarea>的屬單選框、框、多選<formname="form1"method="post"action=""> 用戶名：<inputname="UserName"type="text"id="UserName"size="20" 碼<inputname="UserPass"type="password"id="UserPass"size="20"><textareaname="Intro"cols="30"rows="5"id="Intro"></textarea>name屬性設定表單的名稱為form1actionsize20type屬性設定表單元素類型為框，框中的數(shù)據(jù)顯示為”*”size屬性設定框的長度為20個字符id屬性設定框的客戶端唯一標識為UserPasscols30rows5idIntro。圖單行文本框、框、多行文本單選按鈕和多選按鈕中只能選中一個，name屬性值相同的單選按鈕被視為同一組。單選按鈕適用于在多個多選按鈕在使用時通常需要分組，同一組中可以選中多個值，name屬性值相同為一<formname="form1"method="post"<inputtype="radio" "value="男"checked> <inputtype="radio" "value="女"> <inputname="like"type="checkbox"value="讀書">讀 <inputname="like"type="checkbox"value="聽音樂">聽音 <inputname="like"type="checkbox"value="體育運動">體育運 type name屬性值相同，因此它們是同一組，也就是type注解③、④、⑤都是多選按鈕，name屬性值相同，因此它們是同一組，在這一組中按下拉框和列表<formname="form1"method="post"工作地<selectname="address"size="3"multiple><optionvalue="beijing"selected></option><optionvalue="shanghai"></option><optionvalue="shenzhen"></option><optionvalue="xian">西安</option><optionvalue="other">其他</option> <selectname="province"><optionvalue="shaanxiselected陜西省</option><optionvalue="shanxi">山西</option>multiple屬性設定<select>以列表形式顯示size3為“”，用戶可以看到列表中的選項為“”selected設定“”為默認選中項name⑨參考⑧。拉按windows風格的，action指定的文件態(tài)普通按鈕。需要結合JavaScript表按鈕分<formname="form1"method="post"<inputtype="submit"name="Submit"value="提交"><inputtype="reset"name="reset"value="重置"><inputtype="button"name="buttonvalue="按鈕"><inputtype="image"name="imgsubmit"src="images/submit.jpg">value設定按鈕的為“提交”value設定按鈕的為“重置”value設定按鈕的為“按鈕”typenamebutton。圖value:shaanxi；Key:山西省，value:shanx；陜西省默認選中。<formname="form1"method="post"<tablewidth="300"border="0"cellspacing="1"<tr<tdcolspan="2"align="center"bgcolor="#CCCCCC">用戶<tr<tdwidth="91align="right"bgcolor="#E6E6E6">用戶名<tdwidth="198"<inputname="UserName"type="text"maxlength="20"<tr<tdalign="right"bgcolor="#E6E6E6"><td<inputname="UserPass"type="text"size="15"<tr<tdalign="right"bgcolor="#E6E6E6"><td<input type="radio"value="男checked><inputtype="radio"name=""value="女"><tr<tdalign="right"bgcolor="#E6E6E6"><td<inputname="liketype="checkboxvalue="checkbox">寫<inputname="liketype="checkboxvalue="checkbox"><inputname="liketype="checkboxvalue="checkbox">體<tr<tdalign="right"bgcolor="#E6E6E6">省份<td<select"<tr<td<textareaname="Intro"cols="25"rows="5"<tr<tdcolspan="2"align="center"<inputtype="submit"name="sendvalue="提交<inputtype="reset"name="reset"value="重置post提交方式，action<input<input框<input單選按<input多選按<input提交按<input復位按<input按<input圖像按<input<input第五章CSS樣面的章節(jié)中，我們講解了一系列的HTML表單，如text、button、checkbox等。對于這些HTML，其部分外觀風格可以采用自身的屬性進行設置，如設置buttonwidthheight進行設置。但是類似這樣的button的等，都難以用HTML的屬性設置實現(xiàn)。設計的初衷、HTML出現(xiàn)時所處的編程環(huán)境、軟件開發(fā)技術的不斷發(fā)展以及現(xiàn)在人們對于網(wǎng)頁風格要求越來越高等是有很大關系的。要解決以上這些問題，CSS就是一個很好CSS什么是CSSCascadingStyleSheetsW3CCSS工作組制作和，CSS3.0。同HTML一樣，CSS語言是一種語言，它不需要編譯，可以直接由瀏覽器CSS文件也是一個文本文件，它包含了一些CSS（定義HTML如何呈現(xiàn)的規(guī)則，CSS文件必須使用css作為文件名后綴，CSS文件可以單獨存在，也可以嵌入到HTML文檔中，甚至可以嵌入到某個HTML中。CSS作CSS負責網(wǎng)頁內(nèi)容的表現(xiàn)，即外觀風格的設計，至于網(wǎng)頁中HTML決定。通過CSS設置網(wǎng)頁及網(wǎng)頁中的外觀風格，并不改動HTML，只是通過添加CSS規(guī)則，而得到各種不同樣式的網(wǎng)頁。同一個CSS樣式，可以應用于多個HTML，甚至是不同網(wǎng)頁中的多個HTML。如果這個CSS樣式對這些都生效，那么，這些就會有一致的外計的工作量會極大的減少，而且的工作量也會極大減少。CSS在幾乎所有的瀏覽器上都可以使用，且它們對于CSS中絕大部分樣式的解CSS設計出來的外觀風格，瀏覽器兼容性非?，F(xiàn)在我們制作的中，已經(jīng)很少有靜態(tài)了，大多數(shù)都是站，即DHTML，甚至是胖服務器端的交互型。DHTML與用戶的交互性及體驗都比靜態(tài)要好得多，而DHTML的技術正是由HTML、CSS、JavaScript等幾種技 DHTML的組CSS首先，我們來體驗一下CSS的。在如圖所示的頁面中有一個編輯框txt1，它是HTML默認的呈現(xiàn)風格，現(xiàn)在修改該網(wǎng)頁中關于txt1的源代碼如下所示：<htmlxmlns="<inputtype="text"name="txt2"style="border-left:none;border-top:none;border-right:none;width:100px;height:22px;border-bottom:1pxsolidrepeat;padding-left:25px;line-height:22px"/>圖未加CSS圖添加了CSS樣式的編輯框效txt1采用編輯框自身的屬性設置其寬度和高度信息，但是無法實現(xiàn)漂亮的外觀效果，txt2style屬性為其修改了邊框的呈現(xiàn)形式，并且為該編輯框在錄入文CSS的之所在。其中用到的是行內(nèi)CSS樣式。下面我們來正式開始學習CSS。CSSCSS樣式所處的位置分，CSS可以分為行內(nèi)樣式、內(nèi)嵌樣式、外部樣式。在這些樣式中，都可以應用樣式屬性來設計HTML的風格，如上面所述的“background-CSS語法中都有固定的寫法和用法，常用的樣式屬設置背景設置背景是否重語style樣式屬性1:1;樣式屬性2:行內(nèi)樣式以HTML的style屬性形式出現(xiàn)，style采用上述形式，在style屬性的值”的形式，前面代碼演示“CSS樣式使用演示”中所示“background-HTML的背景“url(Imagesa.gif)”就是為“background-image”屬性所設置的<htmlxmlns="<inputtype="text"name="txt"style="border-left:none;border-top:none;border-right:none;width:100px;height:22px;border-bottom:1pxsolidrepeat;padding-left:25px;line-height:22px"/>外行內(nèi)樣式的適用場某個的風格較為特別、特定或它的樣式不同于其它，并且可以不考慮它的樣式的可性，或為了強調(diào)該的顯示風格等而采用行內(nèi)樣式。行內(nèi)樣式適用于當前。一個不可以同時定義多個style屬性，一個style屬為諸多設置行內(nèi)樣式工作量會比較大，且可性差，除非有必要，否則應慎示<htmlxmlns="<styletype="text/css">{}{}上述代碼，在<style2個樣式，一個應用于<h1>標另一個應用于<body>，用于設置<body>的背景，為“images/bg2.gif。效果如<styetye='tctyle的<head的<ttle>下方，然也可內(nèi)于網(wǎng)頁的其它置，但是那樣做是不規(guī)范的。在該語句塊中typeS式的語句。另外有些低本的瀏器不能別<yle>現(xiàn)在基上可以考慮這個問題了，這意著低版的瀏覽會忽略tye里的容，并把tye 語{樣式屬性1=值樣式屬性2=}selector被稱為選擇器或選擇符，表示樣式設計所針對的或?qū)邮綁K的標識（為CSSHTML選擇器、ID選HTML選擇E{}

樣式屬性1:樣式屬性2:selector為任意的HTML，此處用E代表。則網(wǎng)頁中所有的E將均會應用此{}h130px,同時將其顏色red。ID選擇{樣式屬性1:樣式屬性2:}selector為#name的形式，當前網(wǎng)頁中如果有的ID為name，則該將會應用{}}上述代碼，會將當前頁面中的所有ID為userName的的字體大小設為代碼演示：通過ID選擇器樣式修改userName的風<htmlxmlns="<styletype="text/css">{border:1pxsolid#006699;}<inputtype=”text”id="userName"value=”吃飯飯類選擇{樣式屬性1:樣式屬性2:式通過的class屬性來設置。name一般由英文字母、數(shù)字及“_”組成，但通常只能以{}

上述代碼中，如果某應用了此樣式，即屬性列表中出現(xiàn)“class=txt”的形式，20pxred，如下：代碼演示：通過類選擇器樣式修改userName的風<htmlxmlns="<style{border:1pxsolid#006699;}<inputtype=”text”id="userNameclass=”txt”value=”吃飯飯多個類選擇器樣式，可以同時應用在同一上，名為txt1和txt2的兩個類選器txt1txt2userNametxt1txt2txt1txt2這兩userNamered。代碼如<htmlxmlns="<style{}{}<inputtype=”text”id="userNameclass=”txt2txt1value=”天天吃飯飯{樣式屬性1:樣式屬性2:}其中name為已定義過或未定義的類選擇器樣式，E代表任意的HTML，即只有EnameEE.name樣式。如下所示代碼中，txt1只能用應用warning樣式而其中的<p>則不但可應用warning樣式還可同時應用p.warning樣式。<htmlxmlns="<title>06類選擇器樣式<style{}{}<inputtype="text"id="userNameclass="warningvalue="光天天吃飯飯<pclass="warning">中國，你媽喊你回家吃飯呢偽類選{樣式屬性1:樣式屬性2:}:name意義超未被點擊的樣式用于超點擊后的樣光標懸停在的上方時的樣光標已經(jīng)在上方點按但還沒有釋放時的樣獲得當前焦點時的樣式{}上述代碼，如果網(wǎng)頁中有超（且設置了具體的地址，則當光標懸停于超文本上方時，文本字體大小將變?yōu)?0px，且顏色變?yōu)閞ed。CSS{}{}<aclasswarninghref="index.html">偽類與CSS類選擇器樣式的配合使用“warning，20px，顏色被設為red，同時當光標懸停在文本上方時，文本將變?yōu)樾斌w組合選 或其子或其后 <div<h2>和<p>同為<div的“子（特指兒子輩份的，兩者分別同<div>是<h2>和<p>的“父<h2>、<p>、<strong>都是<div>的“后代（三者都包含在<div>之內(nèi)，但<div>和<strong>不是“父/子”關系，是“祖/孫”關系。<p>和<strong>形成“父/子”關系，<strong>的“父”是<p>，<strong><p>的子<H2><p>{}

樣式屬性1:樣式屬性2:EFHTMLID選擇器或類選擇器，也可以是HTML。<htmlxmlns="<style{}{}{}<pid="p1"class="txt1">要有好的心理素質(zhì)<pid="p2"class="txt2">一定要有好的心理素質(zhì)<pid="p3">沒有好的心理素質(zhì)是一件很的事<h1>中國，你媽喊你回家吃飯呢上述代碼中，p1txt1，p2txt2，p3采用了樣式ID選擇器樣式p3，<h1>采用了HTML選擇器樣式。效果如下圖所示：E,F語法格式：EFE{樣式屬性1:樣式屬性2:}EFEFHTMLHTMLF為E的后代，則F應用上述樣式HTML類選擇器E的后代中如果有采用了F樣式，則該后代應用上述樣式HTMLID選擇器E的后代中如果ID為F的，則該后代用上述樣式類選擇HTML如果有采用了E樣式，且其后代中有F，則應用上述樣式類選擇類選擇器如果有采用了E樣式，而后代采用了F，則該后代應用上述樣式類選擇ID選擇器如果有采用了E樣式，而后代的ID為F，則該后代應用上述樣式ID選擇器HTML如果有ID為E，其后代F應用上述樣式ID選擇器類選擇器如果有ID為E，其后代采用了F樣式，則該后代應用上述樣式ID選擇器ID選擇器如果有ID為E，其后代ID為F，則該后代應用上述樣表EF型選擇器語EF代碼演示：EF<htmlxmlns="<styletype="text/css">p.txt{ }.txt1{ }{}.txt3{ }<pid="p1"><strongclass="txt">要有好的心理素質(zhì)<divid="div1"class="txt1"><pid="p2"class="txt2">一定要有好的心理<divid="div2"class="txt3"><pid="p3">沒有好的心理素質(zhì)是一件很<pid="p4"class="txt3">中國，你媽喊你回家吃飯呢上述代碼中p4只是采用了類樣式txt3，但其無ID為p3的后代，故p4只是應用#圖EF型選擇器應<htmlxmlns="<title>09組合選擇器應用<styletype="text/css">{border:1pxsolid}#div2table{border-bottom:1pxdashed}<div<table<div<table上述代碼中，選擇器“#div2tabletd”表示：id為div2的，其下如果有<table>，則其中的單元格<tddiv1中的表格沒有邊框（默認，圖EF型選擇器應內(nèi)嵌樣式的適用場內(nèi)嵌樣式只適用于為樣式定義所在的網(wǎng)頁中的指定設置呈現(xiàn)風格，不能跨多網(wǎng)頁應用。適用于中小型。語CSSCSS文件中。需要注意的是，在CSScss文件中，直接定義樣式即可，即不再需要<style>語句塊。{}HTMLindex.html中（設stylesheet.cssindex.html在同一文件夾中，是采用如下方式使用stylesheet.css中的樣式的：<htmlxmlns="<linkhref="stylesheet.css"rel="stylesheet"type="text/css"<pclass="font1">外部樣式采用@import指令，將指定的外部樣式引入到當前網(wǎng)頁中。即可將方式一中的<link><linkhrefcss文件所在路徑"rel="stylesheet"type="text/css"<style@importurl(css文件所在的路徑<styletype=”text/css”>@importurl("stylesheet.css");外部樣式的適用場行內(nèi)樣式>內(nèi)嵌樣式>外部樣式style1:122;…”的形式出現(xiàn)在HTML的屬性列表中。行內(nèi)樣式只適用于當前HTML，不能在其它地csscss文件中定義的樣式，可以在該網(wǎng)頁中使用<link>或@import指令導入這個css文HTML選擇器、ID選擇器、類選擇器等，另外還有偽類選擇器、組合選擇器等。HTML選擇器以HTML的名稱作為選擇器，即樣式針對指定的HTML進行設計；ID選擇器#開頭，一般命名為#name，如果應用樣式的網(wǎng)頁中有以name作為ID的，則可自動應用此樣式，多個ID第六章CSS樣式屬CSS樣式屬性。<styletype=”text/css”>{font-familyVerdana,Arial,Calibri;}設置背景設置背景是否重屬<styletype=”text/css”>{}background-color用于設置或檢索的背景顏色信息，上述代碼效果圖如圖所body部分的背景色設為了#ddecff。<styletype=”text/css”>{}設計網(wǎng)頁時經(jīng)常會需要為網(wǎng)頁設置背景顏色或背景，background-image正是用于設置的背景信息，上述代碼用到了圖中所示的一幅（200px*200px）為網(wǎng)頁（body部分）設置背景，一般由于客戶端的屏幕分辨率可能會不一樣，IE窗口大小也可能會隨時發(fā)生變化，所以在為body設置背景時，將做成固定尺寸來設置網(wǎng)頁背景（如將做成1024px*768px大小，是不合適的。而一般做法是將做成200px*200pxbackground-repeat屬性設為repeat，或不設置background-repeat屬性（設置background-image時，默認背景是重復的，則效果如圖所示，這正是我們要實現(xiàn)的。選擇一幅合適的，則可以為網(wǎng)頁添加非常漂亮的圖背景設置圖背景設置個復雜些的例子。采用幾幅制作一個圖中的帶有區(qū)域邊框的背景效果，效果如圖所9個圖層，按圖中所示進行排列。9topLeft、成圖所示效果，最后在最中間的圖層即centerCenter中即可放置數(shù)據(jù)，效果如圖所示。進行講解。在這個案例中，我們只要關注背景如何設置并如何設置重復即可。效<styletype="text/css">{/*Firefox圖層中的居中設置/*IE圖層中的居中設置*/}/*top、bottom和center寬度均為500px*/{}{ }{ /*x方向上重復，不在y方向上重復*/}{ /*y方向上重復，不在x方向上重復*/}{}{ /*y方向上重復，不在x方向上重復*/}{ }{ }{ }{ }/*EF型選擇器，表示id為centerCenter的下的表格中的單元格應用此樣式*/#centerCentertabletd{border-bottom:1pxdashed}<div<divid="top"<div<div<div<divid="center"<div<div<table<td></td><td></td><td><td></td><td></td><td><td></td><td></td><td><div<divid="bottom"<div<div<divtopLefttopCenterxytopRightcenterLeftxycenterRightxybottomLeftbottomCenterxybottomRight屬<styletype="text/css">{}{}{}{}<pid="p1">中國，你媽喊你回家吃飯呢<pid="p2">中國，你媽喊你回家吃飯呢<pid="p3">中國，你媽喊你回家吃飯呢<pid="p4">中國，你媽喊你回家吃飯呢文本中加劃線、overline（文本上方帶上劃線、none（無7所BOXBOX模型圖示范了w3c規(guī)范下的標準的BOX模型圖，按w3c規(guī)范，圖中白域表示的內(nèi)容所占區(qū)域白域外層外包的淡灰域表示內(nèi)容在4個方向（左上右下）bottombottomborder-width。一般情況下，大多數(shù)瀏覽器都會按照上面的圖所示呈現(xiàn)內(nèi)容。然而IE5和IE6的呈現(xiàn)卻是比較另類的如根據(jù)W3C的規(guī)范元素內(nèi)容占據(jù)的空間是由width屬性設置的，而內(nèi)容周圍的padding和border值是另外計算的即不包含在width屬性中不幸的是，IE5.X和6在怪異模式中使用自己的非標準模型。這些瀏覽器的width屬性不是內(nèi)容的寬度，而是內(nèi)容、內(nèi)邊距和邊框的寬度的總和。所在IE下，一般設置的左、右內(nèi)邊距，通常會被“撐寬。雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給添加具有指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距 padding系列的屬性來設置。margin系列的屬性來設置。border系列的屬性來設置。邊框?qū)傩粤斜恚╞order系列屬性屬<style{ border-bottom:1pxsolid#006699; }<inputtype="text"id="txt1"class="txt"（1px（solid（#006699⑤為文本框設置了背景在代碼中同時還設置了文本框的背景。最終實現(xiàn)的效果如下圖所示圖邊框?qū)賰?nèi)外邊padding系列的屬性用于設置當前的內(nèi)容區(qū)域的內(nèi)邊距(左、上、右、下)。即內(nèi)容區(qū)域在各個方向上與邊框需要保持的最小距離。<style{border:1pxsolid#000000;}<divid="layout"layout的各方向上的內(nèi)邊距，左、上、右、下內(nèi)邊距分別為layout10px、20px、30px、40px<style{border:1pxsolid#000000;}{}<divid="layout"<imgid="pic1"class="pic"<imgid="pic2"margin系列的屬性用于設置當前的外邊距(左、上、右、下)。即在各個方上述代碼中①②③④語句分別設置了pic1的在左、上、右、下四個方向上的外pic1pic2pic110px的距離（pic2沒有設置外邊距，則外邊。效果如圖所示。圖外邊距效dis設置是否及如何顯設置是否可設置為浮動對象，則元素脫離原來的HTML文檔流，浮動對象，可采用clear:right屬先來看下面的代碼，在該段代碼中，圖層div1、div2、div3（各自包含一幅）<styletype="text/css">{border:1pxsolid}<divid="layout"<divid="div1"><imgsrc="images/pic1.jpg"style="width:210px;<divid="div2"><imgsrc="images/pic2.jpg"style="width:120px;<divid="div3"><imgsrc="images/pic3.gif"style="width:100px;圖分類屬性如何能讓div1、div2、div3水平排列呢{}{}{{}圖div1、div2、div3的水平排如何能讓div1、div2、div3平排列而隱藏div1，但仍保留div1的位置呢？{}{{}{}圖隱藏div1，但仍保留div1的位floatclear屬性，也即把它們?nèi)吭O為浮動HTML文檔流中的先后順序來處理它們之間的排列關系，w3c的規(guī)范。如何能讓div1、div2、div3平排列而隱藏div1，但仍保留div1的位置，隱藏div2而不保留div2的位置呢？效{}{}{}圖隱藏div1但保留位置，隱藏div2但不保留位<style<inputtype="button"id="btn1style="cursor:pointervalue="光標設置定位屬z-屬<styletype="text/css">{border:2pxsolid#000000;}{border:2pxsolid#000000;}<div<divdiv1、div2，采用的均是絕對定位，則圖層采用對bodybody中的將不再采用流式布局進行排列。②div2z-index2，div1z-index1div1div2div1的上方。特殊屬設置（Mozilla下可直接設置此屬性實現(xiàn)半透明效果屬<styletype="text/css">{border:1pxsolid#000000;}{border:1pxsolid#000000;opacity: /*alpha濾鏡，用于設置的透明層次*/ }<div①IE下可通過filter來實現(xiàn)的半透明效果，Mozilla不支持②Firefoxopacity實現(xiàn)半透明效果,IE不支持。第七章DIV+CSS布于HTML外觀風格的設計是十分有好處的，從這一點上講，把握好樣式屬性只是對什么是網(wǎng)頁布往描述一些輔助性的信息，如的、制作者的或其它的一些導航鏈圖示范網(wǎng)如何進行網(wǎng)頁布局設采用圖形設計軟件如PhotoshopDreamweaver等設在的主要是做w3c產(chǎn)品培訓的。導航，右部為主體內(nèi)容。這種頁面，多在一些的子頁面中存在。網(wǎng)頁尺寸選1024*768，頁面的尺寸可以以1024*7681024*768多個網(wǎng)頁風格的一致性及同一網(wǎng)頁中不同元素的風格一致般可以采用模板、CSS樣式設計等技術來實現(xiàn)。通過對比吸引讀者的注意在文本周圍留出空白以便更容易閱盡量以簡單的風格呈 不要期望人們會插件，很多人會因此轉(zhuǎn)到別的地方應該將注意力集中在提供信息方閃爍的文本和花里的迷霧里。只要可能，就要避免嘗試使用文本的布局協(xié)助導航顏塊或背景來區(qū)分它們。用戶是 絕對定采用相對于瀏覽器正文區(qū)域的絕對坐標來定位。通過修改CSS樣式屬性中區(qū)域的x坐標和y坐標來實現(xiàn)將置于指定的位置。Word2007對一個有上萬字的文檔進行排版時，如果每個文字流式布ML默認的布局式。流布局將個ML文區(qū)域看一文檔流的有嚴格的后順序在ML文流中默從向右排列當前行不下則行，v>可以借助于HTML文檔的自動排列功能，省去自行定義位置的工作量。如果要了，這時就可借助于<table>div+css布局技術來實現(xiàn)了。表格布DOM樹變得很復雜、文檔代碼量大、div+css布采用<div>，將網(wǎng)頁或網(wǎng)頁中的某一個區(qū)域劃分成不同的部分，然后結合CSS樣div+cssdiv+cssDOM樹變得很簡單，代碼量相對于表格布局技術要少得多，速度快，可性也強。但是對于一些數(shù)據(jù)量大且排布要求很精確的布局，div+css實現(xiàn)難度較大。div+css布局技術，而div+css，而內(nèi)容區(qū)中圖布局設計示圖例中要實現(xiàn)的內(nèi)考慮實現(xiàn)的可性及設計上的可行性，可以將標題單獨用一個<div>來實現(xiàn)，.htmlconetBoomLef代碼演示：contentBottomLeft<styletext=”text/css”>{ }”和“bar，bar代碼演示：titlebar{ } { }contentBottomLeft已設置了文本的顏色，而此處標②采用圖層barbar的高度當然要盡量與橫線一樣高了。不過默overflow設為hidden后則可以，即高度hiddenproductsproducts表及其單元格的樣式，并將代碼演示：products{}#contentBottomLefttable {border-bottom:1pxdashed }①此處表示id為contentBottomLeft的下的表格中的單元格應用此樣式，1px寬、劃線段、#006699顏色③單元格的高度，因為要插入行中的為32px*32px，所以此處高度設為products代碼演示：products<spanstyle="color:#000000font-weight:bold;">騰訊軟件</span>在products表的每一行中依次插入相應的及文本數(shù)據(jù)，并對文本數(shù)據(jù)添加超。效果如下圖所示：圖在products代碼演示：products表下的單元格中的超樣式設#contentBottomLeft#productstda:link,#contentBottomLeft#productstd { }#contentBottomLeft#products{ }①此處表示id為contentBottomLeft的下的id為products的表格中的單a:linka:visitedproducts表格中的單元格中，如果存在超，則未時及已過均采用上述樣式。其它情況②設置無文本裝飾。③設置文本裝飾風格為帶有下劃線。即光標移到超文本上方時才出現(xiàn)下劃圖案例1DOM樹也會越復雜，調(diào)div+css下面我們來看另外一個案例，通過此案例，學習div+css布局設計的基本方式66簡 下面采用<divCSS樣式的實現(xiàn)方式來實現(xiàn)上述內(nèi)容。div+css布局中，采用div將網(wǎng)頁劃分為多個區(qū)域，布局設計中的每個區(qū)域不論大小均對應一個<divdiv之間及div與其它元間的關系，可以采用css來進行控制。采用css來控制div之間及div與其它元間的關系，要把握住它們之間的規(guī)律CSS樣式，當然要想在這一點上運用的很嫻熟，是需要做很需要注意的是，在div+css的布局中，大量的采用的“層套層”的方式，如在圖中，樣的處理不論將來兩個圖層的風格一致性還是將圖層變?yōu)楦釉貋碓O置它們之間的html“l(fā)ayout，body的居中。代碼演示：layout<styletype="text/css">{/*IE下的居中設置*/}IEtext-align:centerFirefox中可以實現(xiàn)文字、等的居中，但不能實現(xiàn)div，要使div也居中，可采用以下方法：在layout層中插入一個<div>，id設為“topHeader”，用于表示圖11中的頂代碼演示：topHeader{border-bottom:solid1px#E6E6E6;}圖topHeader從圖中我們可以看到，topHeader所占區(qū)域距離瀏覽器正文區(qū)域左、上、右均存在一定代碼演示：<body{}效在topHeader中插入一個<div>，id設為“topHeader topHeader的左方，用于定位并顯示導航的菜單內(nèi)容。在內(nèi)嵌樣式塊中插入如下代代碼演示： { /*topHeader同高*/ }①topHeader 窗口的寬度變化而變化，進而topHeader ②設置菜單文本居于此圖層的右方。③此處通過line-height在 在eader的下方插一個<d>，d設為“，用于包頁眉、容tr中再次插入個<dv>，對應圖中頁眉、容和頁腳，de、ete。代碼演示：header、content、footer{}{/*400px，以能實時看到設計效果，后充設計中可修改或自動撐大*//*由于在layout中將全部內(nèi)容設為了居中對齊，所以此處重置為左對齊*/}{}header、content、footer圖層。header、conent、footer的布次插入2個<div>，id分別設為headerTop和header ，其中headTop用于展示圖中所示的logo，header “ {}{/*padding-left50px，會將div在橫向撐大50px,所以此處的寬度設置為910-50=860，header的父圖層header的寬度為910px*/ /*子的范圍如果超出父的范圍，即溢出時，將超出的部分隱藏*/}①header 的寬度設為了860px，由于設置了padding-left為50px，會將div在橫向“撐大”50px（設置了padding-left或padding-right后，一般情況下，標簽所占區(qū)域?qū)弧皳未笏源颂幍膶挾仍O置為910-50=860，header header50px。header的布局效在header “，接。同時為超設計如下樣式：代碼演示： /*ID為 Text的下如果有<a>，則其采用如下樣式*/ {} {/*原文本字體大小為14px，光標移至文本上方時文本字體大小設為16px，則可實現(xiàn)文字}①應用于id為 ”的中的超，a:link和a:visited應用此樣式②應用于id為 ”的中的超，a:hover應用此樣式1717中為光標移動到“產(chǎn)品大header部分的實現(xiàn)效代碼演示：contentTop和contentBottom的{}{}代碼演示：contentTop和contentBot

溫馨提示

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

評論

0/150

提交評論