當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/15 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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期末作业-网上书城网上书店的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： matlab排序第二条件,科学网—【M
下一篇： Java基础入门笔记-算术运算符