一个静态的注册页面

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

开发工具

开发软件：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，既调整表格之间的单元格间隙为0width="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）由于标签的大小位置全部都是定死的值，所以整个注册表格不会随着浏览器的大小变化而变化，如果位置不合适，还需要手动调整数值。

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

uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
CSS设置样式的三种方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 1.CSS 1.1内联样式 1.2内部样式表 1.3外部样式表前言对css的学习进行总结提示:以下是本篇文章正文 ...
JS设置样式的两种方式
a) ClassName/style------DOM的style属性只能获取标签中使用style设置的样式,无法获取潜入或者外部样式,style.cssText获取style里面的字符串(只能在行内 ...
GeoServer样式(style)设置
GeoServer样式style设置 GeoServer Style定义 CSS Style CSS Style安装 CSS Style定义应用自定义样式利用其它软件配图并将Style导入GeoS ...
徐志摩题要求：•使用外部引入CSS样式的方式为网页设置样式 •标题使用＜h3＞标签，其他文本均放在段落标签＜p＞中 •使用标签选择器设置标题h3的字体颜色为#ddf111 •使用ID选择器设置p段
徐志摩题要求: •使用外部引入CSS样式的方式为网页设置样式 •标题使用<h3>标签,其他文本均放在段落标签<p>中 •使用标签选择器设置标题h3的字体颜色为#ddf111 • ...
ESP32 LVGL8.1 ——Style bg 设置样式背景 (Style 2)
提示:本博客作为学习笔记,有错误的地方希望指正文章目录一.样式背景设置简介二.Style Pad API 2.1背景颜色 bg_color 2.2背景颜色透明度 bg_opa 2.3背景的渐变颜 ...
vue中动态设置style样式和使用filters过滤器设置样式
例如:想给图片增加高度和宽度 <el-image :class="classRotation"v-if="imageData.src !== undefined&q ...
Qt学习笔记（二）【软件样式及界面外观设置】
Qt是一个跨平台的类库,相同的界面组件在不同的操作系统上显示效果是不一样的. 在windows7系统中,默认样式有:windows,fusion两个:通过安装Qt Creator编译器后,系统中会自动 ...
什么是 HTML div标签以及如何使用 CSS 设置样式
HTML 分割标记,简称为"div",是一种特殊元素,可让您在网页上将相似的内容集组合在一起.您可以将其用作关联相似内容的通用容器. 标签是最常用的div标签之一,尽管引入了语义元 ...

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