网上书城前端界面

2023-10-30

前言

1,用户登录注册界面编写

2,前台主界面编写

3,搜索书籍界面编写

4,购物车界面编写

接下来就上代码了

注册界面

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

登录界面

<!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&#
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

网上书城前端界面 的相关文章

  • 通过span标签动态包装js字符串,这可能会在React中危险地渲染

    我有一个字符串 我想使用 aria label 标签将 span 标签单独添加到字母表中 最终结果将在 React 中危险地呈现 请指教 这就是我所拥有的 const str D C B B const addAriaLabels str
  • 错误:使用本地文件时,summernote 不是一个函数

    我遇到了一个非常奇怪的问题 当我使用本地的 Summernote 文件加载文本编辑器时 发生了 summernote 不是函数 的情况 但是 如果我使用 cdn 文件加载编辑器 一切都会顺利 这是我的 HTML 标头代码
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 具有 dropdown-menu-right 类的下拉菜单未向右对齐

    我有以下导航栏结构 current user username 来自我的模板系统 ul class navbar nav mr auto mt 2 mt lg 0 ul div class dropdown show a class dro
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB
  • -webkit-overflow-scrolling:触摸;无效的属性值

    我不明白为什么这不起作用 我把它放在我的 html 和正文中 它仍然显示无效的属性值并被划掉 我首先尝试在媒体查询中使用它 但它在那里不起作用 有谁知道它对我不起作用的潜在原因 谢谢你 html body width 100 height
  • 如何为带有标题图像的移动设备设置 HTML,该图像占据浏览器的整个宽度?

    我担心的是我必须为移动设备建立一个网站 概念中是将图像设置为标题 现在的问题是 不同的智能手机具有不同的显示分辨率 有例如840x560 480x320 或 800x480 我必须编写什么元标签 CSS 等才能使 每个 现代智能手机中的图像
  • 如何使h1标签以其实际宽度居中

    我需要使 h1 标签居中 还需要在其周围制作边框 为了防止占用更多宽度 我给出display inline block但标签没有响应text align center then h1 text align center border 1px
  • 使整个网页着色

    How I can take any given webpage and make everything look tinted a certain color Basically if you take google and tint i
  • Position:fixed 内的position:fixed: 哪个浏览器是正确的?

    将固定元素放置在另一个固定元素内的行为在 Chrome Safari 与 Firefox 中有所不同 这个答案很好地解释了预期的行为 https stackoverflow com a 28576596 1437016对于相对 div 内的
  • Chrome 不渲染
    标签,FF 渲染

    我有一个非常烦人的问题 我的网站有一个表单 可以在 Firefox 中运行 但不能在 IE 或 Chrome 中运行 它是用 WordPress 的 Gravity Forms 制作的 但这可能与该问题无关 因为另一个表单插件也出现了同样的
  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用
  • 在 HTML TextArea 中设置(或读取)光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确
  • 为什么Disabled = true对于html有效?

    我注意到我们的代码中有一个disabled ture 我是锚标签的源代码 我想知道为什么它在 IE 中有效 我也在互联网上进行了搜索 通过网络搜索 它也被用于很多源代码中 我一直在搜索if ture 拼写错误的true也可以被IE使用 有人
  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • 下拉菜单导致滚动条

    我用过这个W3C 的示例 http www w3schools com bootstrap bootstrap dropdowns asp div class dropdown div
  • CSS交付优化:如何推迟CSS加载?

    我在尝试着优化 CSS 交付遵循针对开发人员的谷歌文档https developers google com speed docs insights OptimizeCSSDelivery example https developers
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi

随机推荐

  • centos 6.5 安装JDK 7

    安装说明 系统环境 centos 6 3 安装方式 rpm安装 软件 jdk 7 linux x64 rpm 检验系统原版本 root admin java version 进一步查看JDK信息 root admin rpm qa grep
  • java中字节流的分类都有哪些_Java------字节流和字符流(I)

    字节流 读写字节文件 通常使用字节流 如 二进制文件 jpg mp3 avi exe com dll windows平台的执行文件 exe com dll 字符流 读写字符文件 通常使用字符流 如 txt java css doc html
  • MAE入局多模态分析,CMU联合微软发布仅需文本监督的视觉语言新模型VLC

    原文链接 https www techbeat net article info id 3677 作者 seven 论文链接 https arxiv org abs 2205 09256 代码链接 https github com guil
  • 使用vite快速安装项目(SyntaxError:Unexpected reserved word?)

    前提环境 需要安装nodejs和npm 并且nodejs版本必须在16以上 安装vite 打开命令窗口 执行命令 npm install vite g 1 2 如果执行该命令报错 SyntaxError Unexpected reserve
  • gjb1188a

    unsigned short VerifyWord1188A unsigned short data 32 unsigned long len unsigned char i 0 unsigned short verifyWord 0 fo
  • numpy的相关使用方法

    20210211 引言 之前的时候 一些关于numpy的内容都记录在另一篇文章中 pandas及numpy 常用操作 里面大部分都是pandas的操作 但是最近使用numpy比较多了之后 也积累了一些内容 所以这里专门记录一下 内容列表 拼
  • 计算机二级题目之数组学习

    1 下列给定程序中 函数fun的功能是 用冒泡法对6个字符串按由小到大的顺序进行排序 请改正程序中的错误 使它能得出正确的结果 include
  • (16)pandas多层级索引的访问

    import numpy as np import pandas as pd from pandas import Series DataFrame 内容 Series数组 DataFrame数组 构建一个多层级索引 构造一个多维索引 in
  • C++异常处理

    一 异常处理定义 异常是程序在执行期间产生的问题 任何事物 任何情况都可以当做异常 错误算是异常的一种 C 异常是指在程序运行时发生的特殊情况 比如尝试除以零的操作 异常处理机制 暂时性不做处理 抛出异常 留给使用者去处理 异常提供了一种转
  • react调用model层的接口(dispatch)在组件中获取接口返回状态

    我们调用model层的接口 然后在组件中获取接口返回的数据 逻辑通常是 在model层写好了逻辑 去获取或者计算接口返回数据 然后组件再引入这个model层中的数据 在组件中dispatch这个接口就行 但是我现在在组件中调用这个接口后 我
  • python import模块方法

    python包含子目录中的模块方法比较简单 关键是能够在sys path里面找到通向模块文件的路径 下面将具体介绍几种常用情况 1 主程序与模块程序在同一目录下 如下面程序结构 src mod1 py test1 py 若在程序test1
  • egg jwt token生成以及验证拦截

    1 安装egg jwt npm install egg jwt save 2 配置 config plugin js jwt jwt插件启用 enable true package egg jwt config config default
  • Linux(基础IO、文件权限、Makefile)

    目录 1 man 手册 1 1 汉化 1 2 具体使用 2 文件权限 2 1 权限理解 2 2 文件详细信息查询 2 3 权限更改 3 常用函数接口 3 1 open 3 2 read 3 3 write 3 4 close 3 5 函数使
  • 二分查找总结——左闭右开区间和左闭右闭区间(C++语言)

    二分查找 1 左闭右开区间 如有相同元素返回查找到的第一个元素 PS 主循环判断条件都是一样的 left lt right 注意这里不能取等号 有相同元素时 如果要返回第一个查找到的元素 则区间包含相同元素时应该从右向左收缩 这时判断条件应
  • opencv两张图片叠加显示

    详细流程 一 线性混合操作 使用addWeighted 1 代码 2 说明 3 图片效果 二 使用roi和mask方式 1 代码 2 说明 3 图片效果 一 线性混合操作 使用addWeighted 1 代码 include
  • 在reportlab中,如果设置字符间距?

    在reportlab中 可以使用ParagraphStyle类来设置字符间距 可以在创建ParagraphStyle对象时 传入参数 wordWrap 来设置字符间距 示例代码如下 from reportlab lib styles imp
  • Java 多种文件读写方式

    前两天用到读写文件的操作 上网搜了一些这方面的资料 很有用的 java中多种方式读文件一 多种方式读文件内容 1 按字节读取文件内容2 按字符读取文件内容3 按行读取文件内容4 随机读取文件内容 import java io Buffere
  • 公司网络慢如何解决,怎样诊断网络卡的原因

    企业局域网由于网络环境复杂 终端数量 设备数量都比较多 经常会出现网络卡顿等故障 一旦网络变慢时 面对复杂的网络环境 网管技术人员需要迅速并且准确的诊断出问题所在 并且加以解决 本文中 我将尽量描述网络变卡变慢的常见原因以及诊断方法 大体来
  • JAVA后端部署项目三步走

    1 JAVA部署项目三步走 1 1 查看 运行的端口 lsof i 8804 8804 为端口 发现端口25111被监听 1 2 杀死进程 终止程序 pid 为进程号 kill 9 pid 1 3 后台运行jar包 nohup java j
  • 网上书城前端界面

    前言 1 用户登录注册界面编写 2 前台主界面编写 3 搜索书籍界面编写 4 购物车界面编写 接下来就上代码了 注册界面