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)定位。