学习通过标签内部的style设置样式，仅UI

最新推荐文章于 2023-01-16 23:18:37 发布

丶孟浪

最新推荐文章于 2023-01-16 23:18:37 发布

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： html5

本文链接：https://blog.csdn.net/weixin_45695534/article/details/115357692

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发工具

开发软件：HBuilder X 3.1.6（快捷键方案为Eclipse）
浏览器：HBuilder X 3.1.6内置浏览器插件，Edge浏览器

成品展示

设计思路

1.页面主体 ==> table

（1）创建一个7行2列的表格；

（2）第1、6、7行合并列；

（3）第1行，“欢迎光临”使用标题标签h1，下一行内容为文字+超链接；

（4）第2-4行，第一列文字垂直居中右对齐，第二列为input输入框，通过设置placeholder的值来显示提示信息；

（5）第5行，第一列文字垂直居中右对齐，第二列为input输入框+button；

（6）第6行，一个“注册”按钮，设置背景色，圆角，文字居中，按钮相对位置偏下；

（7）第7行，一个div嵌套一个复选框checkbox和两个超链接以及文字

2.外部div（嵌套table）

设置div的样式：透明度，高度和宽度，背景色和相对位置

3.最外部的body

设置背景图

实现步骤

1.新建项目

打开HBuilder->文件->新建项目->填写项目名->选择基本HTML项目->创建

目录结构如下：

后续的代码皆在index.html中实现

2.table

（1）创建一个7行2列的表格

<!-- 创建一个7*2的表格
快捷方式：输入“table>tr*7>td*2”后按“Tab”键自动生成 -->
<!-- border：开启表格的边框显示，方便调试和观察效果，值为0时表示关闭 
	 设置cellpadding和cellspacing的值为0，既调整表格之间的单元格间隙为0
	 width="450"：设置表格宽度
	 由于表格高度未设置，故实际表格高度由表格中的内容撑起 -->
<table border="1" cellpadding="0" cellspacing="0" width="450">
	<tr>
		<td>第一行</td>
		<td></td>
	</tr>
	<tr>
		<td>第二行</td>
		<td></td>
	</tr>
	<tr>
		<td>第三行</td>
		<td></td>
	</tr>
	<tr>
		<td>第四行</td>
		<td></td>
	</tr>
	<tr>
		<td>第五行</td>
		<td></td>
	</tr>
	<tr>
		<td>第六行</td>
		<td></td>
	</tr>
	<tr>
		<td>第七行</td>
		<td></td>
	</tr>
</table>

（2）通过td标签的colspan合并列

<!-- 合并列之后，合并了x列则删除x-1列 
	 此处合并了2列，既删除一个td标签
	 注：可以通过rowspan属性合并行 -->
<table border="1" cellpadding="0" cellspacing="0" width="450">
	<tr>
		<td colspan="2">第一行</td>
	</tr>
	.
	.  <!-- 略 -->
	.
	<tr>
		<td colspan="2">第六行</td>
	</tr>
	<tr>
		<td colspan="2">第七行</td>
	</tr>
</table>

（3）头部文字的设计

div1嵌套h1和div2，div2嵌套一个超链接

<tr>
	<td colspan="2">
		<div style="position: relative;right: -50px; width: 400px;">
			<h1>欢迎注册</h1>
			<div style="position: relative;top: -24px; font-size: 9px; color: dimgray;">
				已有帐号？<a href="#" style="text-decoration: none;">登录</a>
			</div>
		</div>
	</td>
</tr>

从里到外一一解释：
	a. a标签表示超链接，默认的样式是蓝色字体并有下划线，在style中设置text-decoration样式为none可以取消下划线，同时a标签属于行内元素；
	b. 内层div，内含字样“已有帐号”以及a标签，style中的样式含义：
		font-size => 字体大小，
		color => 字体颜色，
		position: relative => 整个div相对于初始坐标的位置，
		后接top表示相对于初始的位置向下移动，负号表示移动方向反向，既top: -24px;与bottom: 24px;效果相同；
	c. h1是标题样式，在h1标签中的文字会加粗显示，并且h1标签是块级元素，会独占一行。
	d.外层div，设置style样式：
		width：宽度,
		position: relative; right: -50px; ：表示相对于初始位置向右移动了50px；
	e.同样也可以通过设置style中的border样式调出边框，方便确定位置
		例如：style="border: 1px solid red" ，
		1px 表示边框线条粗细，
		solid 表示单实线，
		red 表示边框颜色为红色，
		以上标签中均可使用该样式显示边框。

关键词：行内元素块级元素 style中的常见属性

（4）用户名框、手机号框以及密码框的设计

<!-- 第二行 -->
<tr style="height: 50px;"><!-- a -->
    <td align="right" style="width: 100px;">用户名</td><!-- b -->
    <td><input type="text" placeholder="请设置用户名" style="width:300px; height:28px; margin-left: 10px; border-radius: 5px;"></td><!-- c -->
</tr>
<!-- 后面两行与这相似 -->

a.height: 50px; ⇒ 设置行高为50px；
b.align="right" ⇒ 设置第一列文本水平向右靠齐；
  width: 100px; ⇒ 设置第一列列宽为100px；
c.type="text"   ⇒ 表示input标签输入的为文本信息；
  placeholder   ⇒ 表示input标签中的提示文本，当文本框中的信息为空时显示；
  width,height  ⇒ 设置文本框大小；
  margin-left   ⇒ 相对于外层td的左边界向左偏移；
  border-radius ⇒ 设置输入框的四个边角为圆弧，值表示圆弧的弯曲程度；
d.流程：设置行高⇒设置第一列的文本右对齐、文本大小⇒设置输入框的提示文本、大小、位置、形状。

（5）验证码框的设计

<tr style="height: 50px;">
    <td align="right" style="width: 100px;">验证码</td>
    <td>
		<input type="text" placeholder="请输入验证码" style="width:200px; height:28px; margin-left: 10px; border-radius: 5px;">
		<!-- a -->
		&nbsp;
		<!-- b -->
		<button type="button" style="width: 86px; height: 34px; border-radius: 5px; border-width: 0px;">获取验证码</button>
	</td>
</tr>

a.&nbsp;        ⇒ 占位符，在HTML页面表示为一个空格；
b.type="button" ⇒ 组件类型为button（在button标签中可省略）
  border-width  ⇒ 值为0px表示去除button的边框；
c.流程：设置行高⇒设置第一列文本右对齐、文本大小⇒设置验证码输入框的提示文本、大小、位置、形状⇒设置按钮的大小、形状、边框大小。

（6）注册按钮的设计

<tr style="height: 100px;">
	<!-- a -->
	<td colspan="2" style="text-align: center;">
		<!-- b -->
		<button type="button" style="width: 380px; height: 48px; position: relative;bottom: -24px;right: -15px; background-color: #668EBF; border-width: 0px; border-radius: 20px;">注册</button>
	</td>
</tr>

a.text-align: center;  ⇒ 表示td中的文本全部水平居中；
b.background-color     ⇒ 设置button的背景颜色；
c.流程：设置行高⇒合并列、设置文本居中⇒设置按钮大小、位置、背景颜色、边框大小、形状。

（7）复选框以及声明的实现

<tr style="height: 50px;">
    <td colspan="2" style="text-align: center; font-size: 9px;">
		<div style="position: relative;top: -15px;right: -15px; color: dimgray;">
			<!-- a -->
			<input name="Checkbox" type="checkbox" style="height: 10px;">
			阅读并接受
			<!-- b -->
			<a href="#" style="text-decoration: none;">《百度用户协议》</a>
			及<a href="#" style="text-decoration: none;">《百度隐私权保护声明》</a>
		</div>
	</td>
</tr>

a.type="checkbox" ⇒ 将input标签的类型(type)设定为复选框(checkbox);
b.定义两个超链接，去除下划线；
c.流程：设置行高⇒合并列、设置文本水平居中、文本大小⇒设置div的位置以及其中的字体颜色⇒设置复选框的大小⇒设置两个超链接的样式。

3.设置半透明遮罩（外部div）

<div style="border: 0px solid red; width: 500px; height: 600px; opacity: 0.8; background-color: lightgrey; position: relative;right: -480px;top: 80px;">
	<!-- 我们第二部编辑的table表格 -->
	<!-- 略 -->
</div>

a.opacity: 0.8; ⇒ 设置透明度，区间0~1；
b.流程：将table嵌套进div中⇒设置大小⇒设置背景颜色⇒设置透明度⇒调整相对位置。

4.设置背景图片（body）

<body background="img/bg.jpg">
	<!-- 2、3步骤的所有内容整合到body里面 -->
	<!-- 略 -->
</body>

流程：从网上下载背景图片并命名为bg.jpg⇒存放到项目的img目录下⇒设置整个浏览器的背景图片

在这里插入图片描述

需要原图的自取

5.项目源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注册页面</title>
	</head>
	<body background="img/bg.jpg">
		<div style="border: 0px solid red; width: 500px; height: 600px; opacity: 0.8; background-color: lightgrey; position: relative;right: -480px;top: 80px;">
			<table border="0" cellpadding="0" cellspacing="0" width="450" style="position: relative;top: 65px;">
				<tr>
					<td colspan="2">
						<div style="position: relative;right: -50px; width: 400px;">
							<h1>欢迎注册</h1>
							<div style="position: relative;top: -24px; font-size: 9px; color: dimgray;">
								已有帐号？<a href="#" style="text-decoration: none;">登录</a>
							</div>
						</div>
					</td>
				</tr>
				<tr style="height: 50px;">
				    <td align="right" style="width: 100px;">用户名</td>
				    <td><input type="text" placeholder="请设置用户名" style="width: 300px; height:28px; margin-left: 10px; border-radius: 5px;"></td>
				</tr>
				<tr style="height: 50px;">
				    <td align="right" style="width: 100px;">手机号</td>
				    <td><input type="text" placeholder="可用于登录和找回密码" style="width: 300px; height:28px; margin-left: 10px; border-radius: 5px;"></td>
				</tr>
				<tr style="height: 50px;">
				    <td align="right" style="width: 100px;">密  码</td>
				    <td><input type="text" placeholder="请设置登录密码" style="width: 300px; height:28px; margin-left: 10px; border-radius: 5px;"></td>
				</tr>
				<tr style="height: 50px;">
				    <td align="right" style="width: 100px;">验证码</td>
				    <td>
						<input type="text" placeholder="请输入验证码" style="width: 200px; height:28px; margin-left: 10px; border-radius: 5px;">
						&nbsp;
						<button type="button" style="width: 86px; height: 34px; border-radius: 5px; border-width: 0px;">获取验证码</button>
					</td>
				</tr>
				<tr style="height: 100px;">
				    <td colspan="2" style="text-align: center;">
						<button type="button" style="width: 380px; height: 48px; position: relative;bottom: -24px;right: -15px; background-color: #668EBF; border-width: 0px; border-radius: 20px;">注册</button>
					</td>
				</tr>
				<tr style="height: 50px;">
				    <td colspan="2" style="text-align: center; font-size: 9px;">
						<div style="position: relative;top: -15px;right: -15px; color: dimgray;">
							<input name="Checkbox" type="checkbox" style="height: 10px;">
							阅读并接受
							<a href="#" style="text-decoration: none;">《百度用户协议》</a>
							及<a href="#" style="text-decoration: none;">《百度隐私权保护声明》</a>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

6.补充说明

（1）通过上述方式设置的背景图片并没有规定大小等样式，如果你的浏览器不是100%的显示或者图片像素变小或者变大了，就有可能出现以下情况：
过大：

过小：

（2）由于标签的大小位置全部都是定死的值，所以整个注册表格不会随着浏览器的大小变化而变化，如果位置不合适，还需要手动调整数值。

丶孟浪

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
学习通过标签内部的style设置样式，仅UI

静态的注册页面（通过标签内部的style设置样式，仅UI）开发工具成品展示设计思路1.页面主体 ==> table2.外部div（嵌套table）3.最外部的body实现步骤1.新建项目2.table（1）创建一个7行2列的表格（2）通过td标签的colspan合并列（3）头部文字的设计（4）用户名框、手机号框以及密码框的设计（5）验证码框的设计（6）注册按钮的设计（7）复选框以及声明的实现3.设置半透明遮罩（外部div）4.设置背景图片（body）5.项目源码6.补充说明开发工具开发软件：HBu
复制链接

扫一扫