基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城

原创

IT司马青衫

发布于 2022-08-16 10:29:16

9340

发布于 2022-08-16 10:29:16

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

<font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质源码】

<font color='#b44846' size='4px'> ❤</font> 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

@TOC

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
	<title>校园二手书交易平台</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>

	<!-- 导航 -->
	<header class="navbar1">
		<div class="nav-info">
			<a href="#" class="username">chieminchan</a>
			<a href="myBookshelf.html" class="bookshelf">||&nbsp;&nbsp;&nbsp;我的书架</a>
			<a href="login.html" class="logout">[ 退 出 ]</a>
		</div> <!-- nav-info -->
		<form class="nav-search">
			<a href=""><img class="logo" src="picture/logo2.png"></a>
			<div class="search-form">
				<a href="#" class="search-logo">| &nbsp;<img src="picture/search.png"></a>
				<input type="search" class="searchIn" id="inp" placeholder="搜书名...">
				<div class="searchBtn" id="but" style="line-height: 40px;">搜索</div>
			</div>
		</form><!--  nav-search -->
		<ul class="menu">
			<li><a class="active" href="">首页</a></li>
			<li><a href="bookStore.html">书籍良品</a></li>
			<li><a href="askBook.html">求书区</a></li>
			<li><a href="#"></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="#">历史 / 地理 / 艺术</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="picture/5.jpg"></li>
					<li><img src="picture/12.jpg"></li>
					<li><img src="picture/21.jpg"></li>
					<li><img src="picture/3.jpg"></li>
					<li><img src="picture/4.jpg"></li>
					<li><img src="picture/5.jpg"></li>
					<li><img src="picture/12.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" id="xslist">
				<li class="book-list">
					<a href="#" class="book-pic">
						<img src="picture/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="bookDetail.html" class="book-buy">立即下单</a>
					</span>
				</li>

				<li class="book-list">
					<a href="#" class="book-pic">
						<img src="picture/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="picture/31.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="picture/41.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="picture/51.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>
			</ul><!--  book-list end -->
		</div><!--  book-part end -->

		<div class="book-part" id="technology">
			<h3 class="book-title"><a href="#">| 工程科技</a></h3>
			<a class="more" href="#"> > > 更多</a>
			<div style="margin-top: 40px; text-align: center;margin-bottom: 40px;">
				暂时没有记录
			</div>
			<!-- <ul class="book-lists">
				<li class="book-list">
					<a href="#" class="book-pic">
						<img src="picture/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="picture/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="picture/31.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="picture/41.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="picture/51.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>
			</ul> -->
		</div><!--  book-part end -->
	</div> <!-- container end-->
	<footer>
		<a href="#">©2022-2022 二手书交易</a>
		<a href="#">意见反馈&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;隐私权声明&nbsp;&nbsp;&nbsp;使用条款</a>
	</footer>
	<script type="text/javascript" src="js/jquery-3.2.js"></script>
	<script type="text/javascript" src="js/xSlider.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/list.js"></script>
	<script type="text/javascript">
		$(function () {
			$(".book-class li a").on("click", function () {
				var classId = $(this).prop("title");
				console.log(classId);
				var classTop = $("#container").find(("#" + classId)).offset().top;
				$("html,body").animate({ scrollTop: classTop + "px" }, 500);
			});
		})
		console.log(xslist);
		let zz = ''
		for (let i = 0; i < xslist.length; i++) {
			zz += `
				<li class="book-list"  id='${xslist[i].id}'>
					<a href="#" class="book-pic">
						<img src="${xslist[i].src}">
					</a>
					<a href="#" class="book-info">
						<h5 class="book-name">${xslist[i].name}</h5>
						<span class="book-detail">${xslist[i].user}</span>
					</a>
					<span class="book-price">${xslist[i].price}
						<a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下单</a>
					</span>
				</li>`

		}
		$("#xslist").html(zz);
		$("#but").click(function () {
			let x = $('#inp').val()
			for (let i = 0; i < xslist.length; i++) {
				if (x == xslist[i].name) {
					$("#xslist").html(
						`
				<li class="book-list"  id='${xslist[i].id}'>
					<a href="#" class="book-pic">
						<img src="${xslist[i].src}">
					</a>
					<a href="#" class="book-info">
						<h5 class="book-name">${xslist[i].name}</h5>
						<span class="book-detail">${xslist[i].user}</span>
					</a>
					<span class="book-price">${xslist[i].price}
						<a href="./bookDetail.html?id=${xslist[i].id}" class="book-buy">立即下单</a>
					</span>
				</li>`
					);
				}
			}


		});





	</script>
</body>

</html>

2.CSS样式代码 🏠

*{
	padding: 0px;
	margin: 0px;
	font-family: Microsoft Yahei;
	box-sizing: border-box;
}
/*navbar*/
.navbar{
	height: 200px;
	width: 100%;
	background-color: white;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.nav-info{
	height: 40px;
	background-color: #4b4d52;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.nav-info a{
	text-decoration: none;
	/*color: white;*/
	color: #d6d2d2 !important;
	font-size: 14px;
	line-height: 40px;
	margin-left: 5px;
	margin-right:25px; 
}

.nav-info a:hover{
	color:white  !important;
}

.nav-search{
	height: 100px;
	width: 100%;
	/*background-color: gray;*/
	display: flex;
	justify-content: flex-start;
	align-content: center;
	position: relative;
}


.search-form{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}



.searchIn{
	width: 31%;
	height: 44px;
	border: 2px solid #4b4d52;
	position: absolute;
	left: 49%;
	top: 27%;
	outline: none;
	font-size: 16px;
	text-indent: 10px;
}

.searchBtn{
	width: 7%;
	height: 44px;
	border: 2px solid #3f4247;
	background-color: #4b4d52;
	position: absolute;
	right: 13%;
	top: 26.6%;
	text-indent: 5px;
	outline: none;
	text-decoration: none;
	text-align: center;
	color: white;
	font-size: 18px;
	cursor: pointer;
	transition: all 0.3s;	
}

.searchBtn:hover{
	font-size: 21px;
	/*text-decoration: underline;*/
}




.logo{
	width: 36%;
	margin-left: 6%;
}

.search-logo{
	text-decoration: none;
	color: #4b4d52;
	font-size: 26px;
	position: absolute;
	left: 45%;
	top: 30.5%;

}
.search-logo img{
	width: 20px;
	margin-left:-6px; 
}

.menu{
	width: 100%;
	height: 50px;
	list-style: none;
	display: flex;
	justify-content: flex-start;
	background-color: #f2f1ea;
	margin-bottom: 0px;
	padding-left: 11%;

}

.menu li a:hover{
	font-weight: 600;
	border: solid #b5aa9a; 
	border-width: 0 0 2px 0;	
}

.menu li{
	height: 50px;
	display: inline-flex;
	justify-content: space-around;
	/*margin-left: 140px;*/
	padding-top: 18px;
	margin-right: 100px; 

}
.menu a{
	text-decoration: none;
	color: #3f4247;
}

.menu li a.active{
	font-weight: 600;
	border: solid #b5aa9a; 
	border-width: 0 0 2px 0;
}

/*轮播图*/

    .slider, .slider .slider-img {
    overflow: hidden;
    height: 295px;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none;
}

}

.book-info{
	display: flex;
	flex-direction: column;
	text-decoration: none;
	justify-content: center;

}

.askbook-info span{
	line-height: 23px;
	margin-left: 27px;
	color: #272222d6;
	font-size: 13px;
	word-wrap:break-word;
}

/*.book-name{
	line-height: 26px;
	margin-left: 27px;
	font-size: 17px;
	color: #ae6d6a;
}*/

.book-detail{
	width: 185px;
	height: 34px;
	line-height: 18px;
	margin-left: 27px;
	color: #272222d6;
	font-size: 13px;
	word-wrap:break-word;
}

.book-price{
	width: 100%;
	height: 34px;
	font-size: 17px;
	line-height: 60px;
	margin-left: 27px;
	color: #880b16;
}


.book-buy{
	width: 40px;
	height: 36px;
	padding: 5px;
	margin-left: 45px; 
	text-decoration: none;
	color: white;
	font-size: 13px;
	border: 1px solid #4b4d52;
	border-radius: 2px;
	background: #4b4d52;
}

.book-buy:hover{
	/*font-weight: 600;*/
	background-color: #626a55;
	border: 1px solid #626a55;
	font-weight: 600;
}

/*脚步*/
footer{
	border-top: 1px solid #ccc;
	width: 100%;
	height: 70px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}

footer a{
	text-align: center;
	font-size: 15px;
	/*margin-left: 30%;*/
	text-decoration: none;
	color: gray;
}