HTML期末作业-网上书城网上书店

HTML期末作业-网上书城网上书店，HTML+css+JavaScript,7个页面!

部分源码

<!DOCTYPE HTML><html><head><title>网上书城</title><link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script><link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><script src="js/jquery.min.js"></script><script type="text/javascript" src="js/easing.js"></script><link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" /><link href="css/megamenu.css" rel="stylesheet" type="text/css" media="all" /><link href="css/form.css" rel="stylesheet" type="text/css" media="all" /><script type="text/javascript" src="js/megamenu.js"></script><script>$(document).ready(function(){$(".megamenu").megamenu();});</script><script src="js/menu_jquery.js"></script><script src="js/jquery.easydropdown.js"></script><script src="js/jquery.etalage.min.js"></script><script> jQuery(document).ready(function($){ $('#etalage').etalage({ thumb_image_width: 300, thumb_image_height: 400, source_image_width: 800, source_image_height: 1000, show_hint: true, click_callback: function(image_anchor, instance_id){ alert('Callback example:/nYou clicked on an image with the anchor: "'+image_anchor+'"/n(in Etalage instance: "'+instance_id+'")'); } }); }); </script></head><body> <div class="header"> <div class="top_bg"><div class="container"><div class="header_top"> <div class="logo"> <a href="index.html"><img src="images/book/xtulogo.png" alt=""/></a> <div class="top_right"> <ul> <li><a href="registration.html">注册</a></li>| <li class="login" > <div id="loginContainer"><a href="#" id="loginButton"><span>登录</span></a> <div id="loginBox"> <form id="loginForm"> <fieldset id="body"> <fieldset> <label for="email">账号</label> <input type="text" name="email" id="email"> </fieldset> <fieldset> <label for="password">密码</label> <input type="password" name="password" id="password"> </fieldset> <input type="submit" id="login" value="Sign in"> <label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label> </fieldset> <span><a href="#"> 忘记密码？</a></span> </form> </div> </div> </li> </ul> </div> </div> <div class="clearfix"> </div></div></div></div> </div> <div class="head-bann"> <div class="container"> <div class="head-nav"> <span class="menu"> </span> <ul class="megamenu skyblue"> <li><a class="color1" href="index.html">主页</a></li> <li class="grid"><a class="color2" href="women.html">商城</a></li> <li><a class="color4" href="details.html">信息</a></li> <li><a class="color5" href="registration.html">注册</a></li> <li><a class="color7" href="brands.html">出版社</a></li> <li><a class="color8" href="buy.html">购物车</a></li> <li><a class="color6" href="contact.html">联系我们</a></li> <div class="clearfix"> </div> </ul> </div> </div> </div>  <script> $( "span.menu" ).click(function() { $( ".head-nav ul" ).slideToggle(300, function() { // Animation complete. }); }); </script>  <div class="banner"> <div class="container"> <div class="col-md-6"> </div> <div class="col-md-6 banner-info"> <h1>网上图书城</h1> <p>你的到来，</p> <p>为书城增添魅力。</p> <a class="show-more" href="#">更多精彩</a> </div> <div class="clearfix"> </div> </div> </div> <div class="instock"> <div class="container"> <div class="col-md-6 chuk"> <div class="blanc-info"> <h3 style="color: #613030">《浮生六记》</h3> <h4><p style="color: #613030">情深不寿，</p> <p style="color: #613030">寿则多辱。</p> <p style="color: #613030">¥25</p></h4> <a class="show" href="#">更多内容</a> </div> </div> <div class="col-md-6 blanc"> <div class="blanc-info"> <h3 style="color: #613030">《人间词话》</h3> <h4><p style="color: #613030">自是思量渠不成</p> <p style="color: #613030">人间总被思量误</p> <p style="color: #613030">¥25</p></h4> <a class="show" href="#">更多内容</a> </div> </div> <div class="clearfix"> </div> </div> </div><div class="featured"><div class="container"><div class="col-md-9"><div class="biseller-info"><h3 class="new-models">新书上架</h3> <ul id="flexiselDemo3"> <li> <div class="biseller-column"> <img src="images/book/book1.jpg" class="img-responsive" alt="" class="veiw-img"> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>飞花令里的读诗词</h4> <p>¥28</p> </div> </div> </li> <li> <div class="biseller-column"> <img src="images/book/book2.jpg" class="img-responsive" alt="" class="veiw-img"> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>亲密关系</h4> <p>¥25</p> </div> </div> </li> <li> <div class="biseller-column"> <img src="images/book/book3.jpg" class="img-responsive" alt="" class="veiw-img"> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>人性的弱点</h4> <p>¥30</p> </div> </div> </li> </ul> </div> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo3").flexisel({ visibleItems: 3, animationSpeed: 1000, autoPlay: false, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> <script type="text/javascript" src="js/jquery.flexisel.js"></script> <div class="best-seller"> <div class="biseller-info"> <h3 class="new-models">本周精选</h3> <ul id="flexiselDemo1"> <li> <div class="biseller-column"> <img src="images/book/book6.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>围城</h4> <p>¥15</p> </div> </div> </li> <li> <div class="biseller-column"> <img src="images/book/book11.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>第七天</h4> <p>¥35</p> </div> </div> </li> <li> <div class="biseller-column"> <img src="images/book/book5.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>诗经之美</h4> <p>¥29</p> </div> </div> </li> </ul> </div> </div><div class="tlinks">Collect from <a href="http://www.cssmoban.com/" title="网站模板">网站模板</a></div> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo1").flexisel({ visibleItems: 3, animationSpeed: 1000, autoPlay: true, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo5").flexisel({ visibleItems: 3, animationSpeed: 1000, autoPlay: true, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); }); </script> <div class="best-seller"> <div class="biseller-info"> <ul id="flexiselDemo5"> <li> <div class="biseller-column1"> <img src="images/book/book3.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>人性的弱点</h4> <p>¥30</p> </div> </div> </li> <li> <div class="biseller-column1"> <img src="images/book/book1.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>飞花令里的读诗词</h4> <p>¥28</p> </div> </div> </li> <li> <div class="biseller-column1"> <img src="images/book/book2.jpg" class="img-responsive" alt=""> <a href="#"><i class="new"></i></a> <div class="biseller-name"> <h4>亲密关系</h4> <p>¥25</p> </div> </div> </li> </ul> </div> </div> <script type="text/javascript" src="js/jquery.flexisel.js"></script> <div class="clearfix"></div> </div> <div class="col-md-3 span_1_of_right"> <section class="sky-form"> <div class="product_right"> <h3 class="m_2">索引目录</h3> <select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'> <option value="0">社科</option> <option value="1">历史</option> <option value="2">政治</option> <option value="3">文化</option> <option value="4">经济</option> <option value="5">科学</option> </select> <label class="me"></label> <select class="dropdown" tabindex="50" data-settings='{"wrapperClass":"metro"}'> <option value="1">艺术</option> <option value="2">绘画</option> <option value="3">书法</option> <option value="4">摄影</option> <option value="5">音乐</option> </select> <label class="wom"></label> <select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'> <option value="1">生活</option> <option value="2">美食</option> <option value="3">旅游</option> <option value="4">健康</option> </select> <label class="kid"></label> <select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'> <option value="1">文学</option> <option value="2">小说</option> <option value="3">散文</option> <option value="4">诗集</option> </select> <label class="spo"></label></div> </section> <div class="sellers"> <h3 class="m_2">限时特惠</h3> <div class="best"> <div class="icon"> <img src="images/book/book8.jpg" class="img-responsive" alt=""/> </div> <div class="data"> <h4><a href="#">思维风暴</a></h4> <p>¥39</p> <h5>¥32</h5> </div> <div class="clearfix"></div> </div> <div class="best"> <div class="icon"> <img src="images/book/book22.jpg" class="img-responsive" alt=""/> </div> <div class="data"> <h4><a href="#">繁星•春水</a></h4> <p>¥40</p> <h5>¥33</h5> </div> <div class="clearfix"></div> </div> <div class="best"> <div class="icon"> <img src="images/book/book23.jpg" class="img-responsive" alt=""/> </div> <div class="data"> <h4><a href="#">我喜欢你，在时光里</a></h4> <p>¥32</p> <h5>¥27</h5> </div> <div class="clearfix"></div> </div> </div> <div class="sellers"> <h3 class="m_2">标签</h3> <div class="tags"> <ul> <li><a href="#">小说,</a></li> <li><a href="#">文集,</a></li> <li><a href="#">散文,</a></li> <li><a href="#">故事,</a></li> <li><a href="#">绘本,</a></li> <li><a href="#">历史,</a></li> <li><a href="#">科学,</a></li> <li><a href="#">政治,</a></li> <li><a href="#">经济,</a></li> <li><a href="#">文化,</a></li> <li><a href="#">绘画,</a></li> <li><a href="#">启蒙,</a></li> <li><a href="#">艺术,</a></li> <li><a href="#">音乐,</a></li> <li><a href="#">摄影,</a></li> <li><a href="#">美食,</a></li> <li><a href="#">书法,</a></li> <li><a href="#">医学,</a></li> <li><a href="#">旅游,</a></li> <li><a href="#">教材,</a></li> </ul> </div> </div> <section class="sky-form"> <div class="sellers"> <h3 class="m_2">畅销榜</h3> <section class="slider"> <div class="flexslider"> <ul class="slides"> <li> <div class="tittle"> <img src="images/book/book14.jpg" class="img-responsive" alt=""/> <h6>月亮与六便士</h6> <p>满地都是六便士,</p> <p>他却抬头看见了月亮。</p> <p>————[英]威廉•萨默塞特•毛姆</p> <a class="show1" href="#">更多内容</a> </div> </li> <li> <div class="tittle"> <img src="images/book/book21.jpg" class="img-responsive" alt=""/> <h6>云边有个小卖部</h6> <p>在多数人心中,</p> <p>自己的故乡后来会成为一个点,</p> <p>如同亘古不变的孤岛。</p> <a class="show1" href="#">更多内容</a> </div> </li> <li> <div class="tittle"> <img src="images/book/book13.jpg" class="img-responsive" alt=""/> <h6>毕业</h6> <p>看似亲密的关系,</p> <p>都有着自己不得不做的立场。</p> <p> </p> <a class="show1" href="#">更多内容</a> </div> </li> <li> <div class="tittle"> <img src="images/book/book24.jpg" class="img-responsive" alt=""/> <h6>听听那冷雨</h6> <p>前尘隔海。</p> <p>古屋不再。</p> <p></p> <a class="show1" href="#">更多内容</a> </div> </li> </ul> </div> </section>  <script defer src="js/jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script>  </div> </section> </div> <div class="clearfix"></div> </div> </div>  <div class="footer"> <div class="container"> <p>Copyright © 2015.Company name All rights reserved.More Templates <a href="http://ipf.xtu.edu.cn/" target="_blank" title="湘潭大学知识产权学院">湘潭大学知识产权学院</a> - Collect from <a href="https://www.xtu.edu.cn" title="湘潭大学" target="_blank">湘潭大学</a></p> </div> </div></body></html>

HTML期末作业-网上书城网上书店部分截图

关键词：作业

解决方案&服务

客户&案例

营销资讯

关于我们

微信公众号

快捷入口

HTML期末作业-网上书城网上书店