分享HTML5制作Banner的实例-木庄网络博客

本文摘自PHP中文网，作者零下一度，侵删。

横幅广告(Banner)：

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

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

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

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

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

设计过程：

（一）编写HTML5代码

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

1	`<a` `class="banner"` `href="www.php.cn">`

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

<a class="banner" href="http://yamoo9.com">
    <img class="banner-logo" src="images/banner-logo.png" alt="yamoo9.com" width="167" height="134" />
    <p class="banner-desc">开放知识讲座, 视频Cast!<br /> 分享设计心得的乐园!<br />
    <strong>- Yamoo9</strong></p>
</a>

（二）编写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字体服务

1 2	`<title>CSS3 Banner Design - 动画Banner设计</title>` `<link` `href='api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb'` `rel='stylesheet'` `/>`

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;    
}