首页 > 代码库 > h5学习-简单的h5小案例

h5学习-简单的h5小案例

2024-09-10 05:05:44   218人阅读

技术分享

下面粘贴代码：

<!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小案例


联系
我们