HTML期末作业-网上书城网上书店
2024-04-12 20:02:11
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>
<!-- header --><div class="header"><div class="top_bg">
<div class="container">
<div class="header_top"><div class="logo"><a href="index.html"><img src="data: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-for-nav --><script>$( "span.menu" ).click(function() {$( ".head-nav ul" ).slideToggle(300, function() {// Animation complete.});});</script><!-- script-for-nav --><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>
<!-- header --><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>
<!-- instock -->
<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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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><!-- FlexSlider --><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><!-- FlexSlider --></div></section></div><div class="clearfix"></div> </div>
</div>
<!-- footer --><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>
<!-- footer --></body>
</html>
HTML期末作业-网上书城网上书店部分截图
HTML期末作业-网上书城网上书店相关推荐
- Springboot考研网上辅导系统fu1ei计算机毕业设计-课程设计-期末作业-毕设程序代做
Springboot考研网上辅导系统fu1ei计算机毕业设计-课程设计-期末作业-毕设程序代做 [免费赠送源码]Springboot考研网上辅导系统fu1ei计算机毕业设计-课程设计-期末作业-毕设程 ...
- html网页设计作业代码——网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页
HTML5期末大作业:网上鲜花网站设计--网上鲜花网页设计(5页)HTML+CSS+JavaScript web期末作业设计网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- 网页设计期末作业-网上咖啡店（仿星巴克）
网页设计期末作业-网上咖啡店(仿星巴克) 如下动态图所示:(下载链接在文末) 点我下载链接
- springboot+vue网上书城书店销售商城系统
功能介绍 系统的主要功能包括首页.个人中心.用户管理.图书类型管理.图书分类管理.图书信息管理.我的收藏管理.系统管理.订单管理等内容.任何用户只要进入网站不需登录也可浏览到的信息,后台管理是针对已登 ...
- 【案例】全国知名网上书城——基于企业中台构建智慧悦读体验
"本项目案例由 端点科技 投递并参与由数据猿&上海大数据联盟联合推出的"行业盘点季之数智化转型升级"大型主题策划活动之<2021中国企业数智化转型升级创新服 ...
- java计算机毕业设计网上书城系统演示录像源码+数据库+lw文档+系统+部署
java计算机毕业设计网上书城系统演示录像源码+数据库+lw文档+系统+部署 java计算机毕业设计网上书城系统演示录像源码+数据库+lw文档+系统+部署 本源码技术栈: 项目架构:B/S架构 开发语 ...
- JAVA高级应用课程设计(网上书城系统——会员登陆模块的设计与实现)
课程设计报告 课 程 名 称: JAVA高级应用课程设计 设 计 题 目:网上书城系统--会员登陆模块的设计与实现 目 录 一.开发背景. 1 (一)背景概述. 1 (二)发展前景 ...
- SSM+网上书城系统 毕业设计-附源码180919
目 录 摘要 1 绪论 1.1 研究意义 1.2开发背景 1.3论文结构与章节安排 2网上书城系统系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2. ...
最新文章
- c语言作业 统计成绩,C语言作业 输入多名学生3门课程成绩，并统计成绩的平均分和总分，并根据总分输出名次。...
- 秋天六食物吃出好皮肤
- lob移表空间 oracle_移动一个带有lob字段的表到另外一个表空间
- Leetcode 905. 按奇偶排序数组
- 2017-06-08 前端日报
- 云炬随笔20210803
- scala为什么需要函数
- 巧用 maxTimeMS 服务端超时，避免承载亿级用户的腾讯云数据库MongoDB服务雪崩
- Python基础——input交互功能
- python调用C语言ctypes详解
- dolphin.php 视频,DolphinPHP V1.0.4发布
- Anylogic中队列属性设置
- 青果信息系统操作问题
- php goto解密
- iTunes只能装C盘吗_为什么电脑软件喜欢默认安装在C盘呢？
- Python3.7+Robot Framework 打开ride.py无界面
- QPython+uiautomator2安卓手机自动化脚本编写
- 尼得科薄型横向线性Slider系列震动马达
- Java IO之：BufferedReader（超详细解析，使用方法说明）
- 关于自动装箱的这几道面试题，你都能答对吗？