当前位置：Gxlcms > html代码 > HTML5响应式banner制作教程

HTML5响应式banner制作教程

时间：2021-07-01 10:21:17 帮助过：103人阅读

这次给大家带来用HTML5响应式banner制作方法，怎么用H5制作特效？HTML5响应式banner的注意事项有哪些，下面就是实战案例，一起来看一下。

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

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

HTML5响应式banner制作教程

人气教程排行