明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML5響應(yīng)式banner制作圖文說明教程

發(fā)表時間：2024-05-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碛肏TML5響應(yīng)式banner制作方法，怎么用H5制作特效？HTML5響應(yīng)式banner的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。<!DOCTYPE html><html><head> <meta cha...
這次給大家?guī)碛肏TML5響應(yīng)式banner制作方法，怎么用H5制作特效？HTML5響應(yīng)式banner的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

<!DOCTYPE html>
<html>
        <head>                
                   <meta charset=utf-8 >       
                   <title>HTML5響應(yīng)式banner </title>
                   <meta name="keywords" content=" HTML5響應(yīng)式banner " />
                   <meta name="description" content=" HTML5響應(yīng)式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">
<!-- SLIDER -->
 <div class="slider-1 clearfix">  
     <div>
       <div class="flexslider loading">
        <ul>
          <li style="background:url(images/sliders/slider-1/slider-bg-1.jpg) no-repeat;background-position:50% 0">      
           <div>
           <div class="sixteen columns contain">
             <h2 data-toptitle="36%">MULTIPURPOSE THEME</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div 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" 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>
           <div class="sixteen columns contain">
             <h2 data-toptitle="36%">LOREM IPSUM</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div 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>
           <div class="sixteen columns contain">   
             <h2 data-toptitle="36%">ALES MAECENAS</h2>
             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>
             <div 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" 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>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！


相關(guān)閱讀：

網(wǎng)頁的效果圖與DIV+CSS關(guān)系

HTML5視頻音頻實現(xiàn)步驟

Js操作鼠標(biāo)事件的流程

以上就是HTML5響應(yīng)式banner制作教程的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。