2.2 css学习_css练习-优快云博客

本文链接：https://blog.youkuaiyun.com/whatfuswd/article/details/128631724

文章目录

1. 概述
2.CSS语法
3.CSS选择器
4.CSS修饰案例
5.盒子模型
6.制作餐饮小票
- 6.1 CSS代码
- 6.2 html文件
7.完成用户注册
- 7.1 CSS代码
- 7.2 html文件

1. 概述

CSS全称叫做层叠样式表Cascading Style Sheets，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

根据其代码位置可以分为以下三类：

行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式；
内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性；
外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件

2.CSS语法

首先我们来看一个案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS语法案例</title>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>

<p>这个段落的左外边距为 50 像素：50px</p> 

</body>
</html>

这个案例中，我们使用了内部CSS，在HTML代码里使用style标签,包裹着CSS代码，其共有4行代码：

body {background-color:yellow;}：这行CSS代码将所有页面可见内容中的背景颜色设置为黄色；
h1 {font-size:36pt;}：这行CSS代码将所有h1标签文字大小设置为36px；
h2 {color:blue;}：这行CSS代码将所有h2标签颜色设置为蓝色；
p {margin-left:50px;}：这行CSS代码将所有p标签的左外边距设置为50px；

在这里插入图片描述

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来；多个属性之间使用分号；分割。为了增加可读性我们也可以每行设置一个属性：

p
{
    color:red;
    text-align:center;
}

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

2.1 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。使用内部CSS可以实现代码的重用，并且小幅度降低代码的耦合性，虽然其没有外部CSS那样可以大幅度降低耦合性，但是它比外部CSS更简便一点。

所以当我们单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

当前CSS样式一般只生效于当前页面。

2.2 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS文件则单独部署在目录下，浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

2.3 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时才应该这么使用。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

2.4 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

2.5 多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

其中要特别注意，内联样式一般总是最终的表现形式，但内部样式与外部样式是与载入时间有关的，如果先引入外部样式，再定义内部样式，则最后显示的效果是内部样式的，内部样式会覆盖外部样式的规则；

同样的，如果先定义内部样式再引入外部样式，那么最后的呈现效果是外部样式的规则，因为外部样式会覆盖内部样式的规则。

3.CSS选择器

3.1 标签选择器

标签选择器可以为所有相同类型的标签设置样式，如上面我们的示例就使用了标签名选择器，分别给body，h1，h2，p标签设置样式。

我们这里再展示一个以span标签为示例的CSS选择器案例，span此时的功能就可以明显的体现出来了。

    <style> /* 在HTML中加入css*/
        span{ /* 标签名选择器,选中所有span */
            font-size: 24px; /*字号*/
            font-family: 黑体;/* 字体 */
        }
    </style>

3.2 class选择器

class 选择器用于描述一组元素的样式，可以在多个元素中使用。给需要修饰的元素，加class属性，也可以同时使用多个属性，之间用空格隔开。

示例一：给元素添加多个属性

<p class="a b">123</p> <!-- b覆盖a-->

<style> /* 在HTML中加入css*/
	 /* 选择class=a的元素 */
	.a{
		background-color: cornflowerblue; /*背景颜色*/
		color:red; /*字体颜色*/
	}
	.b{
		background-color: lightsalmon;
		color: black;
	}
</style>

示例二：给多个元素添加属性

<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>

3.3 id选择器

id属性的值在整个HTML中作为唯一标识的存在。其可以为标有特定 id 的 HTML 元素指定特定的样式。CSS 中 id 选择器以 “#” 来定义，可以通过ID值选中指定的元素（#id值）。

<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
	text-indent: 200px; /* 首行缩进*/
}

但是要注意，ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

3.4 分组选择器

分组选择器可以将多个选择器选中的元素组合在一起，统一设置样式。例如下方的示例，将class选择器与id选择器组合到一起，统一设置背景颜色。

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
	background-color: #d39a9a;
}

3.5 属性选择器

根据属性条件选中符合条件的元素来设置样式（逗号隔开）

<style type="text/css">
	/* 选中指定的元素 */
	input[type='text']{
		background-color: #6495ED;
	}
</style>

3.6 选择器优先级

同样的，与样式表一样，选择器也存在优先级，如果通过不同选择器对同一个标签定义了不同的颜色，那么最后到底是什么颜色呢？

其优先级逐级增加的顺序如下：

通用选择器（*）
标签选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

但是要注意，!important 规则例外。

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

这里引入一张CSS权重关系图，其具体的计算方式十分复杂，我们这里不再做过多介绍：
在这里插入图片描述

3.7 综合练习一

首先我们创建css_text.html 文件，并在其中创建div标签，span标签，a标签各俩个：

		<div>我是div1</div>
		<div>我是div2</div>
		<span>我是span1</span>
		<span>我是span2</span>
		<a>我是a1</a>
		<a>我是a2</a>

然后使用CSS修饰以下内容：

根据标签名修饰div的样式为：
- 颜色：red
- 背景色：darkgray
- 边框样式：dashed
- 边框颜色：blue
根据标签名修饰span的样式为：
- 字号：30px
- 字体：黑体
根据类名修饰div1的样式为：
- 字号：25px
根据类名修饰span1的样式：
- 透明度：0.4
根据ID修饰a2的样式为：
- 边框的样式：实线
- 边框的角样式：圆角

最后完成的代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css_text</title>
    <!-- 用HTML提供的style标签包裹css代码 -->
    <style>
        /* 1.标签名选择器:根据标签的名字选中 */
        div {
            /* 练习1:修饰div的样式 */
            color: red;
            /* 字的颜色 */
            background-color: darkgray;
            /* 背景色 */
            border-style: dashed;
            /* 边框的样式,虚线 */
            border-color: blue;
            /* 边框的颜色 */
        }

        span {
            /* 练习2:修饰span的样式 */
            font-size: 30px;
            /* 字号 字体 */
            font-family: "黑体";
            /* 字体 */
        }

        /* 2.class选择器:根据class属性的值选中元素,class的值能相同
				步骤:给元素加class属性+通过.获取元素 
			*/
        .a {
            /* 练习3:修饰div1的样式*/
            font-size: 25px;
            /* 字号 */
        }

        .b {
            /* 练习4:修饰span1的样式 */
            opacity: 0.4;
            /* 透明度 0.0~1.0,数值越小越透明 */
        }

        /* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同 
				步骤:给元素添加id属性 + 通过#获取值
			*/
        #c {
            /* 练习5:修饰a2的样式 */
            border-style: solid;
            /* 边框的样式:实线*/
            border-radius: 25px;
            /* 圆角 */
        }
    </style>
</head>

<body>
    <div class="a">我是div1</div>
    <div>我是div2</div>
    <span class="b">我是span1</span>
    <span>我是span2</span>
    <a class="a b">我是a1</a>
    <!--同时拥有a b两种样式的修饰-->
    <a id="c">我是a2</a>
</body>

</html>

运行到浏览器为：

在这里插入图片描述

3.8 综合练习二

接下来，我们创建css_text2.html文件，再来实现一个css的操作案例：

首先，我们创建3个a标签，3个input输入框，输入框为2个文本输入框，1个密码输入框，并分别为其设置下列的属性：

		<a class="x">我是a1</a>
		<a href="#" class="x">我是a2</a>
		<a href="#" id="y">我是a3</a>
		<input type="text" />
		<input type="password" placeholder="请您输入密码..."/>
		<input type="text" />

然后，我们使用分组选择器，将多种选择器的结果，组成一组进行修饰：

将一个a标签与一个input输入框使用标签名选择器，在一个css语句中设置为：
- 边框宽度：1px
- 边框样式：dashed
- 边框颜色：red
将剩余的俩个a标签与另一个input输入框分别使用类选择器，id选择器，标签选择器在一个css语句中设置为：
- 字号：20px
将拥有href属性的a标签设置为：
- 字号：50px
将type="text"的input输入框设置为：
- 背景颜色：green

最后完成的代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css_text2</title>
    <style>
        /* 1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开 */
        a,
        input {
            /* 利用标签名选择器,选中一组元素,修饰样式 */
            /* 边框: 宽度 样式 颜色; */
            border: 1px dashed red;
        }

        /* 2.利用基本选择器,选中一组元素,修饰样式 */
        .x,
        #y,
        input {
            font-size: 20px;
        }

        /* 3.属性选择器:按照标签的属性来选择元素,标签名[属性名]*/
        a[href] {
            /* 选中拥有href属性的a标签*/
            font-size: 50px;
        }

        /* 4. 选中type="text"的input设置背景色 */
        input[type='text'] {
            background-color: green;
        }
    </style>
</head>

<body>
    <a class="x">我是a1</a>
    <a href="#" class="x">我是a2</a>
    <a href="#" id="y">我是a3</a>
    <input type="text" />
    <input type="password" placeholder="请您输入密码..." />
    <input type="text" />
</body>

</html>

输出的样式为：
在这里插入图片描述

4.CSS修饰案例

4.1 文本格式

通过上面的案例我们也可以了解到，对于文本的修饰包含文本的颜色、对齐方式等，下面我们将分别介绍实现其具体修饰的方案。

4.1.1 文本颜色

颜色是CSS修饰中经常使用的，在CSS中所有关于颜色的设置都可以以下列三种类型的值来指定，分别为：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

在网页中搜索颜色转换颜色码，即可找到对应颜色的十六进制值或RGB值，这些值在开发中会由设计人员确认，所以我们只需要使用对应的值就可以了。

4.1.2 文本修饰

我们经常使用text-decoration 属性用来设置或删除文本的装饰，从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<body>
<p>链接到: <a href="http://www.baidu.com/">baidu.com</a></p>
</body>

像这段代码，其显示效果中有下划线：
在这里插入图片描述

我们可以为其添加CSS样式来消除下划线：

<style>
a {text-decoration:none;}
</style>

在这里插入图片描述

4.1.3 文本转换

我们也可以指定在一个文本中的大写和小写字母，可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>

例如这段代码，其文字是标准格式：
在这里插入图片描述
我们可以通过CSS样式修饰来将其转为全部大写，全部小写或每个单词首字母大写：

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

在这里插入图片描述

4.1.4 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式，文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

例如上边的代码，其文本是标准格式：
在这里插入图片描述

我们可以为其设置CSS样式，将其格式改为报纸版式：

<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>

在这里插入图片描述

4.1.5 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

在这里插入图片描述

例如这行代码，我们可以为其设置文本缩进格式来进行缩进样式的展示

<style>
p {text-indent:50px;}
</style>

在这里插入图片描述

4.2 字体

对字体的修饰包括字型，字号等修饰，下面我们将分别介绍实现其具体修饰的方案。

4.2.1 字体样式

我们使用font-family 属性设置文本的字体系列，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

多个字体系列使用逗号分隔指明：

<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p>

</body>

例如上面的例子，其默认字体展示效果如下图所示：
在这里插入图片描述

我们对其设置不同的字体：

<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>

设置后的展示效果如下图所示：
在这里插入图片描述

4.2.2 字体大小

我们使用font-size 属性设置文本的大小，能否管理文字的大小，在网页设计中是非常重要。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。所以请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落。

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素。

例如下面的文本案例：

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p>

其默认字体显示效果如图所示：
在这里插入图片描述

但对其设置字体大小后：

<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>

其显示效果为：
在这里插入图片描述
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em。

<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小，不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>

这将能实现在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

4.3 背景

4.3.1 背景颜色

我们使用background-color 属性定义了元素的背景颜色，页面的背景颜色使用在body的选择器中:

<style>
body
{
	background-color:#b0c4de;
}
</style>

当然你也可以单独给某一块区域设置背景颜色：

<style>
h1
{
	background-color:#6495ed;
}
p
{
	background-color:#e0ffff;
}
div
{
	background-color:#b0c4de;
}
</style>

4.3.2 背景图像

我们使用background-image 属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

<style>
body 
{
	background-image:url('https://static.runoob.com/images/mix/paper.gif');
	background-color:#cccccc;
}
</style>

显示效果为：
在这里插入图片描述

4.3.3 背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺，一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:。

<style>
body
{
	background-image:url('gradient2.png');
}
</style>

在这里插入图片描述

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/gradient2.png');
	background-repeat:repeat-x;
}
</style>

在这里插入图片描述

4.3.4 背景图像- 设置定位与不平铺

如果你不想让图像平铺，你可以使用 background-repeat 属性:

<style>
body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}
</style>

在这里插入图片描述

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置，可以利用 background-position 属性改变图像在背景中的位置:

<style>
body
{
	background-image:url('https://static.runoob.com/images/mix/img_tree.png');
	background-repeat:no-repeat;
	background-position:right top;
	margin-right:200px;
}
</style>

在这里插入图片描述

4.3.4 背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制，为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。

背景颜色的简写属性为 “background”:

<style>
body
{
	background:#ffffff url('https://static.runoob.com/images/mix/img_tree.png') no-repeat right top;
	margin-right:200px;
}
</style>

在这里插入图片描述

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用。

4.4 链接

链接的样式，可以使用任何CSS属性，如颜色，字体，背景）。不同状态的链接，可以有不同的样式，链接的状态有以下分类：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

例如我们这里定义一个链接：

<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>

然后为其分别设置不同状态下的链接颜色：

<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

其在显示时，根据其状态的不同会显示不同的颜色。但是要注意，当为链接设置不同状态的不同样式时，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

我们在前面文本格式介绍过，text-decoration 属性主要用于删除链接中的下划线，根据其不同状态设置时案例如下：

<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>

我们将其设置为未访问的链接与已访问的链接没有下划线，点击和鼠标放上去时显示下划线：

<style>
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
</style>

其同样要遵循顺序规则。，同样的，我们设置背景色等规则时，也都要遵循顺序规则：

<style>
a:link {background-color:#B2FF99;}    /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;}   /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;}  /* 鼠标点击时 */
</style>

4.5 列表

CSS 列表属性效果有下列三种：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

4.5.1 置列表项标志的类型

在 HTML中，有两种类型的列表，无序列表和有序列表，我们可以使用list-style-type改变其默认的前标样式，如：

<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

我们使用CSS样式改变其前标样式：

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>

改变后，其显示效果为：
在这里插入图片描述

其中，list-style-type属性指定列表项标记的类型。list-style-type:none 属性可以用于移除小标记。默认情况下列表

或
1. 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

<head>
<meta charset="utf-8"> 
<title>列表移除小标记案例</title> 
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>默认设置:</p>
<ul>
  <li>Google</li>
  <li>Runoob</li>
  <li>Taobao</li>
</ul>

<p>移除默认设置:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>

4.5.2 将图像设置为列表项标志

同时，我们也可以使用list-style-image将图像作为列表的前标显示：

ul 
{
	list-style-image:url('sqpurple.gif');
}

但是此方案在不同浏览器中会导致显示的图像大小不一致的问题，所以想要正确的使用，需要使用下列的例子：

<style>
ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul li
{
	background-image:url(sqpurple.gif);
	background-repeat:no-repeat;
	background-position:0px 5px; 
	padding-left:14px;
}
</style>

例子中涉及的设置有：
ul:

设置列表类型为没有列表项标记
设置填充和边距 0px（浏览器兼容性）
ul 中所有 li:
设置图像的 URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左 0px 和上下 5px）
用 padding-left 属性把文本置于列表中

4.5.3 简写属性

单个属性中可以指定所有的列表属性。这就是所谓的简写属性。为列表使用简写属性，列表样式属性设置如下：

<style>
ul 
{
	list-style:square url("sqpurple.gif");
}
</style>

可以按顺序设置如下属性：

list-style-type
list-style-position
list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。

4.5.4 设置列表中列表项标志的位置

我们使用list-style-position 属性来规定列表中列表项目标记的位置：

<html>
<head>
<meta charset="utf-8"> 
<title>列表项目标记位置案例</title> 
<style type="text/css">
ul.inside 
{
	list-style-position: inside
}

ul.outside 
{
	list-style-position: outside
}
</style>
</head>

<body>
<p>该列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>

<p>该列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
</body>
</html>

其显示效果如下：
在这里插入图片描述

这里我们可能看的不是很明显，如果将其隐藏的块级区域（块级的概念我们将在后面介绍）显示出来，我们就可以很清楚的了解其意义：
在这里插入图片描述

其默认值是 outside，共可以设置以下三种值：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit：规定应该从父元素继承 list-style-position 属性的值。

4.5 表格

我们可以使用CSS修饰表格使表格样式更加精美。

4.5.1 表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格边框案例</title>
<style>
table,th,td
{
	border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>

但是我们发现上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

在这里插入图片描述

为了显示一个表的单个边框，使用 border-collapse属性。

4.5.2 折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开，我们在上面的案例中将CSS样式修改为下列的代码：

<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>

此时表格显示就为单线条了：
在这里插入图片描述

4.5.3 表格宽度和高度

Width和height属性定义表格的宽度和高度。

我们将上面的表格设置为100％的宽度，50像素的th元素的高度的表格：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
th
{
	height:50px;
}
</style>

其样式为：
在这里插入图片描述

4.5.4 表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心；
垂直对齐属性设置垂直对齐，比如顶部，底部或中间；

我们将上面表格标题的垂直对齐设置为向下对其，其他表格设置为水平对齐为向右对齐：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
td{
	text-align:right;
}
th
{
	height:50px;
	vertical-align:bottom;
}
</style>

其样式为：
在这里插入图片描述

4.5.5 表格填充

如需控制边框和表格内容之间的间距，应使用padding属性控制td和th元素的填充属性，我们将上面的表格间距设置为15px：

<style>
table {
    border-collapse: collapse;
	width:100%;
}

table, td, th {
    border: 1px solid black;
}
td{
	text-align:right;
	padding:15px;
}
th
{
	height:50px;
	vertical-align:bottom;
}
</style>

其样式为：
在这里插入图片描述

4.5.6 表格颜色

表格的颜色分为：

边框颜色：使用border:solid属性
th元素的文本颜色：使用color属性
h元素的背景颜色：使用background-color属性

我们将上面的表格边框设置为绿色，标题背景色设置为橙色，标题文字设置为红色：

<style>
table, td, th {
    border: 1px solid green;
}
table {
    border-collapse: collapse;
	width:100%;

}
td{
	text-align:right;
	padding:15px;
}
th
{
	height:50px;
	vertical-align:bottom;
	background-color:orange;
	color:red;
}
</style>

其样式为：
在这里插入图片描述

4.6 边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

4.6.1 边框样式

例如下图的几种边框样式：
在这里插入图片描述

边框样式属性指定要显示什么样的边界，使用border-style属性用来定义边框的样式，其可以选择的样式有：

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

下面是常用的一些边框样式测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title> 边框样式测试案例</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>

其效果为：
在这里插入图片描述

4.6.2 边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

下面是边框宽度的测试案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框宽度的测试案例</title>
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

4.6.3 边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

我们分别为上面三个边框设置红色蓝色绿色：

<style>
p.one 
{
	border-style:solid;
	border-width:5px;
	border-color:red;
}
p.two 
{
	border-style:solid;
	border-width:medium;
	border-color:#98bf21; 
}
p.three
{
	border-style:solid;
	border-width:1px;
	border-color:#0000FF;
}
</style>

其分别使用不同的三种方式表示对应的颜色：
在这里插入图片描述

同样的，颜色设置也不能单独使用，要先使用"border-style" 属性来设置边框。

4.6.4 单独设置各边

在CSS中，可以指定不同的侧面不同的边框，这些值可以单独出现，也可以同时出现，如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>边框单独设置边测试</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

这里将上边框和下边框设置为dotted类型，左边框和右边框设置为solid类型，其中的CSS样式也可以这样写：

<style>
p
{
	border-style:dotted solid，dotted solid;
}
</style>

5.盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

5.1 元素的宽度和高度

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元素的宽度和高度测试</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

在这里插入图片描述

这里的实际元素大小为：300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px。假设我们只有 250 像素的空间，让我们设置总宽度为 250 像素的元素:

将上面的案例修改为：

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

在这里插入图片描述

此时，它的大小才符合要求。最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.2 margin(外边距)

margin 清除周围的（外边框）元素区域，没有背景颜色，是完全透明的。其可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

在这里插入图片描述

在CSS中，可以指定单边外边距属性：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

也可以使用一个属性中margin指定的所有边距属性。也就是所谓的简写属性。

margin:100px 50px;

margin属性可以有一到四个值。

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>外边距测试</title> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

上面是一个外边距测试案例，其效果如下图所示：
在这里插入图片描述

5.3 padding（内边距）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。
在这里插入图片描述

在CSS中，它可以指定不同的侧面不同的填充：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

这里指定上内边距是 25px，右内边距是 50px，下内边距是 25px，左内边距是 50px。

同样的，为了缩短代码，它可以在一个属性中指定的所有填充属性，这就是所谓的简写属性，所有的填充属性的简写属性是 padding 。Padding属性，可以有一到四个值：

padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px

5.4 边框

盒子模型中的边框符合我们上边介绍的边框的规则：

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

5.5 案例

我们简单使用单选框与输入框来进行一个外边距与内边距的案例：

设置单选框的选择框与选项之间的距离为20px
设置input输入框内，文字到边框的距离为20px

首先我们要清楚，其分别是什么距离，首先单选框是一个盒子选项也是一个盒子所以两个盒子的距离为外边距margin。然后input输入框是一个盒子, 盒子里的内容到边框的距离padding内边距。

所以代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距与内边距案例测试</title>
	</head>
	<body>
		<!-- 外边距: 单选框是一个盒子    男也是一个盒子   两个盒子的距离margin -->
		<input type="radio" style="margin: 20px;"/>男 
		
		<!-- 内边距: 一个盒子里, 内容到边框的距离padding -->
		<input type="text" placeholder="你好" style="padding: 20px;"/>
		
	</body>
</html>

在这里插入图片描述

6.制作餐饮小票

在这里插入图片描述

6.1 CSS代码

body{/* 统一网页风格*/
	width: 400px;/* 宽度 */
	font-size: 15px;/* 字号 */
}
/* 修改字号 */
.a{/* class选择器,选中网页中class=a的元素 */
	font-size: 30px;
}
/* 修饰文字居中 */
.b{
	/* text-align: center; */
	padding-left: 100px;/* 内边距 */
}
/* 修饰水平线 */
hr{
	border:1px dashed green; /* 宽度 虚线 绿色*/
}
/* 修饰文本缩进/首行缩进 */
#note{
	text-indent:30px;
}
/* 修饰图片居中 */
img{
	padding-left: 80px;
}

6.2 html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>餐饮小票制作案例</title>
    <!-- 1.松耦合,分离了HTML和css代码,在网页里引入css文件 -->
    <link rel="stylesheet" href="D:\ApplicationFiles\vscode\chapter_three\css\1.css" />
</head>

<body>
    <div>顾客联</div>
    <div class="a">请您留意取餐账单号</div>
    <div class="b">自取顾客联</div>
    <div>永和大王(北二环西路店)</div>
    <div>010-6211313</div>
    <div class="b">--结账单--</div>
    <div class="a">账单号:P000009</div>
    <div>账单类型：堂食</div>
    <div>人数：1</div>
    <div>收银员：张静</div>
    <div>开单时间：2018-04-17 07:24:29</div>
    <div>结账时间：2018-04-17 07:24:38</div>
    <hr />
    <table>
        <tr>
            <th>数量</th>
            <th>品项</th>
            <th>金额</th>
        </tr>
        <tr>
            <td>1</td>
            <td>油条豆浆套餐<br /> 1X--油条<br />1X--现磨豆浆(热/甜) </td>
            <td>7.00</td>
        </tr>
    </table>
    <hr />
    <table>
        <tr>
            <td width="180px">支付宝花呗一元早餐</td>
            <td>3.00</td>
        </tr>
        <tr>
            <td>合计</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>支付宝</td>
            <td>1.00</td>
        </tr>
        <tr>
            <td>支付宝补贴</td>
            <td>3.00</td>
        </tr>
    </table>
    <hr />
    <div>打印时间：2018-04-17 07:24:38</div>
    <hr />
    <div id="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
    </div>
    <img src="D:\ApplicationFiles\vscode\chapter_three\images\2.jpg" />
    <div>官网：www.yonghe.com.cn</div>
    <div>加盟热线：86-21-60769397 或 86-21-60769002</div>

</body>

</html>

7.完成用户注册

在这里插入图片描述

7.1 CSS代码

/* 修饰输入框 */
.a{
	width: 300px;/* 宽度 */
	height: 30px;/* 高度 */
	font-size: 20px;/* 字号 */
	padding: 15px;/* 内边距padding */
}
/* 修饰文字说明 */
.b{
	text-indent: 20px;/* 首行缩进 */
	font-size: 8px;/* 字号 */
	color: gray;/* 颜色 */
}
/* 修饰我已阅读 */
#note{
	padding-left: 20px;/* 内边距-左边距 */
}
/* 修饰注入按钮 */
input[type='submit']{
	text-align: center;/* 居中 */
	width: 330px;/* 宽度 */
	height: 50px;/* 高度 */
	font-size: 20px;/* 字号 */
	background-color: orangered;/* 背景色 */
	border-color: orangered;/* 边框颜色 */
	color: white;/* 字的颜色 */
}
/* 修饰用户注册 */
h3{
	margin-left: 130px;/* 左边距 */
}

7.2 html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户注册案例</title>

    <!-- 在HTML网页中引入css代码 -->
    <link rel="stylesheet" type="text/css" href="D:\ApplicationFiles\vscode\chapter_three\css\2.css">
</head>

<body>
    <!--只有form标签才能提交数据:必须用form+必须有submit+必须设置name属性
			method属性用来设置数据提交方式(get/post,默认是get)
			action属性用来设置数据将要交给哪个java程序来处理
		-->
    <form method="post" action="#">
        <!-- 指定提交数据的方式-->
        <table>
            <h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
            <tr>
                <td>
                    <input type="text" placeholder="用户名" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    支持中文、字母、数字、“-”、“_”的组合，4-20个字符
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="设置密码" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    建议使用数字、字母和符号两种以上的组合，6-20个字符
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="确认密码" class="a" />
                </td>
            </tr>
            <tr>
                <td class="xiao">
                    两次密码输入不一致
                </td>
            </tr>
            <tr>
                <td>
                    <input type="password" placeholder="验证手机" class="a" />
                    或
                    <a href="#"> 验证邮箱</a>
                </td>
            </tr>
            <tr>
                <td id="note">
                    <input type="checkbox" />
                    我已阅读并同意
                    <a href="#">《京淘用户注册协议》</a>
                </td>
            </tr>
            <tr>
                <td>
                    <!-- type类型必须是submit才能提交数据 -->
                    <input id="btn" type="submit" value="立即注册" />
                </td>
            </tr>
        </table>
</body>

</html>