HTML5 レスポンシブバナー-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 レスポンシブバナー

黄舟

Feb 07, 2017 pm 01:37 PM

HTML5 レスポンシブバナー

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

ログイン後にコピー

上記は HTML5 レスポンシブバナーの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。