通欄banner在編寫代碼的時(shí)候，需要分塊來(lái)進(jìn)行，不是自己原來(lái)想的設(shè)計(jì)稿給的什么樣式就切個(gè)圖填充進(jìn)去就好了，考慮到PC端屏幕大小，拉伸之后都能百分百填充。

html代碼：

<div class="banner" style="background:#eee">
　　<div class="banner-m">
　　　　<img src="images/banner.jpg" alt="">
　　</div>
</div>

css代碼：

.banner{width:100%;min-width:1100px;background:#fff;}
.banner .banner-m{margin:0 auto;width:1100px;height:360px;overflow:hidden;}
.banner .banner-m img{width:1100px;height:360px;border:none;}

多層容器包裹，最外層的容器以圖片兩邊的底色填充，可在CSS文件中設(shè)置一個(gè)通用底色，banner圖片無(wú)法顯示的時(shí)候顯示通用底色，banner需要顯示的底色放在內(nèi)聯(lián)樣式里面，隨著banner圖片的不一樣方便配置修改。

內(nèi)層容器則用來(lái)放置banner圖片，banner圖片既可以直接寫進(jìn)img標(biāo)簽里面，也可以設(shè)置為內(nèi)層容器的背景圖片。如果是寫入img標(biāo)簽的圖片必須規(guī)定大小，寫入背景圖片方便控制位置樣式。如果需要替換，可將背景圖片寫入內(nèi)聯(lián)樣式。

-----------上面是比較簡(jiǎn)單的banner通欄，如果是復(fù)雜的通欄廣告，則需要分不同的模塊，不變的宗旨是截取中間部位的切圖，其他底色填充，保證寬度100%。

轉(zhuǎn)載于:https://www.cnblogs.com/walk-on-the-way/p/5718630.html

總結(jié)

以上是生活随笔為你收集整理的网页通栏广告的编写技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。