집 > 기사 > 웹 프론트엔드 > HTML5 반응형 배너 제작 튜토리얼

HTML5 반응형 배너 제작 튜토리얼

php中世界最好的语言원래의: 2017-11-29 14:41:543667검색

이번에는 HTML5를 사용하여 반응형 배너를 만드는 방법을 보여 드리겠습니다. H5를 사용하여 특수 효과를 만드는 방법은 무엇입니까? HTML5 반응형 배너의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

<!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">
<!-- 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>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!