通過代碼實例跟我學css樣式單技術的應用實例第4部分——xhtml頁面中的div和span標簽的應用及實例-資料下載頁
2025-11-07 17:25本頁面
【導讀】行任何格式化渲染，而完全由CSS樣式表定義它們的顯示風格。因此，經常應用它們實現(xiàn)頁。所有的HTML標簽元素，要么是block、要么是inline（內聯(lián)。內聯(lián)標簽元素一般都是基于語義級的基本標簽元素，在。<span>、<label>、<input>、<img>、<strong>和<em>等；常見的塊標簽元素有：<p>、<form>、<table>、<div>、<h1>、<h2>、<h3>、<ul>和<li>等，在塊標簽元素內只能容納其它的塊標。標簽是塊級別的元素，默認顯示時將獨占一行。<div>標簽所在區(qū)域的寬度、高度、文字的行。它的實際寬高是本身的寬高值+padding項目的定義。它的寬、高、文字的行高及頂和底外邊距等都是不可改變的——不可以響應垂直margin、在“文檔”窗口中，將插入點放置在要顯示div標簽的位置。并執(zhí)行下列操作：選擇“插。入”>“布局對象”>“Div標簽”。<div>標簽以一個框的形式出現(xiàn)文檔中，并帶有占位符文本。將指針移到該框上時，Dreamweaver會高亮顯示該框。1)修正IE6等瀏覽器中浮動元素的雙邊距問題；2)希望能夠水平放置多個不同的塊級標簽對象元素而不需要應用“float”的定義；
【正文】 ，并且操作者不能與它進行交互。 （ 2） 行為 可以利用 JavaScript 編程實現(xiàn) !DOCTYPE html PUBLIC //W3C//DTD XHTML Transitional//EN html xmlns= head meta equiv=ContentType content=text/html。 charset=gb2312 / title網上書店查詢頁面 /title script language=javascript function searchFormSubmit(){ if([0].checked){ = } else if([1].checked){ = } else{ = } } 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 18/20 頁 18 function hiddenAll(){ if([0].checked){ = none。 = none。 } } function showSearch(){ if([1].checked) { = 。 = none。 } else{ = none。 } } function showKeyWord(){ if([2].checked){ = 。 = none。 } else{ = none。 } } /script /headbodyform name=searchForm action= method=post onClick=searchFormSubmit() input type=radio name=radioButtonEvent onclick=hiddenAll()checked查看所楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 19/20 頁 19 有圖書 br input type=radio name=radioButtonEvent onclick=showSearch()精確搜索 br table id=showSearchTable style=display:none border=1 bgcolor=FF0000 trtd 書名 ： /tdtdinput type=text name=title onMouseOver=() onFocus=()/td/tr trtd 作者 ： /tdtdinput type=text name=author onMouseOver=() onFocus=()/td/tr trtd 出版社 ： /tdtdinput type=text name=bookconcern onMouseOver=() onFocus=()/td/tr /tablebr input type=radio name=radioButtonEvent onclick=showKeyWord()關鍵字搜索 br table id=showKeyWordTable style=DISPLAY:none border=1 bgcolor=6699CC trtd 請 輸 入 關 鍵 字 ： /tdtdinput type=text name=keyword/td/tr /table input type=reset value=重新輸入 input type=submit value=搜索 /form/body/html （ 3）瀏覽后的各個結果圖示 對比下面的兩種實現(xiàn)方式的差別理解 CSS 的“結構”和“表現(xiàn)”分離的意義 （ 1）用 CSS 排版的一組圖像 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 20/20 頁 20 style type=text/css photoList img{ height:80。 width:100。 margin:5px auto。 } /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)方法是“結構”、“表現(xiàn)”相分離的結果，其中的內容部分代碼是比較簡單的。如果還有更多的圖片列表的話，那么第一種 CSS 布局方法就更有優(yōu)勢。
教學課件相關推薦
鄂ICP備17016276號-1