网上书城原型界面样式编写（1）

原型界面样式编写

目录

实现内容

1.用户登录注册界面编写
2.前台主界面编写
3.搜索书籍界面编写
4.购物车界面编写

代码块编写

用户登录注册界面代码
login.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<link rel="seylesheet" type="text/css" href="css/bootstrap.css"/>
		 <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
	<style>
		.form-signin{
			position: relative;
			width:400px;
			top:200px;
			left:50%;
			margin-left:-200px;
			
		}
		</style>
	</head>
	<body class="text-center">
    <form class="form-signin" action="" method="post">
  <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">登录界面</h1>
  <div class="form-label-group">
  <input type="text" id="name" name="nmae" class="form-control" placeholder="请输入用户名...." required autofocus>
 </div>
 
 <div class="form-label-group">
  <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码..." required>
  </div>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
</form>



		<script src="../bootstrap-4.4.1/dist/js/bootstrap.js"></script>
	</body>
</html>

register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<link rel="seylesheet" type="text/css" href="css/bootstrap.css"/>
		 <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
	<style>
		.form-signin{
			position: relative;
			width:400px;
			top:200px;
			left:50%;
			margin-left:-200px;
			
		}
		</style>
	</head>
	<body class="text-center">
    <form class="form-signin" action="" method="post">
  <img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
  <h1 class="h3 mb-3 font-weight-normal">登录界面</h1>
  <div class="form-label-group">
  <input type="text" id="name" name="nmae" class="form-control" placeholder="请输入用户名...." required autofocus>
 </div>
 
 <div class="form-label-group">
  <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码..." required>
  </div>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
</form>



		<script src="../bootstrap-4.4.1/dist/js/bootstrap.js"></script>
	</body>
</html>

前台主界面编写





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>飞凡网上书店</title>
    




<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  </head>
  
  <body>
	<!--top-->
	


<div id="top_div">
	
		
		
			
				
					<p class="left">您好，欢迎来到飞凡网上书店 ！</p>
			<p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p>
				
				
			
		
	
	<div class="fixed"></div>
</div>
   
<div id="header_div">
	<div id="search">
		<!--下面form标签的id属性不能修改，因为在css中使用了一个id选择器-->
		<form id="form">
		<table width="413" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<input type="text" name="" value="" id="input">
				</td>
				<td>
					<input type="image" name="imageField" src="images/btn_search.png" />
				</td>
			</tr>
		</table>
		</form>
	</div>
</div>

<!--nav-->
<div id="nav">
	<ul id="menu"></ul>
</div>
<!--end nav-->

	<!--end top-->

	<!--con-->
	<div class="w960 mt10">
	 	<div class="side left">
			

			<h3>图书分类</h3>
			
			<ul class="classify bgf7e4e4 bdf7e4e4">
				
				<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="#">人文社科</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>
				
				<div class="fixed"></div>
			</ul>

		</div>
		<div class="w740 right">
			<div class="main_div">
				<div class="banner left"><img src="images/banner.png" /></div>
				<div class="fixed"></div>
			</div>
			
			<div class="main_div mt10">
	        	<h2>
	        		<cite class="left">新书上架</cite>
	        		<div class="fixed"></div> 
	            </h2>
	           	
	            <ul class="arivals">
	            	
	            	<li>
	            		<a href="#"><img src="imgs/9.png" /></a><p>爱的样子</p><p class="red">￥23.60</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/8.png" /></a><p>时光走了你还在</p><p class="red">￥18.50</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/7.png" /></a><p>AutoCAD入门到精通</p><p class="red">￥27.92</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/6.png" /></a><p>Java从入门到精通</p><p class="red">￥29.90</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/5.png" /></a><p>Python自动化运维</p><p class="red">￥58.60</p>
	            	</li>	
	            	
	            	<div class="fixed"></div> 
	            </ul>
	        </div>
	        
	        <div class="main_div mt10">
	        	<h2>
	        		<cite class="left">热销图书</cite>
	        		<div class="fixed"></div> 
	            </h2>
	           	
	            <ul class="arivals">
	            	
	            	<li>
	            		<a href="#"><img src="imgs/1.png" /></a><p>冷间谍</p><p class="red">￥28.50</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/2.png" /></a><p>第一商会</p><p class="red">￥24.80</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/3.png" /></a><p>狂人摄影日记</p><p class="red">￥115.30</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/4.png" /></a><p>伊文思与纪录电影</p><p class="red">￥39.60</p>
	            	</li>	
	            	
	            	<li>
	            		<a href="#"><img src="imgs/5.png" /></a><p>Python自动化运维</p><p class="red">￥58.60</p>
	            	</li>	
	            	
	            	<div class="fixed"></div> 
	            </ul>
	        </div>
		</div>    
	 <div class="fixed"></div>   
	</div>
	<!--end con-->

	<!--footer-->
	
<div id="footer_wrap">
	<p>Copyright ©2014 飞凡教育，版权所有</p>
</div>

	<!--end footer-->
</body>
</html>

搜索书籍界面编写





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>飞凡网上书店</title>
    




<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
  </head>
  
  <body>
	<!--top-->
	


<div id="top_div">
	
		
		
			
				
					<p class="left">您好，欢迎来到飞凡网上书店 ！</p>
			<p class="right"><a href="#">登陆</a> | <a href="#">注册</a> | <a href="#">我的购物车</a> | <a href="#">网站首页</a></p>
				
				
			
		
	
	<div class="fixed"></div>
</div>
   
<div id="header_div">
	<div id="search">
		<!--下面form标签的id属性不能修改，因为在css中使用了一个id选择器-->
		<form id="form">
		<table width="413" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<input type="text" name="" value="" id="input">
				</td>
				<td>
					<input type="image" name="imageField" src="images/btn_search.png" />
				</td>
			</tr>
		</table>
		</form>
	</div>
</div>

<!--nav-->
<div id="nav">
	<ul id="menu"></ul>
</div>
<!--end nav-->

	<!--end top-->

	<!--con-->
<div class="w960 mt10">
 	<div class="side left">
			

			<h3>图书分类</h3>
			
			<ul class="classify bgf7e4e4 bdf7e4e4">
				
				<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="#">人文社科</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>
				
				<div class="fixed"></div>
			</ul>

		</div>
    
	<div class="w740 right">     
    	<div class="order02 pb10">
    		
        	<dl class="findbook">
            	<dt class="left"><img src="imgs/1.png" /></dt>
                <dd class="right">
                	<h4>冷间谍</h4>
                    <p><strong>作者：</strong>亨宁曼凯尔</p>
                    <p><strong>价格：</strong>￥28.50</p>
                    <p><strong>出版社：</strong>江苏文艺出版社</p>
                    <p><strong>书籍简介：</strong>东野圭吾最钦佩的欧洲犯罪小说大师力作。把“哈利波特”拉下畅销榜榜首的侦探小说。最匪夷所思的历史真相、最错综复杂的政治斗争、最神秘莫测的间谍形象，最完美的罪犯与最完美的犯罪，结局你永远猜不到</p>
                    <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
                </dd>
                <div class="fixed"></div>
            </dl>
            
        	<dl class="findbook">
            	<dt class="left"><img src="imgs/2.png" /></dt>
                <dd class="right">
                	<h4>第一商会</h4>
                    <p><strong>作者：</strong>寒川子</p>
                    <p><strong>价格：</strong>￥24.80</p>
                    <p><strong>出版社：</strong>北京联合出版公司</p>
                    <p><strong>书籍简介：</strong>超级畅销书作家寒川子创作历时三年全新力作！讲述财富与权力“离不开，靠不住”的明暗法则</p>
                    <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
                </dd>
                <div class="fixed"></div>
            </dl>
            
        	<dl class="findbook">
            	<dt class="left"><img src="imgs/3.png" /></dt>
                <dd class="right">
                	<h4>狂人摄影日记</h4>
                    <p><strong>作者：</strong>阿刘</p>
                    <p><strong>价格：</strong>￥115.30</p>
                    <p><strong>出版社：</strong>电子工业出版社</p>
                    <p><strong>书籍简介：</strong>风光大师段岳衡作序，凯斯.沃克尔、罗伊.莱姆赛、大卫.迪尔邦、佐尔坦.坎威尔、云漫、吴海辰、范朝亮、张焰八位中外摄影名家联名推荐</p>
                    <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
                </dd>
                <div class="fixed"></div>
            </dl>
            
        	<dl class="findbook">
            	<dt class="left"><img src="imgs/4.png" /></dt>
                <dd class="right">
                	<h4>伊文思与纪录电影</h4>
                    <p><strong>作者：</strong>孙红云(译)</p>
                    <p><strong>价格：</strong>￥39.60</p>
                    <p><strong>出版社：</strong>吉林出版集团有限责任公司</p>
                    <p><strong>书籍简介：</strong>本书收录了世界各国著名学者（如比尔·尼克斯等）和伊文思研究专家（如吴沃·托马斯等）从社会、审美等方面研究伊文思纪录电影的15篇文章。文章的研究范围从伊文思创作的第一阶段“电影诗人”时期的《桥》、《雨》一直到封镜之作《风的故事》。书中还收入伊文思1931—1963年间写作的9篇文章，这些论文在欧洲也属于首次整理发表。本书还附录了伊文思的生平与创作年表等资料</p>
                    <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
                </dd>
                <div class="fixed"></div>
            </dl>
            
        	<dl class="findbook">
            	<dt class="left"><img src="imgs/5.png" /></dt>
                <dd class="right">
                	<h4>Python自动化运维</h4>
                    <p><strong>作者：</strong>刘天斯</p>
                    <p><strong>价格：</strong>￥58.60</p>
                    <p><strong>出版社：</strong>刘天斯</p>
                    <p><strong>书籍简介：</strong>中国运维领域偶像级专家、腾讯高级系统工程师在天涯社区和腾讯近10年运维实践的经验和智慧结晶不仅详尽介绍了服务监控、数据报表、系统安全等基础模块，而且深入讲解了自动化操作、系统管理、配置管理、集群管理及大数据应用等高级功能，包含4个完整的综合案例</p>
                    <p class="mt10"><a href="#"><img src="images/btn_shopping.png" /></a><a href="#"><img src="images/btn_accounts.png" /></a> </p>
                </dd>
                <div class="fixed"></div>
            </dl>
            
    	</div> 
	
		<!-- page -->
        <div style="text-align: right;">
        	每页 5 行 共 9 行 第 1 页 共 2 页 <a href='javascript:gotoPage(1)'>首页</a> <a href='javascript:gotoPage(1)'>上一页</a> <a href='javascript:gotoPage(2)'>下一页</a> <a href='javascript:gotoPage(2)'>尾页</a> 页数 <input type='text' id='pageNumber'  style='width:20px;' /> <a href='javascript:jumpPage()'>GO</a>
        </div>
        <!-- end page -->
    
    </div> 
 <div class="fixed"></div>   
</div>
<!--end con-->
	<!--end con-->

	<!--footer-->
	
<div id="footer_wrap">
	<p>Copyright ©2014 飞凡教育，版权所有</p>
</div>

	<!--end footer-->
</body>
</html>

购物车界面编写


 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>飞凡网上书店</title>
    
 
 
 
 
<link href="css/main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
    
 
  </head>
  <body>
	<!--top-->
	
 
 
<div id="top_div">
	
		
		
			
				
					<p class="left">您好admin，欢迎来到飞凡网上书店 ！</p>
					<p class="right"><a href="#">后台管理</a> | <a href="#">退出系统</a> | <a href="#">网站首页</a></p>
				
				
			
		
	
	<div class="fixed"></div>
</div>
   
<div id="header_div">
	<div id="search">
		<!--form的id与下面文本框的id不能修改，因为使用了id选择器定义样式-->
		<form name="bookForm" id="form" method="post" action="#">
		<table width="413" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td>
					<input type="text" name="" value="" id="input">
				</td>
				<td>
					<input type="image" name="imageField" src="images/btn_search.png" />
				</td>
			</tr>
		</table>
		</form>
	</div>
</div>
 
<!--nav-->
<div id="nav">
	<ul id="menu"></ul>
</div>
<!--end nav-->
 
	<!--end top-->
 
	<!--content-->
	<div class="w960 mt10">
		<div class="breadcrumb"></div>
	</div>
 
	<div class="w960">
		<div class="side left">
			
 
			<!--nav-->
			<h4>书籍管理</h4>   
	      	<ul class="classify E6">
		      	<li>&nbsp;&nbsp;<a href="#">新&nbsp;&nbsp;增</a></li>
		      	<li>&nbsp;&nbsp;<a href="#">未上架</a></li>
		      	<li>&nbsp;&nbsp;<a href="#">已上架</a></li>
		      	<li>&nbsp;&nbsp;<a href="#">已下架</a></li>
		      	<div class="fixed"></div>
			</ul>
			<h4>订单管理</h4>        
		    <ul class="classify E6">
		      	<li>&nbsp;&nbsp;<a href="#">未发货</a></li>
		      	<li>&nbsp;&nbsp;<a href="#">已发货</a></li>
		      	<li>&nbsp;&nbsp;<a href="#">已签收</a></li>
		      	<div class="fixed"></div>
			</ul>
			<!--end nav-->
 
		</div>
    
		<div class="w740 right">
			<div class="o-mt">
	        	<h2>未上架书籍</h2>
	        </div>
	        <div class="order01">
	        	<form name="" method="post" action="">
	        	<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
	        		<tr>
	        			<td width="15%" align="right">书名：</td>
	        			<td width="15%">
	        				<input type="text" name="" value="" class="w110 input">
	        			</td>
	        			<td width="15%" align="right"></td>
	        			<td width="15%">
	        				<input type="image" name="imageField2" src="images/btn_cx.png" />
	        			</td>
	        			<td width="15%" align="right"></td>
        				<td width="25%"></td>
              		</tr>
			  	</table>
			 	</form>
	        </div>
	        
	        <div class="order02">
	        	<table width="100%" border="0" cellspacing="0" cellpadding="0">
	              <tr>
	                <th width="15%" class="bd2">书名</th>
	                <th width="15%" class="bd2">作者</th>
	                <th width="15%" class="bd2">价格</th>
	                <th width="25%" class="bd2">出版社</th>
	                <th width="30%" class="bd2">操作</th>
	              </tr>
	              
	              
	              
	              <tr>
	                <td width="15%" class="text">冷间谍</td>
	                <td width="15%" class="text">亨宁曼凯尔</td>
	                <td width="15%" class="text">
	                	28.50
	                </td>
	                <td width="25%" class="text">江苏文艺出版社</td>
	                <td width="30%" class="text">
	                	<a href="#">图片上传</a>
	                	<a href="#">修改</a>
	                	<a href="#">删除</a>
	                	
	                		
	                		
	                			<a href="#">上架</a>
	                		
	                	
	                </td>
	              </tr>
	              
	              
	            </table>
	        </div>
	        
	        <!-- page -->
	        <div style="text-align: right;">
	        	每页 5 行 共 1 行 第 1 页 共 1 页 <a href='javascript:gotoPage(1)'>首页</a> <a href='javascript:gotoPage(1)'>上一页</a> <a href='javascript:gotoPage(1)'>下一页</a> <a href='javascript:gotoPage(1)'>尾页</a> 页数 <input type='text' id='pageNumber'  style='width:20px;' /> <a href='javascript:jumpPage()'>GO</a>
	        </div>
	        <!-- end page -->
	    </div>
 		<div class="fixed"></div>   
	</div>
	<!--end content-->
 
	<!--footer-->
	
<div id="footer_wrap">
	<p>Copyright ©2014 飞凡教育，版权所有</p>
</div>
 
	<!--end footer-->
</body>
</html>

总结

今天的内容就这么多 每天都要加油哦！散会！

版权声明：本文为m0_47906344原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。