Teilen Sie Beispiele für die Erstellung von Bannern mit HTML5

Banner:

1. Banneranzeigen sind eine gängige Form der Online-Werbung und werden im Allgemeinen an auffälligen Stellen auf Webseiten platziert Bei der Gestaltung von Werbebannern können Sie in der Regel auf die entsprechende Werbeseite verlinken.

2 Achten Sie bei der Gestaltung von Banneranzeigen darauf, dass sie einfach und klar sind, das Hauptthema widerspiegeln und die Hauptabsicht der Werbung klar zum Ausdruck bringen und anschaulich;

3. Banneranzeigen können statische Bilder oder dynamische Bilder sein. Im Allgemeinen sind dynamische Banneranzeigen im Vergleich zu statischen Banneranzeigen auffälliger und können die Aufmerksamkeit des Publikums auf sich ziehen.

4. Dies gilt natürlich nur, wenn sie angemessen und geeignet sind Und der unsachgemäße Einsatz von Floating-Werbung kann unerwartete Folgen haben und sogar einen Teufelskreis des Ekels bei den Zuschauern hervorrufen, wodurch die ursprüngliche Wirkung der Werbung stark beeinträchtigt wird.

5. Ist es besser, sie bei der Gestaltung von Bannerwerbung zu übernehmen? Statische Methoden? Form oder dynamische Form hängen davon ab, welche Form dem Betrachter die auszudrückenden Informationen genau und schnell vermitteln kann.

Designprozess:

(1) Schreiben von HTML5-Code

1. Geben Sie die zu verlinkende Website ein, wenn Sie auf das Banner klicken

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

2. Fügen Sie Bilder und Text zum Banner hinzu und verwenden Sie das Klassenattribut, um das Element zu identifizieren

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

(2) CSS3-Stylesheet schreiben

1. Kontrollieren Sie den Körperstil

body {
    padding: 20px;
    background: #333;
}

2. Steuern Sie den Bannerstil

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

3. Legen Sie das Logo der Bannerwerbung fest

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

4. Wenden Sie Schriftarten auf den Text auf dem Banner an

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

Gleichzeitig müssen Sie einen Web-Schriftartendienst im HTML5-Code hinzufügen

<title>CSS3 Banner Design - 动画Banner设计</title>
<link href=&#39;api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb&#39; rel=&#39;stylesheet&#39; />

5. Legen Sie die Position der Banner-Schriftart und -Farbe fest

.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. Stellen Sie ein, dass sich der Mauszeiger nicht zum Banner bewegt

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

Verwenden Sie die Übergangsfunktion, um eine Reihe von Bildverschiebungsvorgängen abzuschließen

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

Verwenden Sie abschließend JQuery, um die Tondatei abzuspielen

/* banner.js - Banner设计脚本, 2012 © yamoo9.com    
---------------------------------------------------------------- */
;(function($){
    $(function() { // $(document).ready(); 文档准备好后运行
        
        var banner_audio= new Audio(),        // 创建Audio.
             webm = isSupportWebM();    // 检查是否支持webm格式
        banner_audio.src = 'media/banner_sound.mp3';
        /*if(webm) {   //支持webm格式
            banner_audio.src = 'media/banner_sound.webm';
        } else {    // 不支持webm格式
            banner_audio.src = 'media/banner_sound.mp3';
        };*/
        $('.banner')
            .bind('mouseover focusin', function() { // 当发生MouseOver，FocusIn事件时调用处理函数
                banner_audio.load(); // 加载audio
                banner_audio.play(); // 播放audio
            })
            .bind('mouseout focusout', function() { // 当发生MouseOut，FocusOut事件时调用处理函数
                banner_audio.pause();             // 暂停audio
                banner_audio.currentTime = 0;    // 初始化audio播放位置
            });
        
    });
})(window.jQuery);

// 检测是否webm格式的函数
function isSupportWebM() {
    var tester = document.createElement('audio');
    return !!tester.canPlayType('audio/webm');
};

[Verwandte Empfehlungen]

1 Kostenloses h5-Online-Video-Tutorial

2.HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

4. Die Lösung für das Problem, dass das H5-Video-Tag nur Ton, aber kein Video abspielen kann

5. Der MIME von IIS registriert den MP4-Typ nicht, was zu einer nicht erkennbaren Lösung für das Video-Tag führt

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Erstellung von Bannern mit HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!