HTML5响应式banner制作教程

来源：互联网 2024-10-17 20:14:56
这次给大家带来用html5响应式banner制作方法，怎么用h5制作特效？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>  <p id="wrap"><!-- SLIDER --> <p class="slider-1 clearfix">       <p>       <p class="flexslider loading">        <ul>          <li style="background:url(images/sliders/slider-1/slider-bg-1.jpg) no-repeat;background-position:50% 0">                 <p>           <p class="sixteen columns contain">             <h2 data-toptitle="36%">MULTIPURPOSE THEME</h2>             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>             <p data-bottomlinks="30%">               <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>             </p>                <img src="images/sliders/slider-1/slider-item-1.png" alt="slide-item"  data-topimage="21%"/>           </p>         </p><!-- End Container -->          </li><!-- End item -->           <li style="background:url(images/sliders/slider-1/slider-bg-2.jpg) no-repeat; background-position:50% 0">          <p>           <p class="sixteen columns contain">             <h2 data-toptitle="36%">LOREM IPSUM</h2>             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>             <p data-bottomlinks="30%">                      <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>             </p>           </p>         </p><!-- End Container -->                  </li><!-- End item -->         <li style="background:url(images/sliders/slider-1/slider-bg-3.jpg) no-repeat; background-position:50% 0">          <p>           <p class="sixteen columns contain">                <h2 data-toptitle="36%">ALES MAECENAS</h2>             <p data-bottomtext="39%">CRAS JUSTO ODIO, DAPIBUS AC FACILISIS </p>             <p data-bottomlinks="30%">                                     <a class="button medium r-m-plus r-m-full" href="blog-single.html">READ MORE</a>             </p>                         <img src="images/sliders/slider-1/slider-item-2.png" alt="slide-item" data-topimage="24%"/>           </p>         </p><!-- End Container -->           </li><!-- End item -->        </ul>       </p>      </p>   </p>              <p style="width: 100%; height: auto; line-height: 25px; text-align: center;">                            </p>  <ｓｃｒｉｐｔ type="text/javascript" src="js/jquery-1.8.3.min.js"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ type="text/javascript" src="js/jquery.easing.1.3.js"></ｓｃｒｉｐｔ><!-- Flex Slider  --><ｓｃｒｉｐｔ src="js/jquery.flexslider.js"></ｓｃｒｉｐｔ><ｓｃｒｉｐｔ src="js/flex-slider.js"></ｓｃｒｉｐｔ><!-- JS end -->     </body></html>
相信看了这些案例你已经掌握了方法，更多精彩请关注本站其它相关文章！