1新建html文件2創(chuàng)建兩個div，并賦予id3為兩個div設(shè)置寬高和背景，并設(shè)置左右浮動4預(yù)覽效果如圖5創(chuàng)建第三個div6為第三個div設(shè)置寬高和背景7預(yù)覽效果如圖注意事項隨著HTML的成長，為了滿足。

1打開sublime text3，并且新建一個html文檔和一個css文檔2把最基本的html框架寫出來3在html的head部分寫上編碼字符集并引入css文件4在html的body里面寫一個div，打上文字并設(shè)置一個class名5在瀏覽器中。

向右偏移15%+22pxhtml 文件代碼清單如下lt！doctype html 向右偏移15%+22px CSS絕對定位向右偏移15%+22px lt。

在瀏覽器中打開2利用CSS樣式右移針對第二種情況，可以利用css樣式來讓圖片在原來位置的基礎(chǔ)上向右偏移給定值距離修改第一張圖片代碼如下style=positionrelativeleft10px表示圖像在原有位置的基礎(chǔ)上向右移動10PX。

其中marginleft就是css中設(shè)置外邊距的，10px就是你要設(shè)置的距離。

向左移動當(dāng)然是正數(shù)left50px向下移動當(dāng)然是正數(shù)top50px這樣記既然要向下移動，當(dāng)然是要遠(yuǎn)離top頂部了，自然top的屬性值要正數(shù)既然要向右移動，就是遠(yuǎn)離左邊了，left屬性值自然要為正數(shù)。

可以設(shè)置大盒子的paddingtop和paddingleft把里面內(nèi)容向右邊和下面擠過去，還可以將外面大盒子的position設(shè)置為relative，然后設(shè)置left和top值，讓其位置向下和向右，不懂可以將你的代碼私信給我，我?guī)湍憧纯矗僮鼍唧w分析。

舉個例子，假設(shè)你有一個段落元素 ，你想將其向右移動100px如果你這樣寫CSS代碼css p textindent 100px 那么實際上，你只是將 元素內(nèi)的第一行文本向右縮進(jìn)了100px，而不是將整個 元素向右移動如果你真的。

來實現(xiàn)圖片向左移動當(dāng)鼠標(biāo)移動到“向右”按鈕上時，則通過調(diào)用向右滾動的代碼，來實現(xiàn)圖片向右移動當(dāng)鼠標(biāo)移動到圖片上時，則圖片不動二雖然通過“向左”“向右”兩個按鈕，實現(xiàn)了圖片的左移和右移，但我想要的。

2在圖片代碼里面加上margin屬性往右移就marginleft，往左移動就marginright3給圖片加個class用相對定位做就可以了例imgPlace positionrelative top5pxleft5px*right5pxbottom5px**positi。

你用dreamweavercs4的那里有現(xiàn)成的，直接在編輯器里創(chuàng)建就行了，具體步驟插入spry菜單欄，選項卡式面板，折疊式等，很多然后如果你會css+p的話可以把他們放到你想用的位置，找到相應(yīng)代碼修改下你想要的顏色就可以了。

backgroundposition top left 可以用負(fù)值 您需要把 backgroundattachment 屬性設(shè)置為 quotfixedquot，才能保證該屬性在 Firefox 和 Opera 中正常工作。

有動畫效果的是css3的transition@keyframesanimation等，css要鼠標(biāo)移上去后改變狀態(tài)只能用hover偽類，暫停動畫可以用設(shè)置animationplaystatepaused，繼續(xù)動畫是animationplaystaterunning 可能需要設(shè)置添加webkit等。

6為第三個div設(shè)置寬高和背景7預(yù)覽效果如圖注意事項隨著HTML的成長，為了滿足頁面設(shè)計者的要求，HTML添加了很多顯示功能但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫于是CSS便誕生了。

CSS 浮動 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣CSS 浮動 請看下圖，當(dāng)把框 1 向右。

居中顯示，可以在圖片的父元素，設(shè)置CSStextaligncenter。