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

下載本文檔

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

文檔簡(jiǎn)介

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

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

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

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

表<form>的屬checked元素被選中><input>表示表單元素，type是非常重要的屬性，type不同的值表現(xiàn)為不同的元素類框單選按多選按提交按復(fù)位按按圖像按表元素的數(shù)數(shù)表<input>的屬<selectname="元素名稱<optionvalue=”值"selected>選項(xiàng)<optionvalue=”值"><optionvalue=”值">選項(xiàng)<optionvalue=”值">選項(xiàng)…選項(xiàng)的表<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屬性設(shè)定表單的名稱為form1actionsize20type屬性設(shè)定表單元素類型為框，框中的數(shù)據(jù)顯示為”*”size屬性設(shè)定框的長(zhǎng)度為20個(gè)字符id屬性設(shè)定框的客戶端唯一標(biāo)識(shí)為UserPasscols30rows5idIntro。圖單行文本框、框、多行文本單選按鈕和多選按鈕中只能選中一個(gè)，name屬性值相同的單選按鈕被視為同一組。單選按鈕適用于在多個(gè)多選按鈕在使用時(shí)通常需要分組，同一組中可以選中多個(gè)值，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="體育運(yùn)動(dòng)">體育運(yùn) 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屬性設(shè)定<select>以列表形式顯示size3為“”，用戶可以看到列表中的選項(xiàng)為“”selected設(shè)定“”為默認(rèn)選中項(xiàng)name⑨參考⑧。拉按windows風(fēng)格的，action指定的文件態(tài)普通按鈕。需要結(jié)合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設(shè)定按鈕的為“提交”value設(shè)定按鈕的為“重置”value設(shè)定按鈕的為“按鈕”typenamebutton。圖value:shaanxi；Key:山西省，value:shanx；陜西省默認(rèn)選中。<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復(fù)位按<input按<input圖像按<input<input第五章CSS樣面的章節(jié)中，我們講解了一系列的HTML表單，如text、button、checkbox等。對(duì)于這些HTML，其部分外觀風(fēng)格可以采用自身的屬性進(jìn)行設(shè)置，如設(shè)置buttonwidthheight進(jìn)行設(shè)置。但是類似這樣的button的等，都難以用HTML的屬性設(shè)置實(shí)現(xiàn)。設(shè)計(jì)的初衷、HTML出現(xiàn)時(shí)所處的編程環(huán)境、軟件開發(fā)技術(shù)的不斷發(fā)展以及現(xiàn)在人們對(duì)于網(wǎng)頁(yè)風(fēng)格要求越來越高等是有很大關(guān)系的。要解決以上這些問題，CSS就是一個(gè)很好CSS什么是CSSCascadingStyleSheetsW3CCSS工作組制作和，CSS3.0。同HTML一樣，CSS語言是一種語言，它不需要編譯，可以直接由瀏覽器CSS文件也是一個(gè)文本文件，它包含了一些CSS（定義HTML如何呈現(xiàn)的規(guī)則，CSS文件必須使用css作為文件名后綴，CSS文件可以單獨(dú)存在，也可以嵌入到HTML文檔中，甚至可以嵌入到某個(gè)HTML中。CSS作CSS負(fù)責(zé)網(wǎng)頁(yè)內(nèi)容的表現(xiàn)，即外觀風(fēng)格的設(shè)計(jì)，至于網(wǎng)頁(yè)中HTML決定。通過CSS設(shè)置網(wǎng)頁(yè)及網(wǎng)頁(yè)中的外觀風(fēng)格，并不改動(dòng)HTML，只是通過添加CSS規(guī)則，而得到各種不同樣式的網(wǎng)頁(yè)。同一個(gè)CSS樣式，可以應(yīng)用于多個(gè)HTML，甚至是不同網(wǎng)頁(yè)中的多個(gè)HTML。如果這個(gè)CSS樣式對(duì)這些都生效，那么，這些就會(huì)有一致的外計(jì)的工作量會(huì)極大的減少，而且的工作量也會(huì)極大減少。CSS在幾乎所有的瀏覽器上都可以使用，且它們對(duì)于CSS中絕大部分樣式的解CSS設(shè)計(jì)出來的外觀風(fēng)格，瀏覽器兼容性非常現(xiàn)在我們制作的中，已經(jīng)很少有靜態(tài)了，大多數(shù)都是站，即DHTML，甚至是胖服務(wù)器端的交互型。DHTML與用戶的交互性及體驗(yàn)都比靜態(tài)要好得多，而DHTML的技術(shù)正是由HTML、CSS、JavaScript等幾種技 DHTML的組CSS首先，我們來體驗(yàn)一下CSS的。在如圖所示的頁(yè)面中有一個(gè)編輯框txt1，它是HTML默認(rèn)的呈現(xiàn)風(fēng)格，現(xiàn)在修改該網(wǎng)頁(yè)中關(guān)于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采用編輯框自身的屬性設(shè)置其寬度和高度信息，但是無法實(shí)現(xiàn)漂亮的外觀效果，txt2style屬性為其修改了邊框的呈現(xiàn)形式，并且為該編輯框在錄入文CSS的之所在。其中用到的是行內(nèi)CSS樣式。下面我們來正式開始學(xué)習(xí)CSS。CSSCSS樣式所處的位置分，CSS可以分為行內(nèi)樣式、內(nèi)嵌樣式、外部樣式。在這些樣式中，都可以應(yīng)用樣式屬性來設(shè)計(jì)HTML的風(fēng)格，如上面所述的“background-CSS語法中都有固定的寫法和用法，常用的樣式屬設(shè)置背景設(shè)置背景是否重語style樣式屬性1:1;樣式屬性2:行內(nèi)樣式以HTML的style屬性形式出現(xiàn)，style采用上述形式，在style屬性的值”的形式，前面代碼演示“CSS樣式使用演示”中所示“background-HTML的背景“url(Imagesa.gif)”就是為“background-image”屬性所設(shè)置的<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)樣式的適用場(chǎng)某個(gè)的風(fēng)格較為特別、特定或它的樣式不同于其它，并且可以不考慮它的樣式的可性，或?yàn)榱藦?qiáng)調(diào)該的顯示風(fēng)格等而采用行內(nèi)樣式。行內(nèi)樣式適用于當(dāng)前。一個(gè)不可以同時(shí)定義多個(gè)style屬性，一個(gè)style屬為諸多設(shè)置行內(nèi)樣式工作量會(huì)比較大，且可性差，除非有必要，否則應(yīng)慎示<htmlxmlns="<styletype="text/css">{}{}上述代碼，在<style2個(gè)樣式，一個(gè)應(yīng)用于<h1>標(biāo)另一個(gè)應(yīng)用于<body>，用于設(shè)置<body>的背景，為“images/bg2.gif。效果如<styetye='tctyle的<head的<ttle>下方，然也可內(nèi)于網(wǎng)頁(yè)的其它置，但是那樣做是不規(guī)范的。在該語句塊中typeS式的語句。另外有些低本的瀏器不能別<yle>現(xiàn)在基上可以考慮這個(gè)問題了，這意著低版的瀏覽會(huì)忽略tye里的容，并把tye 語{樣式屬性1=值樣式屬性2=}selector被稱為選擇器或選擇符，表示樣式設(shè)計(jì)所針對(duì)的或?qū)邮綁K的標(biāo)識(shí)（為CSSHTML選擇器、ID選HTML選擇E{}

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 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)論