首页 前端知识 HTML5期末大作业:校园二手书交易网站

HTML5期末大作业:校园二手书交易网站

2024-04-23 21:04:48 前端知识 前端哥 192 662 我要收藏

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">||&nbsp;&nbsp;&nbsp;我的书架</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">| &nbsp;<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">
			<span
				class="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>
				联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系:
				<a href="#" class="num">13222221111</a>
			</p>
			<p>
				<span class="address-icon"></span>
				住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:<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>原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:<span class="original-price">¥52.0</span></p>
						<p>售&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:<span class="book-price">¥12.9</span></p>
						<p>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;相:<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>原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:<span class="original-price">¥52.0</span></p>
						<p>售&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价:<span class="book-price">¥12.9</span></p>
						<p>品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;相:<span class="book-condition">八五品</span></p>
						<p>商品描述:<span class="book-desc">有点水印,但并不影响阅读</span></p>
					</div>
				</li>

这里只展示部分网页和部分代码, 如需全部代码,关注公众号(coding加油站)领取。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5798.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!