網(wǎng)頁(yè)設計中的百分數值

  • 2019-01-24 18:34:28
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

百分數值

網(wǎng)站建設中百分數值與關(guān)鍵字緊密相關(guān),不過(guò)其表現方式更為復雜。假設網(wǎng)站建設人員希望用百分數值將原圖像在其元素中居中。這很容易:

p{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-position:50% 50%;}

這會(huì )導致原圖像適當放置,其中心與其元素的中心對齊。換句話(huà)說(shuō),百分數值同時(shí)應用于元素和原圖像。

下面更詳細地分析這個(gè)過(guò)程。將原圖像在一個(gè)元素中居中時(shí),圖像中描述為50% 50%的點(diǎn)(中心點(diǎn))與元素中描述為50% 50%的點(diǎn)(中心點(diǎn))對齊。如果圖像位于0%0%,

其左上角將放在元素內邊厙區的左上角。如果圖像位置是100% 100%,會(huì )使原圖像的右下角放在內邊距區的右下角:

p{background-image:url(oransqr.gif);background-repeat:no-repeat;

padding:Spx;border:1px dotted gray;}

p.cl{background-position:0%0%;}

p.c2(background-position:50%50%;}

p.c3{background-position:100%100%;}

p.c4{background-position:0%100%;}

p.c5{background-position:100%0%;}

因此,如果網(wǎng)頁(yè)設計者想將一個(gè)原圖像放在水平方向1/3。垂直方向2/3處,可以聲明如下:

p{background-image:url(bigyinyang.gif);

background-repeat:no-repeat;

background-positiori:33% 66%;}

利用這些規則,原圖像中從圖像左上角水平向右1/3、垂直向下2/3處的點(diǎn)將與離包含元素左上角最遠的點(diǎn)對齊。注意,如果用百分數設置位置,水平值總是先出現。如果在上例中將百分數值的順序換一下,圖像將放在元素中水平向右2/3、垂直向下丨/3處。

如果只提供了一個(gè)百分數值,所提供的這個(gè)值將用作為水平值,垂直值假設為50%,這與關(guān)鍵字類(lèi)似,即如果只指定了一個(gè)關(guān)鍵字,另一個(gè)關(guān)鍵字則假設為center。例如:

p(background-image:url(yinyang.gif);

background-repeat:no-repeat;

background-position:25%;}

原圖像位于元素內容區和內邊距區水平向右1/4,垂直向下1/2處。

等價(jià)關(guān)鍵字

等價(jià)百分數

center

center center

50% 50%

50%

top

top center

center top

50% 0%

bottom

bottom center

center bottom

50% 100%

right

center right

100% 50%

right center

100%

left

center left

0% 50% 

left center

0% 

top left

left top

0% 0%

top right

right top

100% 0%

bottom right

right bottom

100% 100%

bottom left

left bottom

0% 100%

你在建設網(wǎng)站可能會(huì )奇怪,background-position的默認值是0% 0%,這在功能上就相當于top left。正是因為這個(gè)原因,背景圖像總是從元素內邊距區的左上角開(kāi)始平鋪,除非你設置了不同的位置值。

當前文章標題:網(wǎng)頁(yè)設計中的百分數值

當前URL:http://amzcoolest.com/news/wzzz/percentages.html

上一篇:網(wǎng)頁(yè)設計中的關(guān)鍵字

下一篇:網(wǎng)頁(yè)設計中的長(cháng)度值

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看