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

最新推荐文章于 2023-05-10 21:53:28 发布

我真的不想秃头！

最新推荐文章于 2023-05-10 21:53:28 发布

阅读量930

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_47906344/article/details/107019193

版权

原型界面样式编写

实现内容

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>

<!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">

最低0.47元/天解锁文章

我真的不想秃头！

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
网上书城原型界面样式编写（1）

原型界面样式编写目录原型界面样式编写实现内容代码块编写总结实现内容1.用户登录注册界面编写2.前台主界面编写3.搜索书籍界面编写4.购物车界面编写代码块编写用户登录注册界面代码login.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <link rel="seylesheet" type="
复制链接

扫一扫