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 중국어 홈페이지(www.php.cn)를 참고해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.