日本高清视频WWW在线观看,蜜桃精品久久久久久久久久,国产亚洲一区久久观看

當(dāng)前位置：

發(fā)布時(shí)間：2018-09-25

文章編輯：網(wǎng)站建設(shè) 文章來(lái)源：建站行業(yè)資訊瀏覽量：次

網(wǎng)站制作對(duì)于圖像排列方式的處理技巧，深圳網(wǎng)站設(shè)計(jì)前端工程師在上篇文章中我們分享了圖文混排的經(jīng)驗(yàn)，本文繼續(xù)與大家分享在網(wǎng)頁(yè)設(shè)計(jì)時(shí)如何多圖水平排列。設(shè)計(jì)多圖水平排列，在網(wǎng)頁(yè)中，經(jīng)常能見到多張圖片排列的情況，在本例中，將介紹對(duì)于多圖排列的設(shè)置，并進(jìn)步了解css設(shè)置圖片的方法。本例的演示效果如圖5-46所示。

圖5-46多圖排列效果

網(wǎng)頁(yè)設(shè)計(jì)多圖排列【操作步驟】

第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index. html.。

第2步，構(gòu)建網(wǎng)頁(yè)的基本結(jié)構(gòu)。本例中首先用<div>標(biāo)簽設(shè)置container容器，然后分別用<div>標(biāo)簽將頁(yè)面分為4塊，每塊中包含個(gè)

<img>標(biāo)簽、一個(gè)<a>標(biāo)簽和一個(gè)<p>標(biāo)簽。

此時(shí)的顯示效果極其簡(jiǎn)單，僅僅是簡(jiǎn)單的圖片和標(biāo)題，如圖5-47所示。

網(wǎng)頁(yè)基本結(jié)構(gòu)，未加入css語(yǔ)句

第3步，定義網(wǎng)頁(yè)基本屬性及container容器的樣式。

首先在bodv中定義了四周補(bǔ)白以及內(nèi)邊距為。。在container中定義container下所有元素的水平對(duì)齊方式為居中對(duì)齊，定義了coutaiuer的寬度、高度以及邊框樣式。background-image:url(bg. jpg)語(yǔ)句的作用是為container標(biāo)簽添加名為b9. jpg的背景圖片，此時(shí)頁(yè)面的顯示效

果如圖5 48所示。

第4步，設(shè)置container容器下的<div>標(biāo)簽，以及在<div>下的<p>標(biāo)簽的樣式。

網(wǎng)站設(shè)計(jì)效果圖5-48定義網(wǎng)頁(yè)基本屬性

<div>標(biāo)簽中包含個(gè)<img>標(biāo)簽、一個(gè)<a>標(biāo)簽和一個(gè)<p>標(biāo)簽，首先將<div>塊設(shè)置為左浮動(dòng)，并設(shè)置其頂部補(bǔ)白與左側(cè)補(bǔ)白。<p>標(biāo)簽中顯示的是標(biāo)題，設(shè)置其樣式為字體大小20px、字體為黑體。此時(shí)顯示效果如圖5-49所示。

網(wǎng)站設(shè)計(jì)效果圖5-49設(shè)置container容器下的<div>標(biāo)簽

第5步，設(shè)置<a>標(biāo)簽樣式。

<a>標(biāo)簽的樣式設(shè)置了下劃線, a:hover定義了當(dāng)鼠標(biāo)懸停時(shí)鏈接的樣式。a:hover img定義了圖片在鼠標(biāo)懸停時(shí)的樣式。關(guān)于<a>標(biāo)簽的

css樣式將在后面章節(jié)詳細(xì)介紹。鼠標(biāo)懸停時(shí)的效果如圖5 50所示。

好了，深圳網(wǎng)站設(shè)計(jì)公司對(duì)于網(wǎng)站制作時(shí)如何處理多圖水平排列的技巧博納網(wǎng)絡(luò)就介紹到這里，我們會(huì)在下期文章中介紹如何處理圖像陰影問(wèn)題。敬請(qǐng)持續(xù)關(guān)注本站。

當(dāng)前文章鏈接：/construction/jzhyzx/1414.html

上一篇：網(wǎng)站設(shè)計(jì)前端圖文混排“實(shí)操案例” 下一篇：網(wǎng)站制作怎樣處理圖像陰影效果問(wèn)題

返回列表

如果您覺(jué)得案例還不錯(cuò)請(qǐng)幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點(diǎn)，本網(wǎng)不承擔(dān)此類稿件侵權(quán)行為的連帶責(zé)任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請(qǐng)您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們?cè)诖_認(rèn)后，會(huì)立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當(dāng)前位置：

網(wǎng)站設(shè)計(jì)如何處理多圖水平排列

如果您覺(jué)得案例還不錯(cuò)請(qǐng)幫忙分享：

相關(guān)案例推薦

奇勝人力

中礎(chǔ)全球購(gòu)

海蘭科技

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索