网上书城的需求分析和前端静态框架

2024年5月2日 互联网

网上书城

  • 需求分析
    • 思维导图大纲
    • 数据库表的设计
  • 前端静态框架
    • 登录注册界面
    • 首页
    • 书籍搜索详情
    • 购物车页面

需求分析

思维导图大纲

在这里插入图片描述

数据库表的设计

在这里插入图片描述

前端静态框架

登录注册界面

去HBuilder X 中去写前端界面代码，新建一个项目，在这个项目中新建css，js，img目录，在css，js中分别导入bootstrap.min.css，bootstrap.min.js，jquery-3.3.1.js，jmg目录中放入你所需要的图片在这里插入图片描述
在 login.html 中测试导入的包是否可以用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /></head><body><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button><script src="js/bootstrap.min.js"></script></body>
</html>

测试界面出现效果，说明css，js可用
在这里插入图片描述
完整的登录界面，注册界面只需要把登录界面中的登录两个中文字改成注册就行了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>登录界面</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><style>.form-signin{/* position: absolute;  绝对定位*//* position: relative; 绝对定位*/position: relative;width: 400px;top: 100px;left: 50%;margin-left: -200px;}</style></head><body><form class="form-signin" action="" method="post"><div class="text-center mb-4"><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><div class="form-label-group"><input type="text" id="name" name="name" 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 text-center">&copy; 2017-2020</p></form><script src="js/bootstrap.min.js"></script></body>
</html>

在这里插入图片描述
在这里插入图片描述

首页

首页中的横幅和搜索栏
在这里插入图片描述

<!-- 横幅 --><div class="row"><div class="col-sm-4">您好，欢迎来到网上书城！</div><div class="col-sm-4 col-sm-offset-4"><a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i></div></div><!-- 搜索栏 --><div class="row"><div class="col-sm-12 search-parent"><!-- 本来这里应该放一张背景图的 --><div class="search"></div><input type="text" id="book_name" name&#
最新文章