欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

HTML5响应式banner

 

<!DOCTYPE html>

<html>

        <head>

                  

                   <meta charset=utf-8 >

                  

                   <title>HTML5响应式banner </title>

                   <meta name="keywords" content=" HTML5响应式banner " />

                   <meta name="description" content=" HTML5响应式banner " />

                   <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:url(images/sliders/slider-1/slider-bg-1.jpg) 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:url(images/sliders/slider-1/slider-bg-2.jpg) 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:url(images/sliders/slider-1/slider-bg-3.jpg) 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;">

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c15729.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2016-12-19 20:52 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。