网页通栏广告的编写技巧

通栏banner在编写代码的时候，需要分块来进行，不是自己原来想的设计稿给的什么样式就切个图填充进去就好了，考虑到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文件中设置一个通用底色，banner图片无法显示的时候显示通用底色，banner需要显示的底色放在内联样式里面，随着banner图片的不一样方便配置修改。

内层容器则用来放置banner图片，banner图片既可以直接写进img标签里面，也可以设置为内层容器的背景图片。如果是写入img标签的图片必须规定大小，写入背景图片方便控制位置样式。如果需要替换，可将背景图片写入内联样式。

-----------上面是比较简单的banner通栏，如果是复杂的通栏广告，则需要分不同的模块，不变的宗旨是截取中间部位的切图，其他底色填充，保证宽度100%。

转载于:https://www.cnblogs.com/walk-on-the-way/p/5718630.html