通過(guò)代碼實(shí)例跟我學(xué)css樣式單技術(shù)的應(yīng)用實(shí)例第4部分——xhtml頁(yè)面中的div和span標(biāo)簽的應(yīng)用及實(shí)例(編輯修改稿)
2024-12-22 17:25 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 楊教授工作室，版權(quán)所有，盜版必究 ， 10/20 頁(yè) 10 lia href= 系統(tǒng)注冊(cè) /a/li lia href= 找回密碼 /a/li lia href= 在線幫助 /a/li /ul /div div id=webpagecontent/div div id=webstateinfo/div div id=webauthorarea/div /body /html 與該頁(yè)面文件相關(guān)的 文件內(nèi)容 /* 重置菜單欄中的 li 標(biāo)簽的屬性的默認(rèn)值 */ webmenubar ul li { display:inline。 margin:0 10px 0 0。 liststyletype:none。 } webmenubar ul li a { color: 333。 display:block。 float:left。 padding:5px。 } webmenubar ul li a:hover { background:eee。 color:black。 } 要將 li標(biāo)簽 中的 各個(gè) 元素水平排列 ，需要對(duì)該元素應(yīng)用 float:left 屬性定義項(xiàng)目。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 11/20 頁(yè) 11 （ 3）在瀏覽器中的預(yù)覽的效果 在 Macromedia Dreamweaver 工具中如何 編輯修改和設(shè)計(jì) CSS 樣式 通過(guò)幫助了解每個(gè)屬性項(xiàng)目的含義 充分應(yīng)用可視化方式進(jìn)行設(shè)置，簡(jiǎn)化設(shè)計(jì)過(guò)程 上面的示例的另一種實(shí)現(xiàn)方法 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/20 頁(yè) 12 （ 1） HTML 標(biāo)簽 div id=weblogo/div div id=webmenubar span a href= 返回首頁(yè) /a/span span a href= 登陸系統(tǒng) /a/span spana href= 系統(tǒng)注冊(cè) /a/span spana href= 找回密碼 /a/span spana href= 在線幫助 /a/span /div div id=webpagecontent/div div id=webstateinfo/div div id=webauthorarea/div （ 2）對(duì)應(yīng)的 CSS 項(xiàng)目 webmenubar span a { color: 333。 display:block。 float:left。 padding:5px。 } webmenubar span a:hover { background:eee。 color:red。 } 因此，應(yīng)用 span標(biāo)簽?zāi)軌蚝?jiǎn)化 CSS 樣式項(xiàng)目的定義。 “ CSS+Div”并不是一定要采用 Div 標(biāo)簽 盡管 DIV 標(biāo)簽是塊級(jí)元素標(biāo)簽，而 P 標(biāo)簽也是塊級(jí)元素標(biāo) 簽。在應(yīng)用“ CSS+Div”實(shí)現(xiàn)頁(yè)面的結(jié)構(gòu)化時(shí)，并不是一定要采用 Div 標(biāo)簽，也可以應(yīng)用其它的塊級(jí)元素標(biāo)簽。 例如要分出幾個(gè)文字內(nèi)容塊，不是一定要用 DIV 才叫 DIV 排版，比如如下的示例： 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/20 頁(yè) 13 div文字塊一 /div div文字塊二 /div div文字塊三 /div 也可以改為如下的實(shí)現(xiàn)方式，而且更合適： p文字塊一 /p p文字塊二 /p p文字塊三 /p 理解 Web 表現(xiàn)和結(jié)構(gòu) （ 內(nèi)容 ） 相分離 的意義 所有 HTML 和 XHTML 頁(yè)面就是由“結(jié)構(gòu) （內(nèi)容） 、表現(xiàn)和行為”這三方面組成 的。抽象一點(diǎn)理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層， 最 后再對(duì)它們做點(diǎn)“行為”控制。 內(nèi)容（ Content）由 XHTML 標(biāo)簽中的 div或者其它包裝內(nèi)容的標(biāo)簽定義 （ 1） 內(nèi)容就是頁(yè)面實(shí)際要傳達(dá)的真正信息 它主要 包含數(shù)據(jù)、文檔或者圖片 、 音樂(lè)、視頻、文檔 等 形式 —— 內(nèi)容是頁(yè) 面文檔所 要傳達(dá)的信息。 （ 2）某個(gè)頁(yè)面利用表單包裝內(nèi)容的示例 form name=searchForm action= method=post input type=radio name=radioButtonEvent checked查看所有圖書 input type=radio name=radioButtonEvent 精確搜索 input type=radio name=radioButtonEvent 關(guān)鍵字搜索 書名 ： input type=text name=title/td 作者 ： input type=text name=author 出版 社 ： input type=text name=bookconcern 請(qǐng)輸入關(guān)鍵字 ： input type=text name=keyword input type=reset value=重新輸入 input type=submit value=搜索 /form 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 14/20 頁(yè) 14 （ 3）該內(nèi)容在顯示時(shí)所存在的主要問(wèn)題 雖然，信息都呈現(xiàn)出來(lái)了，但是我們可以發(fā)現(xiàn)，這些信息只是很簡(jiǎn)單的堆砌在一起，閱讀的時(shí)候覺(jué)得很不舒服，這樣的話，信息就不能很明確的傳達(dá)給讀者了。如果將頁(yè)面內(nèi)容進(jìn)行整理 —— 標(biāo)出它的標(biāo)題、段落 或者分類顯示 等，這樣的結(jié)構(gòu)有助于我們認(rèn)清文字之間的邏輯關(guān)系，也使內(nèi)容更便于閱讀和理解 或者操作 。 結(jié)構(gòu)（ Structure）由 XHTML 標(biāo)簽中的 div或者其它結(jié)構(gòu)標(biāo)簽定義 （ 1） 結(jié)構(gòu)使內(nèi)容更加具有邏輯性 和 易用性 在頁(yè)面 內(nèi)容中 提供 標(biāo)題、作者、章、節(jié)、段落和列表 或者如下圖所示將表單中的控件進(jìn)行分組顯示，其實(shí)就是進(jìn)行結(jié)構(gòu)設(shè)計(jì) 。 再比如 輸入框 要 劃分為組 （版塊或者區(qū)域劃分），同時(shí) 考慮到用戶完成表單填寫的時(shí)間應(yīng)當(dāng)盡可能的短，并且收集的數(shù)據(jù)都是用戶所熟悉的（比如姓名、地址、付費(fèi)信息等），垂直對(duì)齊的標(biāo)簽和輸入框可以說(shuō)是最佳的。每對(duì)標(biāo)簽和輸入框垂直對(duì)齊給人一種兩者接近的感覺(jué)，并且一致的左對(duì)齊減少了眼睛移動(dòng)和處理時(shí)間 ，其實(shí)也是結(jié)構(gòu)設(shè)計(jì) 。 （ 2）早期的頁(yè)面結(jié)構(gòu)設(shè)計(jì)方式是采用 表格進(jìn)行布局 form name=searchForm action= method=post input type=radio name=radioButtonEvent che
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1