当前位置：Gxlcms > html代码 > HTML5响应式banner

HTML5响应式banner

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

HTML5响应式banner

  1. <!DOCTYPE html>
  2. <html>
  3.      <head>
  4.         
  5.         <meta charset=utf-8 > 
  6.         
  7.         <title>HTML5响应式banner | jQuery特效|手机微信网站特效| 网页特效库</title>
  8.         <meta name="keywords" content="兄弟连IT教育" />
  9.         <meta name="description" content="兄弟连H5学院" />
  10.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  11.         <link rel="stylesheet" type="text/css" href="css/style.css" >
  12.         <link rel="stylesheet" type="text/css" href="css/skeleton.css" >
  13.         <link rel="stylesheet" type="text/css" href="css/flexslider.css"  >
  14.     </head>
  15.     <body>
  16.     
  17. <div id="wrap" class="boxed">
  18. <!-- SLIDER -->
  19.  <div class="slider-1 clearfix">
  20.    
  21.      <div class="flex-container">
  22.        <div class="flexslider loading">
  23.         <ul class="slides">
  24.           <li style="background:none no-repeat;background-position:50% 0">
  25.           
  26.            <div class="container">
  27.            <div class="sixteen columns contain">
  28.             
  29.              <h2 data-toptitle="36%">MULTIPURPOSE THEME</h2>
  30.              <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
  31.              <div class="links" data-bottomlinks="30%">
  32.                <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
  33.              </div>
  34.              
  35.              <img src="images/sliders/slider-1/slider-item-1.png" class="item" alt="slide-item"  data-topimage="21%"/>
  36.            
  37.            </div>
  38.          </div><!-- End Container -->
  39.           
  40.           </li><!-- End item -->
  41.           
  42.           
  43.           <li style="background:none no-repeat; background-position:50% 0">
  44.           
  45.           <div class="container">
  46.            <div class="sixteen columns contain">
  47.             
  48.              <h2 data-toptitle="36%">LOREM IPSUM</h2>
  49.              <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
  50.              <div class="links" data-bottomlinks="30%">
  51.                 <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
  52.              </div>
  53.            </div>
  54.          </div><!-- End Container -->
  55.           
  56.          </li><!-- End item -->
  57.          
  58.          
  59.          <li style="background:none no-repeat; background-position:50% 0">
  60.           
  61.           <div class="container">
  62.            <div class="sixteen columns contain">
  63.             
  64.              <h2 data-toptitle="36%">ALES MAECENAS</h2>
  65.              <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
  66.              <div class="links" data-bottomlinks="30%">
  67.                 <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>
  68.              </div>
  69.              
  70.              <img src="images/sliders/slider-1/slider-item-2.png" class="item" alt="slide-item" data-topimage="24%"/>
  71.            
  72.            </div>
  73.          </div><!-- End Container -->
  74.           
  75.          </li><!-- End item -->
  76.       
  77.          
  78.         </ul>
  79.        </div>
  80.       </div>
  81.      
  82.    </div>
  83.     
  84.     <div style="width: 100%; height: auto; line-height: 25px; text-align: center;">
  85.  <a href="http://www.5iweb.com.cn"><b>兄弟连IT教育，培养专业的IT人才，设有PHP、UI、H5、Android、JavaEE+大数据、云计算，了解详情加QQ2186748369，兄弟连欢迎你</b></a>
  86.     </div>
  87.     
  88. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  89. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  90. <!-- Flex Slider  -->
  91. <script src="js/jquery.flexslider.js"></script> 
  92. <script src="js/flex-slider.js"></script> 
  93.         
  94.         
  95.         
  96.         
  97.         
  98.         
  99. <!-- JS end -->
  100.         
  101.     </body>
  102. </html>

以上就是HTML5响应式banner的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！