简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

HTML5 responsive banner

黄舟
Release： 2017-02-07 13:37:46
Original
3074 people have browsed it

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>
Copy after login

The above is the content of HTML5 responsive banner. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels：
HTML5，响应式，banner
source：php.cn
Previous article：[HTML5 tutorial]-HTML 5 video Next article：HTML5 responsive layout basics (1)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Create diverse card layouts using a single grid or Flex: a practical guide I'm trying to make a responsive card layout like the one pictured. What I'm currently doin...
From 2024-04-02 21:07:36
0
2
377
Is it possible to change a list to a toolbar in responsive mode? I have the following cards. nav has many items (I've left one here for brevity). <divcl...
From 2024-04-02 16:09:27
0
1
263
API returns empty payload on live server but not on localhost This is the response I get using the localhostAPI This is the response I get using the sta...
From 2024-04-02 10:38:21
0
1
323
Responsive image and text Div side by side So I'm trying to create a template where one div is an image and the other is text with a ...
From 2024-04-02 08:59:38
0
1
349
Can't close Boostrap 5 navigation bar Navigation bar not closing in responsive mode All added libraries are ready''''<divclas...
From 2024-04-01 17:18:21
0
1
268
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！