h5学习-简单的h5小案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5学习-简单的h5小案例相关的知识，希望对你有一定的参考价值。
下面粘贴代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>集团首页</title> <!--引入外部文件中的css--> <link href="css/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <style type="text/css"> .jcImgScroll{position:relative;height:380px;margin:40px auto 0 auto;} .jcImgScroll li{border:1px solid #ccc;} .jcImgScroll li a{background:#fff;display:block;position:relative;z-index:99;} .jcImgScroll li.loading a{background:#fff url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl{display:none;border:0 none;} .jcImgScroll li img{width: 100%;height: 100%;} .jcImgScroll em.sPrev{background:url(img/arrow-left.png) no-repeat left center;} .jcImgScroll em.sNext{background:url(img/arrow-right.png) no-repeat right center;} .jcImgScroll dl dd{background:url(img/NumBtn.png) no-repeat 0 bottom;text-indent:-9em;} .jcImgScroll dl dd:hover,.jcImgScroll dl dd.curr{background-position:0 0;} </style> <!-- 引入外部文件的js--> <script type="text/jscript" src="js/jquery-1.11.0.min.js"></script> <script type="text/jscript" src="js/jQuery-easing.js"></script> <script type="text/jscript" src="js/jQuery-jcImgScroll.js"></script> <script type="text/javascript"> $(function(){ $("#demo").jcImgScroll({ arrow : { width:45, height:400, x:60, y:0 }, width : 330, //设置图片宽度 height:469, //设置图片高度 imgtop:22,//每张图片的上下偏移量 imgleft:-10,//每张图片的左边偏移量 imgwidth:30,//每张图片的宽度偏移量 imgheight:44,//每张图片的高度偏移量 count : 9, offsetX : 60, NumBtn : false, title:false, setZoom:.8, }); }); </script> </head> <body> <div id="header_wrapper"> <header> <div class="container"> <div id="logo"> <h1><a href="index.html"><img src="img/logo.PNG" alt="集团首页"> </a> </h1> </div> <div id="sousuo"> <form action="index.html"> <input type="text" placeholder="搜索其实很简单"> <input type="submit" value="搜索"> </form> </div> </div> <div id="nav"> <nav class="container"> <ul> <li class="on"><a href="index.html">集团首页</a> </li><li> <a href="piclist.html">产品列表</a> </li><li> <a href="list.html">新闻列表</a> </li> <li> <a href="content.html">内容页面</a> </li> <li> <a href="index.html">关于我们</a> </li> </ul> </nav> </div> </header> </div> <div id="body_wrapper" class="container"> <article> <section id="lunbotu"> <div id="demo" class="jcImgScroll"> <ul> <li><a href="#" path="img/01.jpg"></a></li> <li><a href="#" path="img/02.jpg"></a></li> <li><a href="#" path="img/03.jpg"></a></li> <li><a href="#" path="img/04.jpg"></a></li> <li><a href="#" path="img/05.jpg"></a></li> <li><a href="#" path="img/06.jpg"></a></li> <li><a href="#" path="img/07.jpg"></a></li> <li><a href="#" path="img/08.jpg"></a></li> <li><a href="#" path="img/09.jpg"></a></li> </ul> </div> </section> </article> </div> <div id="footer_wrapper"> <footer></footer> </div> </body> </html>
style.css
/*公共样式*/ *{ margin: 0; padding: 0; /* 清除网页的默认间隙*/ } body{ /*background-color: #f3f3f3;*/ } .container{ width: 1000px; margin: 0 auto; } div #logo{ display: inline-block; vertical-align: top; width: 730px; } div #sousuo{ display: inline-block; vertical-align: top; margin-top: 90px; text-align: right; } input [type="text"]{ border: solid 1px #ccc; height: 40px; line-height: 40px; font-size: 16px; padding-left: 170px; } div #nav{ background-color:#000000; height: 60px; } div #nav nav li{ display: inline-block; line-height: 60px; padding: 0 10px; border-right: solid 1px; -moz-transition:background 1s linear ; } div #nav nav a{ color:#fff; text-decoration: none; font-size: 16px; } div #nav nav li.on,div #nav nav li.on:hover{ background-color: chartreuse; }
这些是简单的头部的代码。下边那个轮播器网上可以下载代码，加入代码中就可以了。
http://www.htmleaf.com/jQuery/Slideshow-Scroller/201612134258.html
以上是关于h5学习-简单的h5小案例的主要内容，如果未能解决你的问题，请参考以下文章