html广告网页完整代码,HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码 - 伊甸一点...

横幅广告(Banner)：

1.横幅广告是网络广告的常见形式，一般位于网页的醒目位置上；当用户单击这些横幅广告时，通常可以链接到相应的广告页面；

2.设计横幅广告时，要力求简单明了，能够体现出主要的中心主旨，鲜明、形象地表达出最主要的广告意图；

3.横幅广告可以使静态图像，也可以是动态图像。一般而言，与静态横幅广告相比，动态横幅广告更醒目，更能吸引观众的注意力；

4.当然这还是在恰当适合的前提下(讨厌那种弹窗式和悬浮式的广告)使用不当会造成意想不到的后果，甚至因此观看者的反感造成恶性循环，从而对广告原本的作用大打折扣；

5.设计横幅广告时，究竟是采取静态形式还是动态形式，取决于哪种形式能够把要表达的信息准确、快速地传递给观看者。

设计过程：

(一)编写HTML5代码

1.输入单击Banner时要链接的网站

2.向Banner中添加图片和文字并使用class属性标识元素

开放知识讲座, 视频Cast!分享设计心得的乐园!- Yamoo9

(二)编写CSS3样式表

1.控制body样式

body {

padding: 20px;

background: #333;

}

2.控制Banner样式

a.banner{display:block;width:728px;height:176px;border:1px solid #555;

}

3.设置横幅广告的Logo标志

.modern .banner-logo{position:absolute;top:20px;left:270px;

}

4.向Banner上的文字应用字体

.modern .banner-desc{font:32px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";

}

同时还需要在HTML5代码中添加Web字体服务

CSS3 Banner Design - 动画Banner设计

5.设置Banner字体的位置与颜色

.modern .banner-desc{opacity:0;position:absolute;top:39px;left:170px;font:39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";color:#4ec1cd;

}

.modern .banner-desc strong{font-size:23px;

}

6.设置鼠标指针未移动到Banner上的Banner

a.banner{position:relative;background:url(../images/banner-arrow.png) no-repeat -100px 140px,

url(../images/banner-photo.png) no-repeat -40px 220px,

url(../images/banner-09.png) no-repeat -20px -380px,

url(../images/banner-bg.png) no-repeat 0 0;

}.modern a.banner:hover, a.banner:focus{background-position:20px 140px,

-40px 20px,

-20px -90px,

0 0;

}

使用transition函数完成一系列的图片移动操作

a.banner{position:relative;background:url(../images/banner-arrow.png) no-repeat -100px 140px,

url(../images/banner-photo.png) no-repeat -40px 220px,

url(../images/banner-09.png) no-repeat -20px -380px,

url(../images/banner-bg.png) no-repeat 0 0;-webkit-transition:all .2s ease-in .2s;-moz-transition:all .2s ease-in .2s;-o-transition:all .2s ease-in .2s;-ms-transition:all .2s ease-in .2s;transition:all .2s ease-in .2s;

}.modern a.banner:hover, a.banner:focus{background-position:20px 140px,

-40px 20px,

-20px -90px,

0 0;

}.modern .banner-logo{position:absolute;top:20px;left:270px;-webkit-transition:all .4s ease-out .3s;-moz-transition:all .4s ease-out .3s;-o-transition:all .4s ease-out .3s;-ms-transition:all .4s ease-out .3s;transition:all .4s ease-out .3s;

}.modern a.banner:hover .banner-logo,

.modern a.banner:focus .banner-logo{left:540px;

}.modern .banner-desc{opacity:0;position:absolute;top:39px;left:170px;font:39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";color:#4ec1cd;-webkit-transition:all .4s ease-out .3s;-moz-transition:all .4s ease-out .3s;-o-transition:all .4s ease-out .3s;-ms-transition:all .4s ease-out .3s;transition:all .4s ease-out .3s;

}

最后使用JQuery播放声音文件