HTML5期末大作业：校园二手书交易网站
2024-04-14 05:28:30
1、作品介绍
HTML期末大学生网页设计作业，使用flex响应式布局的校园二手书交易网站，关注公众号（coding加油站）回复“二手书”免费领取。
2、知识应用：采用Div+CSS、鼠标hover、导航栏效果、轮播图、表单、二级三级页面，登录界面等，基本期末作业所需的知识点全覆盖。
3. 内容介绍：
《校园二手书交易网站》共有9个页面，主要的界面有
login.html【登陆页】
核心代码：
<!DOCTYPE html>
<html><head><title>校园二手书交易平台</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/login.css">
</head><body><div id="login-container"><h3>校园二手书交易平台</h3><form><input type="text" name="userName" class="userName" placeholder="学号"><br /><input type="password" name="password" class="password" placeholder="密码"><br /><a class="forgetPass" href="#">忘记密码?</a><br /><button class="loginBtn"><a href="index.html">登录</a></button><br /></form></div>
</body></html>index.html【首页】
首页主要有轮播图，导航显示，搜索框等
核心代码：
<header class="navbar"><div class="nav-info"><a href="#" class="username">你的名字</a><a href="myBookself.html" class="bookshelf">|| 我的书架</a><a href="login.html" class="logout">[ 退 出 ]</a></div> <!-- nav-info --><form class="nav-search"><a href="index.html"><img class="logo" src="img/logo2.png"></a><div class="search-form"><a href="#" class="search-logo">| <img src="img/search.png"></a><input type="search" class="searchIn" placeholder="搜图书..."><button class="searchBtn">搜索</button></div></form><!-- nav-search --><ul class="menu"><li><a class="active" href="index.html">首页</a></li><li><a href="bookStore.html">书籍良品</a></li><li><a href="askBook.html">求书区</a></li></ul></header><!-- 轮播 --><div class="carousel"><div class="book-guide"><h4>图书导航</h4><ul class="book-class"><li><a href="#article" title="article">小说 / 文学 / 语言文字</a></li><li><a href="#technology" title="technology">历史 / 地理 / 艺术</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="#technology" title="technology">工程技术 / 互联网</a></li><li><a href="#">自然科学 / 医药卫生</a></li></ul></div><!-- book-guide --><div class="slider"><div class="slider-img"><ul class="slider-img-ul"><li><img src="img/carousel/5.jpg"></li><li><img src="img/carousel/1.jpg"></li><li><img src="img/carousel/2.jpg"></li><li><img src="img/carousel/3.jpg"></li><li><img src="img/carousel/4.jpg"></li><li><img src="img/carousel/5.jpg"></li><li><img src="img/carousel/1.jpg"></li></ul></div></div><!-- slider --></div><!-- carousel --><!-- 图书分类 --><div id="container"><div class="book-part" id="article"><h3 class="book-title"><a href="#">| 小说 / 文学 / 语言文字</a></h3><a class="more" href="#"> > > 更多</a><ul class="book-lists"><li class="book-list"><a href="bookDetail.html" class="book-pic"><img src="img/book-list/article/1.jpg"></a><a href="bookDetail.html" class="book-info"><h5 class="book-name">白夜行</h5><span class="book-detail">东野圭吾 著 / 南海出版公司 / 2008-09 / 平装</span></a><span class="book-price">￥12.9<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="bookDetail.html" class="book-pic"><img src="img/book-list/article/2.jpg"></a><a href="bookDetail.html" class="book-info"><h5 class="book-name">简爱</h5><span class="book-detail">夏洛特·勃朗特 著 / 世界图书出版公司 / 2011-10 / 平装</span></a><span class="book-price">￥13.8<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="bookDetail.html" class="book-pic"><img src="img/book-list/article/3.jpg"></a><a href="bookDetail.html" class="book-info"><h5 class="book-name">芒果街上的小屋</h5><span class="book-detail">桑德拉·希斯内罗丝、潘帕 著 / 译林出版社 / 2006-06 / 平装</span></a><span class="book-price">￥10.8<a href="#" class="book-buy">立即下单</a></span></li>
bookStore.html【书籍列表页】
书籍列表有菜单弹窗，以及一些书籍的信息，可以点击书籍进入详情页
核心代码：
<div id="book-menu-toggle">查 看 菜 单<div id="toggle-btn"></div></div><div id="book-container"><h3 class="book-title"><a href="#">| 所有二手书</a></h3><ul class="book-lists"><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/1.jpg"></a><a href="#" class="book-info"><h5 class="book-name">白夜行</h5><span class="book-detail">东野圭吾 著 / 南海出版公司 / 2008-09 / 平装</span></a><span class="book-price">￥12.9<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/2.jpg"></a><a href="#" class="book-info"><h5 class="book-name">简爱</h5><span class="book-detail">夏洛特·勃朗特 著 / 世界图书出版公司 / 2011-10 / 平装</span></a><span class="book-price">￥13.8<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/3.jpg"></a><a href="#" class="book-info"><h5 class="book-name">芒果街上的小屋</h5><span class="book-detail">桑德拉·希斯内罗丝、潘帕 著 / 译林出版社 / 2006-06 / 平装</span></a><span class="book-price">￥10.8<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/4.jpg"></a><a href="#" class="book-info"><h5 class="book-name">活着</h5><span class="book-detail">余华 作者 / 上海文艺出版社 / 2004-05 / 平装</span></a><span class="book-price">￥12.1<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/5.jpg"></a><a href="#" class="book-info"><h5 class="book-name">羊脂球</h5><span class="book-detail">莫泊桑 著；柳鸣九 译 / 北京燕山出版社 / 2005-07 / 平装</span></a><span class="book-price">￥11.2<a href="#" class="book-buy">立即下单</a></span></li><li class="book-list"><a href="#" class="book-pic"><img src="img/book-list/article/5.jpg"></a><a href="#" class="book-info"><h5 class="book-name">羊脂球</h5><span class="book-detail">莫泊桑 著；柳鸣九 译 / 北京燕山出版社 / 2005-07 / 平装</span></a><span class="book-price">￥11.2<a href="#" class="book-buy">立即下单</a></span></li>bookDetail.html【书籍详情页】
书籍详情页展示书籍的详情
核心代码：
<div id="book-info"><span class="book-name">目送</span><span class="book-publish">龙应台 著 / 生活·读书·新知三联书店 / 2009-09 / 平装</span><span class="book-price"><p>售价 <a class="final-price">￥13.00</a></p><p>定价 <a class="orignal-price">￥39.00 </a></p><p>品相 <a class="condition">八五品</a></p></span><span class="book-descr"><p>商品描述<a class="book-desc">有点水印,但并不影响阅读</a></p><p>上书时间<a class="upload-time">2018-03-20</a></p></span><span class="buy-now">立即联系卖家进行购买</span></div> <!-- book-info-end --><div id="seller-info"><a class="seller-name">DanielLin</a><span class="seller-span1">联系<a class="seller-chat">在线联系</a></span><span class="seller-span2"><p>电话<a class="seller-num">132-1234-1234</a></p><p>宿舍<a class="seller-adr">22栋B区888</a></p><p>好评率<a class="seller-appraise">90.5%</a></p></span><span class="seller-span3"><p>[ 去看看卖家的二手书 ]</p></span></div><!-- seller-info-end --><div id="book-content"><spanclass="book-tip">目送共由七十四篇散文组成，是为一本极具亲情、感人至深的文集。由父亲的逝世、母亲的苍老、儿子的离开、朋友的牵挂、兄弟的携手共行，写出失败和脆弱、失落和放手，写出缠绵不舍和绝然的虚无。正如作者所说：“我慢慢地、慢慢地了解到，所谓父女母子一场，只不过意味着，你和他的缘分就是今生今世不断地在目送他的背影。</span></div> myBookself.html【我的书架页】
核心代码：
<!-- 个人信息 --><div class="person-info"><p><a href="#" class="name">你的名字</a></p><p><a href="#" class="sex">女</a><img src="img/girl.png" id="sex-pic"></p><p class="set"><a href="#" class="edit">编辑个人主页</a><img class="set-icon" src="img/setting.png"></p><div class="contact"><p><span class="call-icon"></span>联 系：<a href="#" class="num">13222221111</a></p><p><span class="address-icon"></span>住 址：<a href="#" class="address">22栋B区777</a></p><p><span class="major-icon"></span>年级专业：<a href="#" class="major">15级信息管理与信息系统</a></p></div></div><!-- person-info-end --><!-- 书摊和求书选项卡 --><div class="card-btn"><span title="sell-book" id="sell-btn" class="active">我的书摊</span><span title="ask-book" id="ask-btn">我的求书</span><p class="upload-icon"></p><a id="sell-upload" href="#">上传书至书摊</a><a id="ask-upload" href="#">上传求书信息</a><a id="delete-book" href="#">删除二手书</a></div><!-- 我的书摊 --><div id="container"><div id="sell-book"><ul class="book-ul"><li class="book-list"><p class="book-pic"><img src="img/book-list/article/1.jpg"></p><h5 class="book-name">白夜行</h5><form><input type="text" name="book-id" class="book-id" value="2"></form><span class="delete-btn"></span><a href="editBook.html"><span class="edit-btn"></span></a><div class="book-detail"><p>原 价：<span class="original-price">￥52.0</span></p><p>售 价：<span class="book-price">￥12.9</span></p><p>品 相：<span class="book-condition">八五品</span></p><p>商品描述：<span class="book-desc">有点水印,但并不影响阅读</span></p></div></li><li class="book-list"><p class="book-pic"><img src="img/book-list/article/1.jpg"></p><h5 class="book-name">白夜行</h5><form><input type="text" name="book-id" class="book-id" value="3"></form><span class="delete-btn"></span><span class="edit-btn"></span><div class="book-detail"><p>原 价：<span class="original-price">￥52.0</span></p><p>售 价：<span class="book-price">￥12.9</span></p><p>品 相：<span class="book-condition">八五品</span></p><p>商品描述：<span class="book-desc">有点水印,但并不影响阅读</span></p></div></li>这里只展示部分网页和部分代码， 如需全部代码，关注公众号（coding加油站）回复“二手书”领取。
HTML5期末大作业：校园二手书交易网站相关推荐
- HTML5期末大作业：电影介绍类型网站设计——《盗梦空间》8页 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕业设计源码
HTML5期末大作业:电影介绍类型网站设计--<盗梦空间>8页 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见 ...
- HTML5期末大作业：旅游家乡景点网站设计——河北(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html旅游网页 web课程设计网页规划与设计 html景点介绍...
HTML5期末大作业:旅游家乡景点网站设计--河北(8页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材 ...
- HTML5期末大作业：电商购物网站设计——红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 电商购物功能齐全 dw网页设计 大学生商城购物网站
HTML5期末大作业:电商购物网站设计--红色的服装商城B2C网站(40页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常 ...
- HTML5期末大作业：家居/家电/家居网站设计——html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机...
HTML5期末大作业:家居/家电/家居网站设计--html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网 ...
- HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- HTML5期末大作业：关于动漫网站设计(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码...
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
- HTML5期末大作业：关于餐饮美食网站设计——香港美食介绍(8页) HTML+CSS+JavaScript 大学生毕设网页设计源码HTML 实训大作业HTML
HTML5期末大作业:关于餐饮美食网站设计--香港美食介绍(8页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 大学生毕设网页设 ...
- HTML5期末大作业：明星个人介绍网站设计——杨洋(10页) HTML+CSS+JavaScript 个人网页制作 学生个人网页Dreamweaver设计作业 学生HTML个人网页作业作品下载
HTML5期末大作业:明星个人介绍网站设计--杨洋(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题 ...
- HTML5期末大作业：关于酒店主题网站设计——高级酒店公寓网页(4页) HTML+CSS+JavaScript...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
最新文章
- Pytorch手敲NLP 模型训练代码四大步骤总结
- 如何提升springboot服务吞吐量
- 使用spring boot创建fat jar APP
- ASP.NET学生信息管理系统-权限管理-用户资料
- winform 64位系统中使用
- 程序员面试金典 - 面试题 17.24. 最大子矩阵（转成一维最大子序和 DP）
- linux不挂断运行python文件
- 信息系统工程监理服务及营销策略
- mysql如何进行以,分割的字符串的拆分，find_in_set使用
- Maven学习总结（36）——Apache Maven 3.5.0抢鲜看
- Mybatis动态标签基本使用
- visio2016专业版2018最新密钥和下载方法 整理
- 吉林大学计算机网络考研知识点整理
- 【windows 自搭服务器】小白教程
- TNF5SLNO 华为OSN1800全新原包装4路STM-16，8路STM-4或8路STM-1光接口板
- 小米手机销量超过苹果晋升全球第二
- 远程电脑不能复制粘贴
- mysql级联删除_近百道MySQL面试题和答案（2020收藏版）（完结篇）
- thinkphp构架
- 怎么在自己的网站中插入网易云播放器