Tutoriel de production de bannières réactives HTML5-tutoriel HTML-php.cn

Tutoriel de production de bannières réactives HTML5

php中世界最好的语言

Libérer： 2017-11-29 14:41:54

original

3695 Les gens l'ont consulté

Cette fois, je vais vous montrer comment créer une bannière responsive en utilisant HTML5. Comment créer des effets spéciaux en utilisant H5 ? Quelles sont les précautions pour une bannière responsive HTML5 Voici des cas pratiques, jetons un oeil.

<!DOCTYPE html>
<html>
        <head>                
                   <meta charset=utf-8 >       
                   <title>HTML5响应式banner </title>
                   <meta name="keywords" content=" HTML5响应式banner " />
                   <meta name="description" content=" HTML5响应式banner " />
                   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                   <link rel="stylesheet" type="text/css" href="css/style.css" >
                   <link rel="stylesheet" type="text/css" href="css/skeleton.css" >
                   <link rel="stylesheet" type="text/css" href="css/flexslider.css"  >
         </head>
         <body>  
<div id="wrap">
<!-- SLIDER -->
 <div class="slider-1 clearfix">  
     <div>
       <div class="flexslider loading">
        <ul>
          <li style="background:url(images/sliders/slider-1/slider-bg-1.jpg) no-repeat;background-position:50% 0">      
           <div>
           <div class="sixteen columns contain">
             <h2 data-toptitle="36%">MULTIPURPOSE THEME</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div data-bottomlinks="30%">
               <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
             </div>   
             <img src="images/sliders/slider-1/slider-item-1.png" alt="slide-item"  data-topimage="21%"/>
           </div>
         </div><!-- End Container -->
          </li><!-- End item --> 
          <li style="background:url(images/sliders/slider-1/slider-bg-2.jpg) no-repeat; background-position:50% 0">
          <div>
           <div class="sixteen columns contain">
             <h2 data-toptitle="36%">LOREM IPSUM</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div data-bottomlinks="30%">
                      <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
             </div>
           </div>
         </div><!-- End Container -->
                  </li><!-- End item -->
         <li style="background:url(images/sliders/slider-1/slider-bg-3.jpg) no-repeat; background-position:50% 0">
          <div>
           <div class="sixteen columns contain">   
             <h2 data-toptitle="36%">ALES MAECENAS</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div data-bottomlinks="30%">
                                     <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
             </div>
                         <img src="images/sliders/slider-1/slider-item-2.png" alt="slide-item" data-topimage="24%"/>
           </div>
         </div><!-- End Container -->  
         </li><!-- End item -->
        </ul>
       </div>
      </div>
   </div>
              <div style="width: 100%; height: auto; line-height: 25px; text-align: center;">
                            </div>  
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Flex Slider  -->
<script src="js/jquery.flexslider.js"></script>
<script src="js/flex-slider.js"></script>
<!-- JS end -->
     </body>
</html>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

La relation entre les rendus de pages Web et DIV+CSS

Étapes de mise en œuvre vidéo et audio HTML5

Processus Js d'exploitation des événements de souris

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!