HTML_CSS基础_牛客博客

HTML_CSS基础

4.HTML_CSS

4.HTML_CSS

4.1. web概念概述

4.1.1. JavaWeb

使用Java语言开发基于互联网的项目

4.1.2. 软件架构

C/S：Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 缺点：
  - 开发、安装、部署、维护麻烦
B/S：Brower/Server 浏览器/服务器端
- 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
- 优点：
  - 开发、安装、部署、维护简单
- 缺点：
  - 如果应用过大，用户的体验可能会受到影响
  - 对硬件要求过高
B/S架构详解
- 资源分类：
  1. 静态资源：
    - 使用静态网页开发技术发布的资源
    - 特点：
      - 所有用户访问，得到的结果是一样的。
      - 如：文本、图片、音频、视频、HTML、CSS、JavaScript
      - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
  2. 动态资源：
    - 使用***页开发技术发布的资源
    - 特点：
      - 所有用户访问，得到的结果可能不一样。
      - 如：jsp/servlet，php，asp…
      - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
- 我们要学习动态资源，必须先学习静态资源！
- 静态资源：
  - HTML：用于搭建基础网页，展示页面的内容
  - CSS：用于美化页面，布局页面
  - JavaScript：控制页面的元素，让页面有一些动态的效果

4.2. HTML

4.2.1. 概念

Hyper Text Markup Language：超文本标记语言，是最基础的网页开发语言。
- 超文本：超文本是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本。
- 标记语言：由标签构成的语言。<标签名称>。如：html、xml
  - 标记语言不是编程语言

4.2.2. 快速入门

语法：
- html文档后缀名：.html或者.htm
- 标签分类：
  - 围堵标签：有开始标签和结束标签。如：<html></html>
  - 自闭和标签：开始标签和结束标签在一起。如：<br/>
- 标签可以嵌套：
  - 需要正确嵌套，不能你中有我，我中有你。
  - 错误：<a><b></a></b>
  - 正确：<a><b></b></a>
- 在开始标签可以定义属性。属性是由键值对构成。值需要用引号（单双都可以）引起来。
- html的标签不区分大小写，但是建议使用小写。
```
E<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>

    <body>
        <font color="red">Hello World</font><br/>
        <font color="green">Hello World</font>
    </body>
</html>
```

4.2.3. 标签学习

文件标签：构成html最基本的标签
- html：html文档的根标签
- head：头标签。用于指定html文档的一些属性。引入一些外部的资源。
- title：标题标签。
- body：体标签。
- <!DOCTYPE html>：html5中定义该文档是html文档。
文本标签：和文本有关的标签
- 注释：
- <h1> to <h6>：标题标签
  - h1~h6：字体大小
- <p>：段落标签
- <br>：换行标签
- <hr>：展示一条水平线
  - 属性：
    - color：颜色
    - width：宽度
    - size：高度
    - align：对齐方式
      - center：居中
      - left：左对齐
      - right：右对齐

<b>：字体加粗
<i>：字体斜体
- <font>：字体标签：color：颜色 size：大小 face：字体
- <center>：文本居中
- 属性定义：
  - color：
- 英文单词：red、green、blue
  - rgb(值1, 值2, 值3)：值的范围：0~255 如：rgb(0, 0, 255)
  - #值1值2值3：值的范围：00~FF之间如：FF00FF
- width：
  - 数值：width=“20”，数值的单位，默认的是px（像素）
  - 数值%：占比相对于父元素的比例
- 案例：公司简介
- 特殊字符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2n5J11BZ-1571993667504)(images/html_特殊字符表.png)]

图片标签：

img：展示图片：src->指定图片的位置

<!-- 展示一张图片 -->
<img src="images/1.jpg" align="right" alt="wlop" width="500" height="500"/>
<!-- 相对路径 以.开头的路径 ./：代表当前目录 ./images/1.jpg ../：代表上一级目录 -->
<img src="./images/1.jpg" align="right" alt="wlop" width="500" height="500"/>

列表标签：

有序列表：ol和li：

<!-- type:I/i/A/a/1 -->
<!-- 有序列表 ol -->
早上起床干的事情
<ol type="I" start="5">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ol>

无序列表：ul和li：

<!-- type:disc（默认）/square/circle -->
<!-- 无序列表 ul -->
早上起床干的事情
<ul type="circle">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>

链接标签：a：定义一个超链接–>href：指定访问资源的URL（统一资源定位符）/target：_blank（在空白页面打开）/_parent/_self（默认：在当前页面打开）/_top：指定打开资源的方式

<!-- 超链接 a -->
<a href="images/1.jpg">图片</a>
<br>
<a href="images/1.jpg" target="_blank">图片</a>
<br>
<a href="http://www.baidu.com" target="_self">百度</a>
<br>
<a href="mailto:yangqi199808@gmail.com">联系我们</a>
<br>
<a href="http://www.baidu.com"><img src="images/3.jpg"/></a>

div和span：

div：块级标签，每一个div占据一整行
span：文本信息在一行展示，行内标签/内联标签

<!-- 块标签 div和span -->
<!-- div：占据一整行，称为块级标签 -->
<div>阿里巴巴</div>
<div>让天下没有难做的生意</div>
<!-- span：文本信息在一行展示，称为行内标签 内联标签 -->
<span>阿里巴巴</span>
<span>让天下没有难做的生意</span>

语义化标签：html5中为了提高程序的可读性，提供了一些标签。（header：页眉/footer：页脚）

表格标签：

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义
- cellspacing：定义单元格之间的距离。如果指定位0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
- caption：表格标题
- thead：表示表格的头部分
- tbody：表示表格的体部分
- tfoot：表示表格的脚部分
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格

<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>
        <!--<td>编号</td>-->
        <!--<td>姓名</td>-->
        <!--<td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小龙女</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>50</td>
    </tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <thead>
        <caption>学生信息表</caption>
        <tr>
            <!--<td>编号</td>-->
            <!--<td>姓名</td>-->
            <!--<td>成绩</td>-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="#00ffff" align="center">
            <td>1</td>
            <td>小龙女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>3</td>
            <td>尹志平</td>
            <td>10</td>
        </tr>
    </tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>
        <th rowspan="2">编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小龙女</td>
    </tr>
    <tr>
        <td>2</td>
        <td colspan="2">杨过</td>
    </tr>
</table>

综合案例

<!-- 采用table来完成布局 -->
<!-- 最外层的table，用于整个页面的布局 -->
<table width="100%" align="center">
    <!-- 第1行 -->
    <tr>
        <td>
            <img src="images/1.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第2行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height="45">
                    <td>
                        <a href="1_HelloWorld.html">首页</a>
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第4行 轮播图 -->
    <tr>
        <td>
            <img src="images/4.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第5行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            好大的图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第6行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第7行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            没有图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第8行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="images/5.jpg" height="100%" alt="">
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第9行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            没有图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第10行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="images/5.jpg" height="100%" alt="">
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第11行 -->
    <tr>
        <td>
            <img src="images/1.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第12行 -->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                阿里巴巴
                让天下没有难做的生意
            </font>
        </td>
    </tr>
</table>

表单标签：

概念：用于采集用户输入的数据的。用于和服务器进行交互。
使用的标签：form
- 属性：
  - action：指定提交数据的URL，#表示当前页面。
  - method：指定提交方式。一共7种，2种比较常见。（get和post）
    get和post的区别：
    1. get的请求参数会在地址栏中显示；post的请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议）
    2. get请求参数的长度是有限制的；post的请求参数的长度没有限制
    3. get请求不太安全；post请求较为安全
- 表单项中的数据要想被提交，必须指定其name属性
表单项标签：
- input：可以通过type属性值，改变元素展示的样式
  - type属性：
    - text：文本输入框
    - password：密码输入框
      - placeholder：指定
    - radio：单选框：
      - 要想让多个单选框实现单选的效果，则多个单选框的name属性值
      - 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      - checked属性，可以指定默认值
    - checkbox：复选框
      - 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      - checked属性，可以指定默认值
    - file：文件选择框
    - hidden：隐藏域，用于提交一些信息
    - 按钮：
      - submit：提交按钮，可以提交表单
      - button：普通按钮
      - image：图片提交按钮：src属性指定图片的路径
- label：指定输入项的文字描述信息
  - for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
- select：下拉列表
  - option：指定列表项
- textarea：文本域
  - cols：指定列数，每一行有多少个字符
  - rows：默认多少行

<form action="#" method="get">
    <label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" checked="checked">男
        <input type="radio" name="gender" value="female">女<br>
    兴趣爱好：<input type="checkbox" name="interest" value="sing">唱歌
            <input type="checkbox" name="interest" value="dance" checked>跳舞
            <input type="checkbox" name="interest" value="basketball">蓝球<br>

    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"><br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="date"><br>
    生日：<input type="datetime-local" name="datetime-local"><br>
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="age"><br>

    省份：<select name="province">
        <option value="">--请选择--</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3" selected>陕西</option>
    </select><br>

    自我描述：
    <textarea cols="20" rows="5" name="description"></textarea>

    <input type="submit" value="登录"><br>
    <input type="button" value="一个按钮"><br>
    <input type="image" src="../images/button.png" value="一个按钮">
</form>

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>

    <body>
        <!-- 定义表单 -->
        <form action="#" method="post">
            <!-- 控制样式 -->
            <table border="1" align="center" width="500">
                <tr>
                    <td><label for="username">用户名</label></td>
                    <td><input type="text" name="username" id="username" placeholder="请输入账号"></td>
                </tr>
                <tr>
                    <td><label for="password">密码</label></td>
                    <td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="email" name="email" id="email" placeholder="请输入Email"></td>
                </tr>
                <tr>
                    <td><label for="name">姓名</label></td>
                    <td><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
                </tr>
                <tr>
                    <td><label for="phone">手机号</label></td>
                    <td><input type="number" name="phone" id="phone" placeholder="请输入您的手机号码"></td>
                </tr>
                <tr>
                    <td><label>性别</label></td>
                    <td>
                        <input type="radio" name="gender" value="male">男
                        <input type="radio" name="gender" value="female">女
                    </td>
                </tr>
                <tr>
                    <td><label for="birthday">出生日期</label></td>
                    <td><input type="date" name="birthday" id="birthday"></td>
                </tr>
                <tr>
                    <td><label for="checkcode">验证码</label></td>
                    <td>
                        <input type="text" name="checkcode" id="checkcode">
                        <img src="../images/验证码.png">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="注册"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

4.3. CSS

页面美化和布局控制

4.3.1. CSS基本简介

概念：
	Cascading Style Sheets：层叠样式表
	层叠：多个样式可以作用在html的元素上，同时生效
好处：
	1.功能强大
	2.将内容的展示和样式控制分离
		降低耦合度（解耦）
		让分工协作更容易
		提高开发的效率

4.3.2. CSS的使用

CSS与HTML的结合方式：
	1.内联样式：在标签内使用style属性指定css代码
	2.内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
	3.外部样式：定义css资源文件；在head标签内，定义link标签，引入外部的资源文件

注意：
	1.三种方式，css作用范围越来越大
	2.第1种方式不常用，后期常用第2种和第3种
	3.第3种格式可以写为：
	<style>
        @import "../css/a.css";
    </style>

4.3.3. CSS语法

格式：

选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;
    属性名3: 属性值3;
    ...
}

选择器：筛选具有相似特征的元素
- 注意：每一对属性需要使用;隔开，最后一对属性可以不加;

4.3.4. 选择器

筛选具有相似特征的元素
分类
- 基础选择器
  - id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
    - 语法：#id属性值 {}
  - 元素选择器：选择具有相同标签名称的元素
    - 语法：标签名称 {}
    - 注意：id选择器的优先级高于元素选择器
  - 类选择器：选择具有相同class属性值的元素
    - 语法：.class属性值 {}
    - 注意：类选择器的优先级高于元素选择器
  - 优先级顺序：id选择器 > 类选择器 > 元素选择器
```
<style> #div1 {
        color: red;
    }

    div {
        color: green;
    }

    .cls1 {
        color: blue;
    }
</style>
```
- 扩展选择器
  - 选择所有元素：
    - 语法：* {}
  - 并集选择器：
    - 语法：选择器1, 选择器2 {}
  - 子选择器：筛选选择器1元素下的选择器2元素
    - 语法：选择器1 选择器2 {}
  - 父选择器：筛选选择器2父元素选择器1
    - 语法：选择器1 > 选择器2 {}
  - 属性选择器：选择元素名称，属性名=属性值的元素
    - 语法：元素名称[属性名="属性值"] {}
  - 伪类选择器：选择一些元素具有的状态
    - 语法：元素:状态 {}
    - 如：<a>：状态：
      - link：初始化的状态
      - visited：被访问过的状态
      - active：正在访问的状态
      - hover：鼠标悬浮状态

4.3.5. 属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对齐方式
- line-height：行高
背景
- background：背景
边框
- border：设置边框，复合属性
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距
- padding：内边距：默认情况下内边距会影响整个盒子的大小
  - box-sizing：border-box：设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
  - left：左浮动
  - right：右浮动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体</title>
        <style> div { border: 1px solid #FF0000; width: 100px; } .div1 { width: 100px; height: 100px; /*外边距*/ /*margin: 50px;*/ } .div2 { width: 200px; height: 200px; padding: 50px; /* 设置盒子的属性，让width和height就是最终盒子的大小 */ box-sizing: border-box; } .div3 { float: left; } .div4 { float: left; } .div5 { float: right; } </style>
    </head>

    <body>
        <div class="div2">
            <div class="div1"></div>
        </div>

        <div class="div3">阿里巴巴</div>
        <div class="div4">让天下没有难做的生意</div>
        <div class="div5">阿里巴巴</div>
    </body>
</html>

4.3.6. 案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <style> * { margin: 0px; padding: 0px; box-sizing: border-box; } body { width: auto; height: 100%; background-image: url("../../images/2.jpg"); background-repeat: no-repeat; background-size: 100%; } .re_layout { width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*让div水平居中*/ margin: auto; margin-top: 15px; } .rg_left { /*border: 1px solid red;*/ /*浮动*/ float: left; margin: 15px; } .rg_left > p:first-child { color: #FFD026; font-size: 20px; } .rg_left > p:last-child { color: #A6A6A6; font-size: 20px; } .rg_center { /*border: 1px solid red;*/ float: left; width: 450px; } .td_left { width: 100px; text-align: right; height: 45px; } .td_right { padding-left: 50px; } #username, #password, #email, #name, #phone, #birthday, #checkcode { width: 251px; height: 32px; border: 1px solid #A6A6A6; /*设置边框圆角*/ border-radius: 5px; padding-left: 10px; } #checkcode { width: 110px; } #img_check { height: 32px; vertical-align: middle; margin-left: 20px; } #btn_submit { width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026; } .rg_right { /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right p { font-size: 15px; } .rg_right p a { color: pink; } </style>
    </head>

    <body>
        <div class="re_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
            <div class="rg_center">
                <div class="rg_form">
                    <!-- 定义表单 -->
                    <form action="#" method="post">
                        <!-- 控制样式 -->
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="phone">手机号</label></td>
                                <td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号码"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male">男
                                    <input type="radio" name="gender" value="female">女
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="checkcode">验证码</label></td>
                                <td class="td_right">
                                    <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                    <img id="img_check" src="../../images/验证码.png">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><input type="submit" id="btn_submit" value="注册"></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="rg_right">
                <p>已有账号？<a href="#">立即登录</a></p>
            </div>
        </div>
    </body>
</html>