jsp定位樣式（css定位樣式）

• 1、jsp html 給元素 定位
• 2、jsp怎麼控制圖片位置啊？
• 3、jsp里如何設置按鈕或者表格的位置
• 4、jsp頁面。裡面有一個div高度是9000，沒看錯是9000，現在想這個jsp一打開就定位到這個div容器的中間部分。
• 5、在jsp頁面定義CSS樣式怎麼寫?

html給元素定位用jquery的選擇器。

下面是常用的jquery選擇器：

$(“#myELement”) 選擇id值等於myElement的元素，id值不能重複在文檔中只能有一個id值是myElement所以得到的是唯一的元素

$(“div”) 選擇所有的div標籤元素，返回div元素數組

$(“.myClass”) 選擇使用myClass類的css的所有元素

$(“*”) 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$(“#myELement,div,.myclass”)

1、層疊選擇器：

$(“form input”) 選擇所有的form元素中的input元素

$(“#main *”) 選擇id值為main的所有的子元素

$(“label + input”) 選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標籤後面直接跟一個input標籤的所有input標籤元素

$(“#prev ~ div”) 同胞選擇器，該選擇器返回的為id為prev的標籤元素的所有的屬於同一個父元素的div標籤

2、基本過濾選擇器：

$(“tr:first”) 選擇所有tr元素的第一個

$(“tr:last”) 選擇所有tr元素的最後一個

$(“input:not(:checked) + span”)

過濾掉：checked的選擇器的所有的input元素

$(“tr:even”) 選擇所有的tr元素的第0，2，4… …個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）

$(“tr:odd”) 選擇所有的tr元素的第1，3，5… …個元素

$(“td:eq(2)”) 選擇所有的td元素中序號為2的那個td元素

$(“td:gt(4)”) 選擇td元素中序號大於4的所有td元素

$(“td:ll(4)”) 選擇td元素中序號小於4的所有的td元素

$(“:header”)

$(“div:animated”)

3、內容過濾選擇器：

$(“div:contains(‘John’)”) 選擇所有div中含有John文本的元素

$(“td:empty”) 選擇所有的為空（也不包括文本節點）的td元素的數組

$(“div:has(p)”) 選擇所有含有p標籤的div元素

$(“td:parent”) 選擇所有的以td為父節點的元素數組

4、可視化過濾選擇器：

$(“div:hidden”) 選擇所有的被hidden的div元素

$(“div:visible”) 選擇所有的可視化的div元素

5、屬性過濾選擇器：

$(“div[id]”) 選擇所有含有id屬性的div元素

$(“input[name=’newsletter’]”) 選擇所有的name屬性等於’newsletter’的input元素

$(“input[name!=’newsletter’]”) 選擇所有的name屬性不等於’newsletter’的input元素

$(“input[name^=’news’]”) 選擇所有的name屬性以’news’開頭的input元素

$(“input[name$=’news’]”) 選擇所有的name屬性以’news’結尾的input元素

$(“input[name*=’man’]”) 選擇所有的name屬性包含’news’的input元素

$(“input[id][name$=’man’]”) 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素

6、子元素過濾選擇器：

$(“ul li:nth-child(2)”),$(“ul li:nth-child(odd)”),$(“ul li:nth-child(3n + 1)”)

$(“div span:first-child”) 返回所有的div元素的第一個子節點的數組

$(“div span:last-child”) 返回所有的div元素的最後一個節點的數組

$(“div button:only-child”) 返回所有的div中只有唯一一個子節點的所有子節點的數組

7、表單元素選擇器：

$(“:input”) 選擇所有的表單輸入元素，包括input, textarea, select 和 button

$(“:text”) 選擇所有的text input元素

$(“:password”) 選擇所有的password input元素

$(“:radio”) 選擇所有的radio input元素

$(“:checkbox”) 選擇所有的checkbox input元素

$(“:submit”) 選擇所有的submit input元素

$(“:image”) 選擇所有的image input元素

$(“:reset”) 選擇所有的reset input元素

$(“:button”) 選擇所有的button input元素

$(“:file”) 選擇所有的file input元素

$(“:hidden”) 選擇所有類型為hidden的input元素或表單的隱藏域

8、表單元素過濾選擇器：

$(“:enabled”) 選擇所有的可操作的表單元素

$(“:disabled”) 選擇所有的不可操作的表單元素

$(“:checked”) 選擇所有的被checked的表單元素

$(“select option:selected”) 選擇所有的select 的子元素中被selected的元素

選取一個 name 為”S_03_22″的input text框的上一個td的text值

$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”開始，並且不是以”_R”結尾的

$(”input[@ name ^=’S_’]“).not(”[@ name $=’_R’]“)

一個名為 radio_01的radio所選的值

$(”input[@ name =radio_01][@checked]“).val();

jsp控制圖片的位置是通過css樣式實現的。

使用CSS max-width和max-height實現圖片自動等比例縮小

要使用到max-width和max-height,這樣即可設置對象圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖片相對不變形清晰。

舉例說明：

!DOCTYPE html

html

head

meta charset=”utf-8″ /

title圖片縮小不變形實例/title

style

.divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}

.divcss5 img{max-width:300px;_width:expression(this.width 300 ? “300px” : this.width);}

/style

/head

body

div class=”divcss5″

img src=”img.jpg” /

/div

/body

/html

jsp里設置按鈕或者表格的位置可以通過div進行調整

用絕對定位還是要相對定位，參數如下：

Relative 相對定位：left 和top

position: relative;/*相對定位*/

left:40px;/*在原來的位置向右移動*/

top:100px;/*在原來的位置向下移動*/

他的參照點是他原來位置

Absolute 絕對定位：元素從原來的位置脫離，讓出原來的空間，同時相對於他所

存在的離自己最近的非標準流的盒子而言的

position: absolute;/*絕對定位*/

left:40px;/*在原來的位置向右移動*/

top:100px;/*在原來的位置向下移動*/

他的參照點是他原來位置

Fixed 只根據body的絕對定位

使用絕對定位：

當前div給定樣式 position:absolute; 創建一個HTML元素，設定name值，並給定樣式 position:relative;top:50%;

這樣就可以使用錨點連接 直接定位到新創建的元素位置，即為中間位置

1、打開WebContent文件。

2、導入自己的css文件。

3、創建自己的jsp文件。

4、添加引用css文件的代碼。

5、link href=”%=request.getContextPath()%/css/css.css” rel=”stylesheet”(可複製使用,複製以後路徑要進行修改) ，標紅的地方是css文件路徑，填對自己的路徑。

6、還可以導入自己喜歡的圖片到img文件。

7、打開css.css文件，編輯將圖片名稱，輸入至該位置。