久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

定義圖片的橫縱向?qū)R

網(wǎng)頁設(shè)計(jì)中,圖片的橫向?qū)R和文字的橫向?qū)R方法基本相同,分為左、中、右3種。不同的是圖片的對齊不能直接通過設(shè)置圖片的text-align屬性來定義,而是需要通過設(shè)置其父元素的該屬性,使其繼承text-align屬性來實(shí)現(xiàn)。

【示例】新建一個(gè)網(wǎng)頁,保存為test.html,在<body>標(biāo)簽中輸入以下代碼,并分別設(shè)置align屬性調(diào)整對齊方式。

<table width="100%" border="1">    

<tr>        

<td style="text-align:left;">

<img src="images/1.jpg"></td>    

</tr>    

<tr>        

<td style="text-align:center;">

<img src="images/1.jpg"></td>    

</tr>    

<tr>        

<td style="text-align:right;"><img src="images/1.jpg"></td>    

</tr>

</table>

定義圖片的縱向?qū)R

網(wǎng)頁設(shè)計(jì)時(shí),圖片的縱向?qū)R主要體現(xiàn)在和文字的搭配使用中,當(dāng)圖片的高度和寬度與文字部分不一致時(shí),可以通過CSS中的vertical-align屬性來設(shè)置縱向?qū)R。{vertical-align:參數(shù)}

【示例1】新建一個(gè)網(wǎng)頁,保存為test.html,在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式:

img {    border: 1px #990000 solid;      /*設(shè)置圖片邊框*/    

height: 50px;                   /*設(shè)置圖片高度*/}

然后在<body>標(biāo)簽中輸入一行段落文本,并應(yīng)用上面的類樣式。

<p class="baseline">縱向?qū)Rbaseline<img src="images/1.jpg" style="vertical-align:baseline" /></p>

<p class="sub">縱向?qū)Rsub:<img src="images/1.jpg" style="vertical-align:sub" /></p>

<p class="super">縱向?qū)Rsuper:<img src="images/1.jpg" style="vertical-align:super" /></p>

<p class="top">縱向?qū)Rtop:<img src="images/1.jpg" style="vertical-align:top" /></p>

<p class="middle">縱向?qū)Rmiddle:<img src="images/1.jpg" style="vertical-align:middle" /></p>

<p class="bottom">縱向?qū)Rbottom:<img src="images/1.jpg" style="vertical-align:bottom" /></p>>

【示例2】與文字的縱向?qū)R相似,圖片的縱向?qū)R也可以設(shè)置具體的數(shù)值。啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁,保存為test1.html,在<body>標(biāo)簽內(nèi)輸入如下結(jié)構(gòu):

<p>縱向?qū)R<img src="images/1.jpg" style="vertical-align:5px;">方式: 5px</p>

<p>縱向?qū)R<img src="images/1.jpg;" style="vertical-align:-20px;">方式: -20px</p>

<p>縱向?qū)R<img src="images/1.jpg" style="vertical-align:15px;">方式: 15px</p>

在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后定義如下兩個(gè)樣式:

p { font-size: 20px; }img {    

border: 1px #990000 solid;    

height: 80px;}

在瀏覽器中預(yù)覽測試,可以看出,圖片在垂直方向上發(fā)生了位移,在網(wǎng)站建設(shè)中,當(dāng)設(shè)置的值為正數(shù)時(shí),圖片向上移動(dòng)相應(yīng)的數(shù)值;當(dāng)設(shè)置為負(fù)數(shù)時(shí),圖片向下移動(dòng)相應(yīng)的數(shù)值。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)