寫(xiě)網(wǎng)頁(yè)時(shí)的心得

1.插入圖片的相關(guān)操作:

我一開(kāi)始寫(xiě)入圖片的時(shí)候是用單獨(dú)的圖片,這樣操作并不難

<img src="smiley.gif" alt="Smiley face" width="32" height="32">

就這樣你就可以完成一個(gè)圖片的插入,但如果你的網(wǎng)頁(yè)有很多圖片時(shí),這樣的操作費(fèi)時(shí)費(fèi)力還不討好,因?yàn)閳D片太多,網(wǎng)頁(yè)加載的速度就會(huì)降低,為了避免這種效果,我們可以用單獨(dú)的一個(gè)圖片來(lái)加載全部圖片,這里就用到了圖象拼合技術(shù)。

<body>

<img class="home" src="/images/img_trans.gif">

<body>

<style>

img.home

{

width:46px;

height:44px;

background:url(img_navsprites.gif) 0 0;

}

<style>

我們用坐標(biāo)定位想要的的那部分,但我們有了總的大圖后,剩下的操作就是確定圖片的坐標(biāo),可以用ps來(lái)確認(rèn)坐標(biāo),ps的窗口欄里點(diǎn)擊信息,可以查看某一點(diǎn)的坐標(biāo)。

2.定位問(wèn)題:

position 屬性的五個(gè)值:

static? relative? fixed? absolute? sticky

靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。

static 定位:

div.static {

? ? position: static;

? ? border: 3px solid #73AD21;

}

relative 定位:

相對(duì)定位元素的定位是相對(duì)其正常位置。

h2.pos_left

{

? ? position:relative;

? ? left:-20px;

}

h2.pos_right

{

? ? position:relative;

? ? left:20px;

}

fixed 定位

元素的位置相對(duì)于瀏覽器窗口是固定位置。

即使窗口是滾動(dòng)的它也不會(huì)移動(dòng):

p.pos_fixed

{

? ? position:fixed;

? ? top:30px;

? ? right:5px;

}

absolute 定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素,如果元素沒(méi)有已定位的父元素,那么它的位置相對(duì)于<html>:

h2

{

? ? position:absolute;

? ? left:100px;

? ? top:150px;

}

absolute 定位使元素的位置與文檔流無(wú)關(guān),因此不占據(jù)空間,absolute 定位的元素和其他元素重疊。


sticky 定位

sticky 英文字面意思是粘,粘貼,所以可以把它稱之為粘性定位。position: sticky; 基于用戶的滾動(dòng)位置來(lái)定位。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容