通過代碼實例跟我學css樣式單技術(shù)的應用實例第4部分——xhtml頁面中的div和span標簽的應用及實例-閱讀頁
2024-12-06 17:25本頁面
【正文】 。 float:left。 } webmenubar span a:hover { background:eee。 } 因此，應用 span標簽能夠簡化 CSS 樣式項目的定義。在應用“ CSS+Div”實現(xiàn)頁面的結(jié)構(gòu)化時，并不是一定要采用 Div 標簽，也可以應用其它的塊級元素標簽。抽象一點理解，內(nèi)容是基礎(chǔ)層，然后是附加上去結(jié)構(gòu)層和表現(xiàn)層， 最 后再對它們做點“行為”控制。 （ 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)，這些信息只是很簡單的堆砌在一起，閱讀的時候覺得很不舒服，這樣的話，信息就不能很明確的傳達給讀者了。 結(jié)構(gòu)（ Structure）由 XHTML 標簽中的 div或者其它結(jié)構(gòu)標簽定義 （ 1） 結(jié)構(gòu)使內(nèi)容更加具有邏輯性 和 易用性 在頁面 內(nèi)容中 提供 標題、作者、章、節(jié)、段落和列表 或者如下圖所示將表單中的控件進行分組顯示，其實就是進行結(jié)構(gòu)設(shè)計 。每對標簽和輸入框垂直對齊給人一種兩者接近的感覺，并且一致的左對齊減少了眼睛移動和處理時間 ，其實也是結(jié)構(gòu)設(shè)計 。如果想要使 用戶有 更好的閱讀頁面內(nèi)容，我們不妨對頁面進行美化：設(shè)置字體、顏色、對齊方式、添加背景等等。 （ 2）對前面的內(nèi)容進行“美化”的示例 form name=searchForm action= method=post input type=radio name=radioButtonEvent checked 查看所有圖書 br brbr input type=radio name=radioButtonEvent 精確搜索 table id=showSearchTable style=display:inline border=1 bgcolor=FF0000 trtd書名 ： /tdtdinput type=text name=title/td/tr trtd作者 ： /tdtdinput type=text name=author/td/tr trtd 出 版 社 ： /tdtdinput type=text name=bookconcern/td/tr /tablebr brbr input type=radio name=radioButtonEvent 關(guān)鍵字搜索 table id=showKeyWordTable style=DISPLAY: inline border=1 bgcolor=6699CC tr trtd 請 輸 入 關(guān) 鍵 字 ： /tdtdinput type=text name=keyword/td/tr /table input type=reset value=重新輸入 input type=submit value=搜索 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 17/20 頁 17 /form 行為 （ Behavior，動作或者操作）由 JavaScript 腳本程序控制 （ 1） 行為就是對內(nèi)容的交互及操作 可以看到 ， 上圖 中的內(nèi)容 經(jīng)過處理和美化以后 ，該 頁面 中的內(nèi)容 更加美觀和易于觀看了。 （ 2） 行為 可以利用 JavaScript 編程實現(xiàn) !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns= head meta equiv=ContentType content=text/html。 = none。 = none。 } } function showKeyWord(){ if([2].checked){ = 。 } else{ = none。 width:100。 } /style div id=photoList img src= / img src= / img src= / img src= / img src= / /div （ 2）不用 CSS 排版的同樣的一組圖像 img src= width=100 height=80 align=middle / img src= width=100 height=80 align=middle / img src= width=100 height=80 align=middle / img src= width=100 height=80 align=middle / img src= width=100 height=80 align=middle / 第一種實現(xiàn)方法是“結(jié)構(gòu)”、“表現(xiàn)”相分離的結(jié)果，其中的內(nèi)容部分代碼是比較簡單的。
教學課件相關(guān)推薦
鄂ICP備17016276號-1