网上书城项目学习版（二）

最新推荐文章于 2023-03-02 12:36:53 发布

沿途为何没爱河

最新推荐文章于 2023-03-02 12:36:53 发布

阅读量228

点赞数

分类专栏：网上书城项目

本文链接：https://blog.csdn.net/Lzxccas/article/details/107058915

版权

网上书城项目学习版（二）

登录界面绘制
首界面面绘制
购物车界面
书籍详情

登录界面绘制

为了美观我们在HBuilderX 里面用Bootstrap写登录样式

先引用CSS样式

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

还有JS样式记得写在body里面

<script src="js/bootstrap.min.js"></script>

登录界面的代码

<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"> 记住账号密码
				</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; 2019-2020</p>
		</form>

还有style

<style>
			.form-signin{
				position: relative;
				width: 500px;
				top: 200px;
				left: 50%;
				margin-left: -270px;
			}
			.form-label-group{
				margin-top: 20px;
			}
			.btn{
				margin-top: 20px;
			}
		</style>

在这里插入图片描述

注册同理只需要把记住密码删了就可以改了

在这里插入图片描述

首界面面绘制

下图是我们要写的大概样子
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/fg.css" />
	</head>
	<body>

		<div class="container">
			<!-- 横幅 -->
			<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="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>

最低0.47元/天解锁文章

沿途为何没爱河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网上书城项目学习版（二）

网上书城项目学习版（二）登录界面绘制首界面面绘制购物车界面书籍详情登录界面绘制为了美观我们在HBuilderX 里面用Bootstrap写登录样式先引用CSS样式<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />还有JS样式记得写在body里面<script src="js/bootstrap.min.js"></script>登录界面的代码<form
复制链接

扫一扫