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