Heim > Artikel > Web-Frontend > HTML5-responsives Banner

HTML5-responsives Banner

黄舟Original: 2017-02-07 13:37:463082Durchsuche

HTML5-Responsive-Banner

<!DOCTYPE html>
<html>
     <head>
        
        <meta charset=utf-8 > 
        
        <title>HTML5响应式banner | jQuery特效|手机微信网站特效| 网页特效库</title>
        <meta name="keywords" content="兄弟连IT教育" />
        <meta name="description" content="兄弟连H5学院" />
        <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" class="boxed">


<!-- SLIDER -->
 <div class="slider-1 clearfix">
   
     <div class="flex-container">
       <div class="flexslider loading">
        <ul class="slides">
          <li style="background:none no-repeat;background-position:50% 0">
          
           <div class="container">
           <div class="sixteen columns contain">
            
             <h2 data-toptitle="36%">MULTIPURPOSE THEME</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div class="links" 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" class="item" alt="slide-item"  data-topimage="21%"/>
           
           </div>
         </div><!-- End Container -->
          
          </li><!-- End item -->
          
          
          <li style="background:none no-repeat; background-position:50% 0">
          
          <div class="container">
           <div class="sixteen columns contain">
            
             <h2 data-toptitle="36%">LOREM IPSUM</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div class="links" 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:none no-repeat; background-position:50% 0">
          
          <div class="container">
           <div class="sixteen columns contain">
            
             <h2 data-toptitle="36%">ALES MAECENAS</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div class="links" 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" class="item" 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;">
 <a href="http://www.5iweb.com.cn"><b>兄弟连IT教育，培养专业的IT人才，设有PHP、UI、H5、Android、JavaEE+大数据、云计算，了解详情加QQ2186748369，兄弟连欢迎你</b></a>
    </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>

Das Obige ist der Inhalt des HTML5-Responsive-Banners. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：[HTML5-Tutorial] – HTML 5-VideoNächster Artikel：[HTML5-Tutorial] – HTML 5-Video

In Verbindung stehende Artikel

Mehr sehen