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

HTML5-responsives Banner

黄舟
Freigeben： 2017-02-07 13:37:46
Original
3074 Leute haben es durchsucht

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>
Nach dem Login kopieren

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


Verwandte Etiketten：
HTML5，响应式，banner
Quelle：php.cn
Vorheriger Artikel：[HTML5-Tutorial] – HTML 5-Video Nächster Artikel：Grundlagen des responsiven HTML5-Layouts (1)
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Erstellen Sie vielfältige Kartenlayouts mit einem einzigen Raster oder Flex: eine praktische Anleitung Ich versuche, ein responsives Kartenlayout wie das abgebildete zu erstellen. Derzeit erste...
Aus 2024-04-02 21:07:36
0
2
377
Ist es möglich, eine Liste im Responsive-Modus in eine Symbolleiste umzuwandeln? Ich habe die folgenden Karten. nav hat viele Elemente (ich habe der Kürze halber eines hie...
Aus 2024-04-02 16:09:27
0
1
263
Die API gibt leere Nutzdaten auf dem Live-Server zurück, jedoch nicht auf dem lokalen Host Dies ist die Antwort, die ich mit der localhostAPI erhalte. Dies ist die Antwort, die ich ...
Aus 2024-04-02 10:38:21
0
1
323
Responsives Bild und Text Div nebeneinander Ich versuche also, eine Vorlage zu erstellen, bei der ein Div ein Bild und das andere Text...
Aus 2024-04-02 08:59:38
0
1
349
Die Boostrap 5-Navigationsleiste kann nicht geschlossen werden Navigationsleiste schließt im Responsive-Modus nicht. Alle hinzugefügten Bibliotheken sind...
Aus 2024-04-01 17:18:21
0
1
268
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！