用HTML+CSS搭建前端二手书商城

最新推荐文章于 2023-06-08 09:49:12 发布
最新推荐文章于 2023-06-08 09:49:12 发布
阅读量2.5k 收藏 71
点赞数 9
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70495636/article/details/128458693
版权

前言：项目采用的技术栈: 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>&nbsp;>&nbsp;用户注册
			</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>&nbsp;
				</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"/>&nbsp;全选</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"/>&nbsp;全选</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

m0_70495636
关注
  • 9
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
JavaScript课程设计实训大作业：购物网站（含源代码+运行截图+实训报告）
06-05
基本功能： 网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能； 用户能够注册后购物，查看订单、购物车和个人信息； 管理员有管理商品和用户的功能。 实现效果： 图片放大特效，浮动广告，文字滚动，商品秒杀活动，用户注册验证等。 1.1功能介绍 基本实现了网站显示商品分类和商品信息，提供搜索商品、浏览商品的功能；注册和登录，查看订单、购物车和个人信息注册验证；图片放大特效，浮动广告，弹窗广告，文字滚动，商品秒杀活动等。 1.2开发技术 综合运用HTML+CSS+JavaScript技术。 2.1 系统模块划分 网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码
qq_38512792的博客
04-22 329
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
【网页设计】基于HTML在线图书商城购物项目设计与实现
weixin_BJ050106的博客
12-31 220
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
HTML+CSS搭建书城页面（css阴影，css渐变、font-awesome）
一个不知名的程序员
07-28 3521
利用css盒阴影，css渐变、font-awesome，HTML定位流等css知识配合HTML和css的基础知识，完成书城界面的搭建。 一、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑马书城</title> <!--css代码--> <link rel="stylesheet"
纯Html5实现网上书城界面
everything002的博客
05-04 9015
老师不让使用css 后来发现纯html5页面也可以实现很多事情 效果图： 1.设置8个横向div作为模板 弄了一小时我发现，Notepad,subline_Text,Dreamware，这三个软件对组件的宽高背景色设计需要用到css. ——所以降低一定难度，对盒子的宽高进行css设置。 （为了让老师清除只对这几个参数进行了css设置，这里采用内联的写法） 我还是很奇怪这个div的宽高，背景色应...
HTML5+CSS3 创建网上书店界面
qq_55786319的博客
10-20 3946
超链接的简单运用 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网上书店——火热开售【海量图书，欢迎选购】</title> <style> body{background: #e5ede2;} body,nav,ul,li{ margin:0;padding: 0 } nav{ background-color: #9
web课程设计网页规划与设计 ：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
qq_365392777
08-09 6427
web课程设计网页规划与设计 ：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列...
web前端 基于html实现花店购物网站源码(HTML+CSS+JavaScript) 企业网站制作
专注于dreamweaver网页设计制作
01-06 391
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
HTML网页设计
08-08 3815
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
HTML+CSS做的商城页面
qq_53682646的博客
10-04 1万+
品优购小商城，用html+css做的三个静态页面
仿华为商城部分前端界面html+css+js
06-28
web前端商城网页项目
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
2022最新仿小米商城首页html+css+js
09-22
2022最新仿小米商城首页html+css+js banner可切换，产品可滑动
前端学习html+css+js.zip
最新发布
01-05
前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端学习html+css+js前端学习html+css+js 前端学习html+css+js前端...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
基于Html的图书小说静态网站设计
毕业作品网站
06-08 786
图书小说市场的竞争：图书小说市场竞争激烈，如何提供更好的阅读体验、更优质的内容已成为图书小说企业的重要问题。而基于Html的图书小说静态网站设计可以提供更丰富、更多样化的内容，从而提高企业的竞争力。数字阅读的普及：随着数字阅读的普及，越来越多的人选择通过网络来阅读图书和小说。而基于Html的图书小说静态网站设计可以提供更便捷、更高效的阅读体验。网络技术的发展：随着互联网技术的不断发展，越来越多的人选择通过网络来获取信息。因此，基于Html的图书小说静态网站设计可以更好地满足人们的需求。
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 5万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
使用HTML+CSS+JSP完成前端页面结构的布局和实现
06-02
好的，我了解您的问题。那么，您想知道如何使用 HTML、CSS 和 JSP 来完成前端页面的布局和实现，对吧？ 首先，让我们来看一下 HTML。HTML 是一种标记语言，用于描述网页的结构和内容。您可以使用 HTML 标记来创建网页的各种元素，例如标题、段落、列表、表格、图像等等。以下是一个简单的 HTML 页面的例子： ``` <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到我的网页</h1> <p>这是一个段落</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> </body> </html> ``` 在这个例子中，我们使用了 `<html>` 元素来定义整个网页，使用 `<head>` 元素来定义网页的头部信息，包括标题等等。而 `<body>` 元素用于定义网页的主体内容，包括各种元素，例如标题、段落、列表等等。 接下来，让我们来看一下 CSS。CSS 是一种样式表语言，用于描述网页的外观和样式。通过 CSS，您可以为 HTML 元素定义各种样式，例如颜色、字体、大小、边框、背景等等。以下是一个简单的 CSS 样式表的例子： ``` h1 { color: #333; font-size: 24px; text-align: center; } p { color: #666; font-size: 16px; line-height: 1.5; } ul { list-style: none; padding: 0; margin: 0; } li { color: #999; font-size: 14px; padding: 5px 10px; border-bottom: 1px solid #ddd; } ``` 在这个例子中，我们使用了各种 CSS 属性来定义不同元素的样式，例如 `color` 用于定义文字颜色，`font-size` 用于定义字体大小，`text-align` 用于定义文字对齐方式，`list-style` 用于定义列表样式等等。 最后，让我们来看一下 JSP。JSP 是一种 Java 技术，用于动态生成 HTML 页面。您可以在 JSP 页面中使用 Java 代码来生成 HTML 元素，例如表格、列表、表单等等。以下是一个简单的 JSP 页面的例子： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" %> <!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <h1>欢迎来到 <%= request.getContextPath() %> 的网页</h1> <p>当前时间是 <%= new java.util.Date() %></p> <ul> <% for (int i = 1; i <= 5; i++) { %> <li>列表项 <%= i %></li> <% } %> </ul> </body> </html> ``` 在这个例子中，我们使用了 `<% %>` 标记来插入 Java 代码，例如使用 `request.getContextPath()` 插入当前上下文路径，使用 `new java.util.Date()` 插入当前时间，使用 `for` 循环插入列表项等等。 综上所述，使用 HTML、CSS 和 JSP 可以完成前端页面的布局和实现。您可以使用 HTML 描述页面结构和内容，使用 CSS 描述页面样式和外观，使用 JSP 生成动态内容和数据。希望这能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值