Partagez des exemples de création de bannières en utilisant HTML5-Tutoriel H5-php.cn

Partagez des exemples de création de bannières en utilisant HTML5

零下一度

Libérer： 2017-05-19 14:08:13

original

10554 Les gens l'ont consulté

Bannière :

1. Les bannières publicitaires sont une forme courante de publicité en ligne, généralement situées à des endroits accrocheurs sur les pages Web ; annonces Lors de la conception, vous pouvez généralement créer un lien vers la page publicitaire correspondante ;

2. Lors de la conception de bannières publicitaires, efforcez-vous d'être simple et clair, d'être capable de refléter le thème central principal et d'exprimer clairement l'intention publicitaire principale. et de manière vivante ;

3. Les bannières publicitaires peuvent être des images statiques ou des images dynamiques. De manière générale, par rapport aux bannières publicitaires statiques, les bannières dynamiques sont plus accrocheuses et peuvent attirer l'attention du public

4. et Une mauvaise utilisation des publicités flottantes entraînera des conséquences inattendues, et provoquera même un cercle vicieux de dégoût parmi les téléspectateurs, réduisant ainsi considérablement l'effet original de la publicité

5. Lors de la conception de bannières publicitaires, est-il préférable d'adopter ; Méthodes statiques ? La forme ou la forme dynamique dépend de la forme qui peut transmettre avec précision et rapidité les informations à exprimer au spectateur.

Processus de conception :

(1) Écriture du code HTML5

1. Entrez le site Web à lier en cliquant sur la bannière

<a class="banner" href="m.sbmmt.com">

Copier après la connexion

2. Ajoutez des images et du texte à la bannière et utilisez l'attribut class pour identifier l'élément

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

Copier après la connexion

(2) Écriture d'une feuille de style CSS3

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

Copier après la connexion

2. Contrôlez le style de la bannière

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

Copier après la connexion

3. Définissez le logo de la bannière publicitaire

<🎜. >

4. Appliquer des polices au texte de la bannière

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

Copier après la connexion

En même temps, vous devez ajouter un service de polices Web dans le code HTML5

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

Copier après la connexion

5. Définissez la position de la police et de la couleur de la bannière

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

Copier après la connexion

6 Réglez le pointeur de la souris pour qu'il ne se déplace pas vers la bannière

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

Copier après la connexion

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

Copier après la connexion

<🎜. >

Utilisez la fonction de transition pour effectuer une série d'opérations de déplacement d'image

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

Copier après la connexion

Enfin, utilisez

JQuery

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

Copier après la connexion

pour lire le fichier son

[Recommandations associées]

1 .

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

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

Copier après la connexion

Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

Tutoriel vidéo html5 original php.cn

La solution au problème selon lequel la balise vidéo H5 ne peut lire que le son mais pas la vidéo.

Le MIME d'IIS n'enregistre pas le type MP4, ce qui entraîne une solution méconnaissable pour la balise vidoe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!