前言:项目采用的技术栈: HTML+CSS
一、项目预览
1、首页
2.书城
3、我的
用户可以在设置中修改自己的信息
4.商品详情
5.购物车
6.评论
7.登录
8.注册
二、项目实现
1、项目目录结构
2、代码实现html
主页、登录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="keywords" content="环宇书屋" />
<meta name="description" content="环宇书屋" />
<title>环宇书屋</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css"/>
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎来到环宇书屋!</span>
<span class="corner fr">
<ul>
<li class="login_li"><a href="javascript:void(0);" class="tc">登录</a></li>
<li><a href="/user/register">注册</a>|</li>
<li><a href="/admin">管理员登录</a>|</li>
<li class="user_li nLi">
<a F;">登录名</a>
<div class="user_handle">
<a href="personal.html">个人中心</a>
<a href="ownTopic.html">我的话题</a>
<a href="javascript:void(0);">退出</a>
</div>
</li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
<div id="gray"></div>
<div class="popup" id="popup">
<div class="top_nav" id='top_nav'>
<div align="center">
<i></i>
<span>登录账号</span>
<a class="guanbi"></a>
</div>
</div>
<div class="min">
<div class="tc_login">
<div class="login_register">
<form id="register-form" target="_top" >
<div align="center">
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">
<input type="password" name="pass" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">
</div>
<dd>
<div class="user">
<input type="checkbox" name="user" id="user" value="记住用户" class="r_user" />记住用户
<a href="password.html" target="_blank">忘记密码?</a>
</div>
</dd>
<div align="center">
<input type="button" id="register-btn" class="button" title="Sign In" value="登录">
</div>
<dd>
<div align="center"><a href="/user/register" target="_blank">立即注册!</a></div>
</dd>
</form>
</div>
</div>
</div>
</div>
</div>
<!--nav start-->
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg"/></a>
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi"></li>
<li class="nLi">
<h3><a href="/">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="/user/main">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="/user/mine">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--banner start-->
<div class="banner">
<div class="bd">
<ul>
<li class="first"><a href="javascript:void(0);"></a></li>
<li class="second"><a href="javascript:void(0);"></a></li>
<li class="third"><a href="javascript:void(0);"></a></li>
</ul>
</div>
<div class="hd"><ul></ul></div>
</div>
<!--notice start-->
<div class="notice_wrap">
<div class="notice">
<div class="bd fl">
<b>通知公告:</b>
<ul class="infoList">
<li><span class="date">[2022-12-13]</span><a href="nDetail.html">有新书上架了!</a></li>
<li><span class="date">[2022-12-13]</span><a href="nDetail.html">考证不再怕,各种资料任你挑</a></li>
</ul>
</div>
<a href="notice.html" class="more fr">更多+</a>
<div class="clear"></div>
</div>
</div>
<div class="title"><span>热卖书单</span></div>
<div class="container">
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" alt="beauty" width="220" height="150">
</a>
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/ac1.jpg" alt="beauty" width="220" height="150">
</a>
<div class="text">beauty ----------------</div>
</div>
<div class="img1">
<a href="#" target="_self">
<img src="images/ac1.jpg" alt="beauty" width="220" height="150">
</a>
<div class="text">beauty ----------------</div>
</div>
</div>
<div class="container">
<h2><font size="5" color="green">环宇书屋欢迎您</font></h2>
</div>
</body>
</html>
注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书屋</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/popup.css" />
</head>
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎访问环宇书屋!</span>
<span class="corner fr">
<ul>
<li><a href="upload.html">上传</a>|</li>
<li><a href="javascript:void(0);">注册</a>|</li>
<li class="login_li"><a href="javascript:void(0);">登录</a></li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
</div>
<!--nav start-->
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi"></li>
<li class="nLi">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="schoolmate.html">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="exam.html">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--inside content start-->
<div class="inside_wrap">
<div class="inside_con">
<div class="adr">
<a href="index.html">首页</a> > 用户注册
</div>
<div class="register_box">
<div class="tc_login">
<div class="login_register fl">
<form id="form_register" target="_top">
<div align="center">
<span class="error">请务必填写所有选项(填写的用户名已有时提示)</span>
<i class="icon-mobile-phone"></i>
<input type="text" name="name" id="name" required="required"
placeholder="请输入用户名(6-10位字母或数字组成)" autocomplete="off" class="input_yh">
<input type="password" name="pass" id="pass" required="required"
placeholder="请输入密码(6-10位字母或数字组成)" autocomplete="off" class="input_mm">
<input type="password" name="pass_agin" id="pass_agin" required="required"
placeholder="请确认密码" autocomplete="off" class="input_mm">
<input type="email" name="email" id="emial" required="required"
placeholder="请输入邮箱(方便找回密码)" autocomplete="off" class="input_el">
</div>
<div align="center">
<input type="button" id="reg_btn" class="button" title="Sign In" value="注册">
</div>
</form>
</div>
<div class="l_img fl">
<img src="/images/sj.jpg" />
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
</html>
商城
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书城</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css"/>
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎来到环宇书屋!</span>
<span class="corner fr">
<ul id="nameshow">
<li class="user_li">
<div class="user_handle">
<a href="">个人中心</a>
<a href="">上传资料</a>
<a href="">我的话题</a>
<a href="">我的下载</a>
<a href="javascript:void(0); "><li id="logout">退出</li></a>
</div>
</li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
</div>
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi"></li>
</li>
<li class="nLi">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="schoolmate.html">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="exam.html">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--inside content start-->
<div class="inside_wrap">
<div class="inside_con">
<div class="adr">
<a href="index.html">书城</a>
</div>
<div class="inside_box">
<div class="sidemenu fl">
<div class="s_title">书城特色</div>
<ul>
<li class="on"><a href="/user/qmzl">期末资料</a></li>
<li><a href="/user/zysj">专业书籍</a></li>
<li><a href="/user/ky">考研</a></li>
<li><a href="">考证</a></li>
</ul>
</div>
<div class="ic_wrap fr">
<!-- <div class="title"><span>期末资料</span></div> -->
<div class="container1">
<form id="form_register" target="_top">
<div class="img">
<a href='/user/spxqy?id=1' class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text">
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2>
</div>
</div>
</form>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
</a>
<div class="text">
<h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2>
</div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
<div class="img">
<a href="index.html" class="logo fl"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="170px" /></a>
<div class="text"><h2 class="zti"><font size="2" color="black">《活着》</font></h2>
<h2 class="zti"><font size="2" color="black">余华</font></h2>
<h2><font size="3" color="red">¥183</font></h2></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
</html>
商品详情、评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书城</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css"/>
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎来到环宇书屋!</span>
<span class="corner fr">
<ul id="nameshow">
<li class="user_li">
<div class="user_handle">
<a href="">个人中心</a>
<a href="">上传资料</a>
<a href="">我的话题</a>
<a href="">我的下载</a>
<a href="javascript:void(0); "><li id="logout">退出</li></a>
</div>
</li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
</div>
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="schoolmate.html">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="exam.html">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<body>
<div class="booksDeatail">
<form id="info-submit" target="_top">
<img src='/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg' width="200px">
<p>商品编号:1</p>
<p>书名:《活着》</p>
<p>作者:余华</p>
<p>简介:一本照进现实的故事</p>
<p>价格:¥183</p>
</form>
<div class="container11">
<button>购买</button>
</div>
<div class="container8">
<a href="/user/gwc" class="logo fl"><img src="/images/购物车空.png" width="30px"/></a>
</div>
<div class="container5">
<div class="container7">
<img src="/images/1190119748820108_b.jpg" width="50px">
</div>
<div class="container8">
<h2 class="zti"><font size="0.2" color="black">AA</font></h2>
</div>
<textarea class="comment-send-input" name="comment" form="commentForm" cols="80" rows="5" placeholder="请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。"></textarea>
<input class="comment-send-button" type="submit" value="发表评论">
</div>
<div class="container6">
<div class="container7">
<img src="/images/1190119748820108_b.jpg" width="50px">
</div>
<div class="container8">
<h2 class="zti"><font size="1" color="black">cc</font></h2>
</div>
<div class="container9">
<h2 class="zti"><font size="3" color="black">真的喜欢余老先生的书</font></h2>
</div>
</div>
<div class="container10">
<div class="container7">
<img src="/images/1190119748820108_b.jpg" width="50px">
</div>
<div class="container8">
<h2 class="zti"><font size="1" color="black">dd</font></h2>
</div>
<div class="container9">
<h2 class="zti"><font size="3" color="black">值得买!!!!</font></h2>
</div>
</div>
</div>
</body>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
</html>
购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书城</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="css/popup.css"/>
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎来到环宇书屋!</span>
<span class="corner fr">
<ul id="nameshow">
<li class="user_li">
<div class="user_handle">
<a href="">个人中心</a>
<a href="">上传资料</a>
<a href="">我的话题</a>
<a href="">我的下载</a>
<a href="javascript:void(0); "><li id="logout">退出</li></a>
</div>
</li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
</div>
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi"></li>
</li>
<li class="nLi">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="schoolmate.html">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="exam.html">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<body>
<div class="title"><span>购物车</span></div>
<div class="gwc">
<table id="cartTable">
<thead>
<tr>
<th><label><input class="check-all check" type="checkbox"/> 全选</label></th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox"><input class="check-one check" type="checkbox" /></td>
<td class="goods"><img src="/images/O1CN01tbUE5l1afYJJLcMlm_!!0-item_pic.jpg_300x300q90.jpg" width="200px" /><span>《活着》</span></td>
<td class="price">56</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="1" />
<span class="add">+</span></td>
<td class="subtotal">183</td>
<td class="operation"><span class="delete">删除</span></td>
</tr>
</tbody>
</table>
<div class="foot" id="foot">
<label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label>
<a class="fl delete" id="deleteAll" href="javascript:;">删除</a>
<div class="fr closing">结 算</div>
<div class="fr total">合计:¥<span id="priceTotal">56.00</span></div>
<div class="fr selected" id="selected">已选商品
<span id="selectedTotal">1</span>件
<span class="arrow up">︽</span>
<span class="arrow down">︾</span>
</div>
<div class="selected-view">
<div id="selectedViewList" class="clearfix">
<!--<div><img src="images/1.jpg"><span>取消选择</span></div>-->
</div>
<span class="arrow">◆<span>◆</span></span>
</div>
</div>
</div>
</body>
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
</html>
我的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>环宇书城</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<!--header start-->
<div class="header_wrap">
<div class="header">
<span class="wel_word fl">欢迎来到环宇书屋!</span>
<span class="corner fr">
<ul id="nameshow">
<li class="user_li">
<!-- <a href="javascript:void(0);">登录名</a> -->
<div class="user_handle">
<a href="">个人中心</a>
<a href="">上传资料</a>
<a href="">我的话题</a>
<a href="">我的下载</a>
<a href="javascript:void(0); "><li id="logout">退出</li></a>
</div>
</li>
</ul>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
</div>
<div class="nav_menu">
<a href="index.html" class="logo fl"><img src="/images/未标题-1.jpg" /></a>
<div class="nav_list fr">
<ul id="nav" class="nav clearfix">
<li class="nLi"></li>
</li>
<li class="nLi">
<h3><a href="#">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="schoolmate.html">书城</a></h3>
</li>
<li class="nLi">
<h3><a href="exam.html">我的</a></h3>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--inside content start-->
<div class="inside_wrap">
<div class="inside_con">
<div class="inside_box">
<div class="sidemenu fl">
<div class="s_title">我的商城</div>
<ul>
<li class="on"><a href="/user/gwc">我的购物车</a></li>
<li><a href="/user/pl">我的评论</a></li>
<li><a href="/user/sc">我的收藏</a></li>
<li><a href="/user/sc">设置</a></li>
</ul>
</div>
<div class="ic_wrap fr">
<div class="container12">
<div class="container77">
<img src="/images/1190119748820108_b.jpg" width="80px">
</div>
</div>
<div class="container13">
<input class="comment-send-button" type="submit" value="上传头像"></div>
<div class="container15">
<h1><font face ="行书" size="3" color="black" >基本信息</font></h1>
<form action="#">
用户姓名:<input type="text" value ="AA"><br>
用户性别:<input type="text" value ="女"><br>
电话号码:<input type="text" value="13830247479"><br>
收货地址:<input type="text" value="8号楼5单元8417"><br>
<button>完成</button>
</form>
</div>
</div>
<div class="container13">
</div>
<!-- <div class="clear"></div> -->
</div>
</div>
</div>
<!--footer start-->
<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="/js/common.js"></script>
</body>
</html>
3.CSS
样式文件太大了,我放入网盘了,大家有需要可以自己下载。
链接:https://pan.baidu.com/s/1KNpmgkUpG_HuPN_U8uRS3w?pwd=4lul
提取码:4lul