1首先，打開(kāi)html編輯器，新建html文件，例如indexhtml2在indexhtml中的ltimg標(biāo)簽中，加入樣式代碼style=quotfloatrightquot3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)圖片被放在html中的右邊了。

首先創(chuàng)建一個(gè)大的div包含起來(lái)，然后設(shè)置寬和高，之后使用img標(biāo)簽將圖片引入，然后設(shè)置圖片的寬和高，也可以設(shè)置圖片的float屬性浮動(dòng)屬性。

1首先要排列的四張照片放置到同一個(gè)文件夾中，并打開(kāi)電腦中運(yùn)行html的軟件2其次點(diǎn)擊界面中的文件編輯欄，選擇排列，點(diǎn)擊浮點(diǎn)排列3最后在彈出的頁(yè)面中，點(diǎn)擊四張圖片，并將排列行數(shù)設(shè)定為兩行即可。

在html中實(shí)現(xiàn)圖片排版的方法1在敲代碼前，先想好結(jié)構(gòu)，最后先在紙上畫(huà)出一個(gè)結(jié)構(gòu)在此例中，可以將其分為一個(gè)整體的三部分，上左右部分，最上方為標(biāo)題欄，下面左側(cè)可以放置圖片，右側(cè)是文字搭配然后我們打開(kāi)DW。

ltstyle type=quottextcssquot html，body，ul margin0 padding0 li liststyle piclist width500px height500px margin200px auto piclist li width100px height100px floatleft。

第一種方法 添加一個(gè)DIV，采用絕對(duì)定位，圖片所屬DIV為基準(zhǔn) ltdiv style=quotpositionrelativewidth100pxheight100pxquot ltimg src=quotquot alt=quotquot ltdiv style=quotpositionabsolutewidth100pxheight100pxz。

一是用表格元素，對(duì)每張圖片進(jìn)行定位lttablelttr lttdltimg src=pic1jpg border=0lttd lttdltimg src=pic2jpg border=0lttd lttrlttable 二使用有序列表ltliltli列表，通過(guò)自定義樣式實(shí)現(xiàn)。

這個(gè)簡(jiǎn)單啊，直接在html中使用多個(gè)img標(biāo)簽導(dǎo)入多個(gè)圖片即可，因?yàn)閕mg是行內(nèi)元素，只要外盒子的寬足夠，那么導(dǎo)入的圖片就會(huì)是一排。

ltdiv class=quotimgboxquot ltimg src=quotquotltimg src=quotquotltdiv代碼如上所示，圖片默認(rèn)是豎直排列，你想要的應(yīng)該是水平橫排列，只需要在css中添加如下樣式 imgboxoverflowhiddenimgbox imgfloatleft其中第一個(gè)。

這個(gè)應(yīng)該是比較好弄的你讓它們都floatleft了是吧你知道float這個(gè)樣式就好說(shuō)多了你可以把中間那三個(gè)圖片放到一個(gè)ltdiv里，把最左邊和最右邊那個(gè)圖片也分別放到ltdiv里，之后給這三個(gè)DIV加floatleft應(yīng)該就好了如。

并排放置的方法有很多簡(jiǎn)單的可以考慮直接放置2張圖片，因?yàn)閕mg是內(nèi)聯(lián)元素也可以考慮用table實(shí)現(xiàn)，在2個(gè)單元格當(dāng)中放置圖片，并設(shè)置垂直對(duì)齊方式如果使用css樣式實(shí)現(xiàn)，可以考慮用float，flex，grid等排列方式。

第一步，使用JS點(diǎn)擊事件，點(diǎn)擊其中一張，改變其它圖片的樣式 第二步，要讓圖片呈現(xiàn)灰色，在樣式中加入濾鏡。

1新建html文檔2書(shū)寫(xiě)hmtl代碼 lt！ 橫向排列 ， ltdiv id=quotnavquot，ltdiv id=quotbox1quot1ltdiv，ltdiv id=quotbox2quot2ltdiv，ltdiv id=quotbox3quot3ltdiv，ltdiv3初始化css代碼ltstyle。

紅的是背景圖，黑的導(dǎo)航欄部分根本不是圖片，就一個(gè)背景色先去看點(diǎn)入門(mén)教程練會(huì)了再動(dòng)手吧，騷年ltheader id=quottopquot lthgroup lth1XX的博客lth1 lth2旅游感悟lth2 lthgroupltheaderlt。

6在css標(biāo)簽內(nèi)，設(shè)置圖片的的大小，寬度為280px，高度為200px，為了使用圖片水平排列，需要使用float屬性設(shè)置圖片浮動(dòng)的統(tǒng)一方向，例如，這里設(shè)置統(tǒng)一浮動(dòng)向左7在瀏覽器打開(kāi)testhtml文件，查看圖片水平排列的效果。

1可以使用backgroundposition屬性設(shè)置圖片位置，具體的方法是，首先用hbuilder軟件新建一個(gè)html文件，文件的head標(biāo)簽中設(shè)置輸入style標(biāo)簽2然后設(shè)置body的樣式，給body加一張圖片，設(shè)置為不重復(fù)，設(shè)置backgroundposition屬性。

把圖片調(diào)小，然后設(shè)置backgroundrepeat repeat或者直接在css里設(shè)置背景圖的大小backgroundsize50%這樣背景圖片就可以排成兩列 了。

2為了展示隱藏圖片后的效果，在img標(biāo)簽的外部使用div標(biāo)簽，同時(shí)設(shè)置div標(biāo)簽的class屬性為mydiv3在testhtml文件內(nèi)，編寫(xiě)ltstyle type=quottextcssquotltstyle標(biāo)簽，頁(yè)面的css樣式將寫(xiě)在該標(biāo)簽內(nèi)4在css標(biāo)簽內(nèi)，設(shè)置。