当前位置: 首页 > 工具软件 > CSS Tester > 使用案例 >

html_css

南门祯
2023-12-01

1、meta标签

​ ● 网页所采用的编码字符集:

​ meta 标签用来设置网页的一些元数据,比如网页的字符集,关键字,简介

​ meta 是一个自结束标签,编写一个自结束标签时,可以在开始标签中添加一个 /

	<meta charset="utf-8" />

​ ● 设置网页的关键字

​ 使用 meta 标签可以用来设置网页的关键字

	<meta name="keywords" content="HTML5,JavaScript,前端,Java" />

​ ● 指定网页的描述

​ 搜索引擎检索页面时,会同时检索页面中的关键词和描述,但是这两个值不会影响页面在搜索引擎中的排名

	<meta name="description" content="发布h5、js等前端相关的信息" />

​ ● 做请求的重定向

​ 格式:

	<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

2、实体

​ 在 html 中,一些如 > < 这种特殊字符是不能直接使用,需要使用一些特殊的符号来表示这些特殊字符

符号实体
<&lt;
>&gt;
空格&nbsp;
版权符号&copy;

3、图片标签以及图片格式

​ 图片标签以及属性:

​ 图片标签使用 img 表示

​ 属性:

​ src:配置图片的路径

​ alt:当鼠标放到图片上时的提示文字

​ 图片的格式:

​ JPEG(JPG):

​ JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明;

​ 一般使用JPEG来保存照片等颜色丰富的图片

​ GIF:

​ GIF支持的颜色稍,只支持简单的透明,支持动态图

​ 图片颜色单一或者是动态图可以使用 GIF

​ PNG:

​ PNG支持的颜色多,并且支持复杂的透明

​ 可以用来显式颜色复杂的透明的图片

4、常用选择器

​ ● 元素选择器

​ 作用:通过元素选择器可以选择页面中的所有指定元素

​ 语法:标签名 {}

p {
    color: red;
}
h1 {
    color: blue;
}

​ ● id 选择器

​ 作用:通过元素的 id 属性值选中唯一的一个元素

​ 语法: #id属性值 {}

#p1 {
    font-size: 20px;
}

​ ● 类选择器(class)

​ 作用:class 属性和 id 属性类似,只不过 class 属性可以重复,拥有相同 class 属性值的元素,我们说他们是

​ 一组元素,可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开

.p2 {
    background-color: yellow;
}

5、选择器分组

​ ● 并集选择器

​ ○ 通过选择器分组可以同时选中多个选择器对应的元素

​ ○ 语法:选择器1,选择器2,选择器N {}

#p1, .p2, h1{
    background-color: yellow;
}

​ ● 通配选择器

​ ○ 可以用来选中页面中的所有的元素

​ ○ 语法:* {}

* {
    color: red;
}

​ ● 交集选择器

​ ○ 可以选中同时满足多个选择器的元素

​ ○ 语法:选择器1选择器2选择器N {}

span.p3{
    background-color: yello;
}

6、子元素和后代选元素选择器

​ ● 元素之间的关系

​ 父元素:直接包含子元素的元素

​ 子元素:直接被父元素包含的元素

​ 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素

​ 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素

​ 兄弟元素:拥有相同父元素的元素叫做兄弟元素

​ ● 后代元素选择器

​ ○ 选中指定元素的指定后代元素

​ ○ 语法:祖先元素 后代元素 {}

#d1 span {
    color: greenyellow;
}

​ ● 子元素选择器

IE6及以下的浏览器不支持子元素选择器

​ ○ 选中指定父元素的指定子元素

​ ○ 语法:父元素 > 子元素 {}

div > span > span {
    background-color: yellow;
}

7、伪类选择器

​ 伪类专门用来表示元素的一种的特殊的状态,比如:访问过的超链接、普通的超链接、获取焦点的文本框,当

​ 我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类

​ ● :link

​ 表示普通的连接(没访问过的连接)

a:link {
    color: yellowgreen;
}

​ ● :visited

​ 表示访问过的链接,浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题,所以

​ 使用 visited 伪类只能设置字体的颜色

a:visited{
    color: red;
}

​ ● :hover

​ 表示鼠标移入的状态

a:hover {
    color: blue;
}

​ ● :active

​ 表示超链接被点击的状态

a:active {
    color: black;
}

​ ● :hover和 :active也可以为其他元素设置。IE6中,不支持对超链接以外的元素设置 :hover 和 :active

​ ● :focus

​ 获取焦点

/* 文本框获取焦点以后,修改背景颜色为黄色 */
input:focus {
    background-color: yellow;
}

​ ● :before

​ 指定元素前

​ 一般 before 都需要结合 content 这个样式一起使用,通过 content 可以向 before 或 after 的位置添加一些

​ 内容

/*表示元素最前边的部分*/
p:before {
    content: "我会出现在整个段落的最前边";
    color: red;
}

​ ● :after

​ 指定元素后

/*表示元素的最后边的部分*/
p:after {
    content: "我会出现在整个段落的最后边";
    color: orange;
}

​ ● ::selection

​ 选中的元素

/*
 *	为 p 标签中选中的内容使用样式
 *	可以使用 ::selection 伪类
 *	注意:这个伪类在火狐中需要采用另一种方式编写:::-moz-selection
 */
p::selection {
    background-color: orange
}

/*火狐浏览器编写方式*/
p::-moz-selection {
    background-color: orange
}

8、伪元素

​ 使用伪元素来表示元素中的一些特殊的位置

​ ● 首字母

​ :first-letter

/*为 p 中第一个字符来设置一个特殊的样式*/
p:first-letter{
    color: red;
    font-size: 20px;
}

​ ● 首行

​ :first-line

/*为 p 中的第一行设置一个背景颜色为黄色*/
p:first-line {
    background-color: yellow;
}

9、属性选择器

​ ● title

​ title 属性,这个属性可以给任何标签指定。当鼠标移入到元素上时,元素中的 title 属性的值将会作为提示文

​ 字显示

<p title="我是title中的文字">
    我是一个段落
</p>

​ ● 属性选择器

​ ○ 作用:可以根据元素中的属性或属性值来选取指定元素

​ ○ 语法:

​ [属性名] 选取含有指定属性的元素

​ [属性名=“属性值”] 选取含有指定属性值的元素

​ [属性名^=“属性值”] 选取属性值以指定内容开头的元素

​ [属性名$=“属性值”] 选取属性值以指定内容结尾的元素

​ [属性名*=“属性值”] 选取属性值以包含指定内容的元素

//为所有具有 title 属性的 p 元素设置一个背景颜色为黄色
p[title] {
    background-color: yellow
}

//为 title 属性值是 hello 的元素设置一个背景颜色为黄色
p[title="hello"] {
    background-color: yellow;
}

//为 title 属性值以 ab 开头的元素设置一个背景颜色为黄色
p[title^="ab"] {
    background-color: yellow;
}

//为 title 属性值以 c 结尾的元素设置一个背景颜色
p[title$="c"] {
    background-color: yellow;
}

//为 title 属性值包含 m 的元素设置一个背景颜色
p[title*="m"]{
    background-color: yellow;
}

10、其他子元素选择器

​ ● :first-child

​ 选中第一个子标签,只会选择父元素中的第一个元素,父元素可以是任何元素

/*为第一个 p 标签设置一个背景颜色为黄色*/
p:first-child {
    background-color: yellow
}

​ ● :last-child

​ 选中最后一个子标签,只会选择父元素中的最后一个元素,父元素可以是任何元素

p:nth-child{
    background-color: yellow;
}

​ ● :nth-child

​ 选择指定位置的子元素;

​ 该选择器后面可以指定一个参数,指定要选择第几个子元素;

​ even:表示偶数位置的子元素

​ odd:表示基数位置的子元素

p:nth-child(3){
    background-color: yellow;
}

p:nth-child(even){
    background-color: red;
}

p:nth-child(odd){
    background-color: blue;
}

​ ● :first-of-type,:last-of-type,:nth-of-type

​ 选择指定类型的子元素;

​ 和前面的这些非常类似;只不过 child 是在所有的子元素中排列,即body中的排列,而type是在当前类型的

​ 子元素中排列,不管元素是不是body中的第一个或者是最后一个,它会从这一类中找

p:first-of-type{
    color: red;
}
p:last-of-type{
    color: blue;
}
p:nth-of-type{
    color: green;
}

11、兄弟元素选择器

​ ● 后一个兄弟元素选择器

​ ○ 作用:可以选择一个元素后紧挨着的指定的兄弟元素

​ ○ 语法:前一个 + 后一个

//为 span 后一个 p 元素设置一个背景颜色为黄色
span + p {
    background-color: yellow;
}

​ ● 选中后边的所有兄弟元素

​ 语法:前一个 ~ 后边所有

span ~ p{
    background-color: yellow;
}

12、否定伪类

​ 作用:可以从已选中的元素中剔除出某些元素

​ 语法::not(选择器)

//为所有的p元素设置一个背景颜色为黄色,除了class值为hello的
p:not(.hello){
    background-color:yellow;
}

13、样式的继承

​ 祖先元素上的样式,会被它的后代元素所继承,利用继承,可以将一些基本的样式设置给祖先元素,这样所有

​ 的后代元素将会自动继承这些样式。

​ 但是并不是所有的样式都会被子元素所继承,比如:背景相关的样式都不会被继承

14、选择器的优先级

​ ● 当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪

​ 个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示

​ ● 优先级的规则:

​ 内联样式:优先级 1000

​ id选择器:优先级 100

​ 类和伪类:优先级 10

​ 元素选择器:优先级 1

​ 通配*:优先级 0

​ 继承的样式:没有优先级

​ ● 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较,但是注意,选择器优先级计算不

​ 会超过它的最大的数量级,如果选择器的优先级一样,则使用靠后的样式

​ ● 并集选择器的优先级是单独计算的,比如:div, p, #p1, .hello{} 这种不会将优先级相加,会单独计算

​ ● 可以在样式的最后,添加一个 ! important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样

​ 式显示甚至超过内联样式,但是在开发中尽量避免使用 ! import

.p1 {
    color: yellow;
    background-color: green !important;
}

15、伪类的优先级

​ 涉及到 a 超链接的伪类一共有4个:

​ :link

​ :visited

​ :hover

​ :active

​ 而这4个选择器的优先级是一样的,如果 :hover 伪类写在 :active 的后面时,如果点击超链接,不会出现

​ :active 的样式,因为优先级一样会选择后面的,:link和:visited不存在这种冲突,顺序可以随便写,所以

​ 使用这几个伪类时 :hover 要写在 :active 的前边

16、文本标签及样式

​ ● <em>和<strong>

​ ○ em标签用于表示一段内容中的着重点,主要表示语气上的强调

​ ○ strong标签用于表示一个内容的重要性

​ ○ 这两个标签可以单独使用,也可以一起使用

​ ○ 通常 em 显示为斜体,而strong显示为粗体

<p>
    <strong>警告:任何情况下不要接近僵尸</strong>
    他们只是<em>看起来</em>很友好,实际上他们是为了吃你胳膊
</p>

​ ● <i>和<b>

​ ○ i标签中的内容会以斜体显示

​ ○ b标签中的内容会以加粗显示

​ ○ h5 规范中规定,对于不需要着重的内容而是单纯的加粗或者斜体,就可以使用 b 和 i 标签

​ ● <small>

​ small标签中的内容会比它的父元素中的文字要小一些,在h5中使用small标签来表示一些细则一类的内容,

​ 比如:合同中的小字,网站的版权声明都可以放在 small 标签中

​ ● <cite>

​ 使用 cite 标签可以指明对某些内容的引用或参考。比如:戏剧、文章或图书的标题、歌曲、电影、照片或雕

​ 塑的名称等

<p>
    <cite>《七龙珠》</cite>讲的是召唤神龙的故事
</p>

​ ● <q>

​ q 标签标示一个短的引用(行内引用);q标签引用的内容,浏览器会默认加上引号

<p>
    子曰:<q>学而时习之不亦说乎!</q>
</p>

​ ● <blockquote>

​ blockquote 标签标示一个长引用(块级引用)

<div>
    子曰:
    <blockquote>
        有朋自远方来,乐呵乐呵!
    </blockquote>
</div>

​ ● <sup>

​ 使用 sup 标签来设置一个上标

<p>
    2<sup>2</sup>
</p>
<p>
    赵薇<sup><a href="#">[1]</a></sup>
</p>

​ ● <sub>

​ sub标签用来表示一个下标

<p>
    H<sub>2</sub>O
</p>

​ ● <ins>和<del>

​ ○ ins 表示插入的内容,显示时通常会加上下划线

​ ○ del 表示删除的内容,显示时通常会加上删除线

<p>
    <del>17.75</del> <br />
    15.54 <br />
</p>

<p>
    我们的老师真<ins>好啊</ins>!
</p>

​ ● <pre>

​ 需要页面中直接编写一些代码,pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格

<pre>
	window.onload = function(){
		alert("Hello World")
	}
</pre>

17、无序列表和有序列表

​ 在HTML也可以创建列表,在网页中一共有三种列表

​ ● 无序列表

​ 使用 ul 标签来创建一个无序列表;使用 li 在 ul 中创建一个一个的列表项,一个 li 就是一个列表项;

​ 通过 type 属性可以修改无序列表的项目符号:

​ 可选值:

​ disc:默认值,实心的圆点

​ square:实心的方块

​ circle:空心的圆

​ 注意:默认的项目符号我们一般都不使用!!如果需要设置项目符号,则可以采用为 li 设置背景图片的

​ 方式来设置。ul 和 li 都是块元素

<ul type="">
    <li>西门大官人</li>
    <li>柴大官人</li>
    <li>许大官人</li>
    <li>唐僧大官人</li>
</ul>

​ 去掉项目符号的样式:

ul{
    list-style: none;
}

​ ● 有序列表

​ 有序列表和无序列表类似,只不过它使用 ol 来代替 ul

​ 有序列表使用有序的序号作为项目符号

​ type 属性可以指定序号的类型

​ 可选值:

​ 1,默认值,使用阿拉伯数字

​ a/A,采用小写或大写字母作为序号

​ i/I,采用小写或大写的罗马数字作为序号

​ ol 也是块元素

<ol type="I">
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

​ 列表之间都是可以互相嵌套,可以在无序列表中放有序列表,也可以在有序列表中放一个无序列表

​ ● 定义列表

​ 定义列表用来对一些词汇或内容进行定义,使用 dl 创建一个定义列表

​ dl 中有两个子标签:

​ dt:被定义的内容

​ dd:对定义内容的描述

​ 同样 dl 和 ul 和 ol 之间都可以互相嵌套

<dl>
    <dt>武松</dt>
    <dd>景阳冈打虎英雄,战斗力99</dd>
    <dd>后打死西门庆,投奔梁山</dd>
    <dt>武大</dt>
    <dd>著名餐饮企业家,战斗力0</dd>
</dl>

18、单位

​ ● px

​ 如果我们将一个图片放大的话,我们会发现一个图片是有一个一个的小色块构成的,这一个小色块就是一个

​ 像素,也就是 1px,对于不同的显示器来说一个像素的大小是不同的,像素越小,显示效果越好越清晰

​ ● 百分比

​ 也可以使用一个百分数来表示一个大小,百分比是相对于父元素来说的,如果父元素使用的大小是16px,则

​ 100%就是16px,200%就是32px

​ ● em

​ em和百分比类似,它是相对于当前元素的字体大小来计算的

​ 1em = 1font-size

​ 使用 em 时,当字体大小发生改变时,em 也会随之改变,当设置字体相关的样式时,经常会使用 em

19、十六进制RGB值

​ 颜色单位:

​ ● 在CSS可以直接使用颜色的单词来表示不同的颜色:

​ 红色:red 蓝色:blue 绿色:green

​ ● 也可以使用 RGB 值来表示不同的颜色

​ ○ 所谓的RGB值指的是通过 red green blue三元色,通过这三种颜色的不同浓度,来表示出不同的颜色

​ ○ 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度)

​ 颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有。浓度也可以采用一个百分数来设

​ 置,需要一个0%-100%之间的数字,使用百分数最终也会转换为0-255之间的数,0%表示0,100%表示

​ 255

​ ● 也可以使用十六进制的 rgb 值来表示颜色,原理和上边 rgb 原理一样,只不过使用十六进制数来代替,使

​ 用三组两位的十六进制数组来表示一个颜色,00-ff

​ 语法:#红色绿色蓝色

​ 00表示没有,相当于 rgb 中的0,ff表示最大,相当于 rgb 中255

​ 像这种两位两位重复的颜色,可以简写,比如:#ff0000 可以写成 #f00,#aabbcc可以写成#abc

20、字体

.p1{
    /*设置字体颜色,使用color来设置文字的颜色*/
    color: red;
    /*
    	设置文字的大小,浏览器中一般默认的文字大小都是16px
    	font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的,
    	我们设置的font-size实际上是设置框的高度,并不是字体的大小,一般情况下文字都要比这个框要小
    	一些,也有时会比框大,根据字体的不同,显示效果也不同
    */
    font-size: 30px;
    /*
    	通过font-family可以指定文字的字体,当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持
    	,则使用默认字体。该样式可以同时指定多个字体,多个字体之间使用逗号分开,当采用多个字体时,浏览器
    	会优先使用前边的字体,如果前边没有再尝试下一个
    	
    	浏览器使用的字体默认就是计算机中的字体,如果计算机中有,则使用,如果没有就不用
    	有可能用户的电脑没有,就不能达到想要的效果
    	查看计算机中字体目录:c盘/Windows/Fonts
    */
    /*font-family: arial, 围观雅黑; */
    font-family: 华文彩云, arial, 微软雅黑;
}

21、字体分类

<!--
	在网页中将字体分成5大类
		serif(衬线字体)
		sans-serif(非衬线字体)
		monospace(等宽字体)
		cursive(草书字体)
		fantasy(虚幻字体)
	可以将字体设置为这些大的分类,当设置为大的分类后,浏览器会自动选择指定的字体并应用样式,一般会将
	字体的大分类指定为font-family中的最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">
    我是P标签
</p>

22、字体的样式

.p1{
    color: red;
    font-size: 30px;
    font-family: "微软雅黑";
    
    /*
    	font-style可以用来设置位子的斜体
    		可选值:
    			normal,默认值,文字正常显示
    			italic,文字会以斜体显示
    			oblique,文字会以倾斜的效果显示
    		大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置 italic 和 oblique 它们的效果往往是
    		一样的
    		一般我们只会使用 italic
    */
    font-style: italic;
    
    /*
    	font-weight 可以用来设置文本的加粗效果
    		可选值:
    			normal,默认值,文字正常显示
    			bold,文字加粗显示
    		该样式也可以指定100-900之间的9个值
    			但是由于用户的计算机往往没有这么多级别的字体,所以达到我们想要的效果,也就是200有可能
    			比100粗,300有可能比200粗,但是也可能是一样的
    */
    font-weight: 500;
    
    /*
    	font-variant 可以用来设置小型大写字母
    		可选值
    			normal:默认值,文字正常显示
    			small-caps:文本以小型大写字母显示
    		小型大写字母:将所有的字母都已大写形式显示,但是小写字母的大小要比大写字母的大小小一些
    */
    font-variant: small-caps;
    
}

.p2{
    /*设置一个文字大小*/
    font-size: 50px;
    /*设置一个字体*/
    font-family: 华文彩云;
    /*设置文字斜体*/
    font-style: italic;
    /*设置文字的加粗*/
    font-weight: bold;
    /*设置一个小型大写字母*/
    font-variant: small-caps;
}

.p3{
    /*
    	在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关的所有样式,可以将字体的样式
    	的值统一写在font样式中,不同的值之间使用空格隔开
    
    	使用font设置字体样式时,斜体,加粗,小型大写字母 没有顺序要求,甚至可写可不写,如果不写则使用默认
    	值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,大小必须是倒数第二个样式
    
    	实际上使用简写属性也会有一个比较好的性能
    */
    font: small-caps bold italic 60px "微软雅黑";
}

23、行高

/*
	在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接地设置行间距,行高越大行间距
		越大
	使用 line-height 来设置行高
		行高类似于单线本,单线本是一行一行的,线与线之间的距离就是行高,网页中的文字实际上也是写在一个看不
		见的线中的,而文字会默认在行高中垂直居中显示
	行间距 = 行高 - 字体大小

	通过设置line-height可以间接地设置行高,可以接收的值:
		1、直接接收一个大小
		2、可以指定一个百分数,则会相对于字体去计算行高
		3、可以直接传一个数值,则行高会设置字体大小相应的倍数
*/
.p1{
    font-size: 20px;
    /*line-height: 30px;*/
    /*line-height: 200%;*/
    line-height: 2;
}

.box{
    width: 200px;
    height: 200px;
    /*
    	文本默认是在行高中居中显示的,如果不设置行高,行高默认和字体是一样的高度,如果行高和父元素高度
    		一致,那么文本就会在父元素居中显示
    	对于单行文本来说,可以将行高设置为和父元素的高度一致,这样可以是单行文本在父元素中垂直居中
    */
    line-height: 200px;
}

.p2{
    line-height: 50px;
    /*
    	在 font 中也可以指定行高,在字体大小后可以添加 /行高,来指定行高,该值是可选的,如果不指定则会
    	使用默认值
    */
    font: 30px/50px "微软雅黑";
}

24、文本样式

​ ● text-transform

​ 可以用来设置文本的大小写,可选值:

​ none:默认值,该怎么显示就怎么显示,不做任何处理

​ capitalize:单词的首字母大写,通过空格来识别单词

​ uppercase:所有的字母都大写

​ lowercase:所有的字母都小写

.p1{
    text-transform: lowercase;
}

​ ● text-decoration

​ 可以用来设置文本的修饰,可选值:

​ none:默认值,不添加任何修饰,正常显示

​ underline:为文本添加下划线

​ overline:为文本添加上划线

​ line-through:为文本添加删除线

​ 超链接会默认添加下划线,也就是超链接的 text-decoration 的默认值是 underline,如果需要去除超链接的

​ 下划线则需要将该样式设置为 none

.p1{
    text-decoration: line-through;
}

a{
    text-decoration: none;
}

​ ● letter-spacing和word-spacing

​ letter-spacing:用来设置字符之间的间距

​ word-spacing:用来设置单词之间的间距

​ 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离,负数代表减少距离

.p3{
    letter-spacing: 10px;
    word-spacing: 120px;
}

​ ● text-align

​ 用于设置文本的对齐方式

​ 可选值:

​ left:左对齐

​ right:右对齐

​ center:居中对齐

​ justify:两边对齐,如果文本有多行,让多行两边对齐,通过调整文本之间的空格的大小,来达到一个两

​ 端对齐的目的

.p1{
    text-align: justify;
}

​ ● text-indent

​ 用来设置首行缩进

​ 给它指定一个正值,会自动向右侧缩进指定的像素

​ 给它指定一个负值,则会向左移动指定的像素

.p1{
    /*text-indent: 32px;*/
    text-indent: -10px;
}

25、盒子模型-边框

.box{
    /*
    	width和height只是设置盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区、
    	内边距和边框共同决定的
    */
    width: 100px;
    height: 100px;
    /*
    	为元素设置边框
    		要为一个元素设置边框必须指定三个样式
    			border-width: 边框的宽度
    				border-width 可以分别指定四个边框的宽度,
    					如: border-width:10px 20px 30px 40px,
    				border-width指定的四个值分别设置给上、右、下、左,按顺时针方向设置
    				border-width指定三个值,则设置给上、左右、下
    				border-width指定两个值,则设置给上下、左右
    				border-width指定一个值,则四边全都是该值
    				除了border-width,css还提供了border-xxx-width,xxx的值可能是top、right、
    					bottom、left
    			border-color: 边框的颜色
    				和宽度一样,color也提供四个方向的颜色,可以分别指定颜色
    				border-xxx-color和border-xxx-width类似
    			border-style: 边框的样式
    				可选值:
    					none: 默认值,没有边框
    					solid: 实线
    					dotted: 点状边框
    					dashed: 虚线
    					double: 双线
    				border-style也可以分别指定四个边框的样式,规则和width一致,同时它也提供
    					border-xxx-style
    */
    border-width: 10px;
    border-color: red;
    border-style: solid;
}

26、盒子模型-边框简写属性

​ ● 大部分浏览器中,边框的宽度和颜色都是有默认值的,而边框的样式默认值都是none

​ ● border

​ 边框的简写样式,通过它可以同时设置四个边框的样式、宽度、颜色,而且没有任何的顺序要求;

​ border一指定就是同时指定四个边,不能分别指定

​ ● border-top、border-right、border-bottom、border-left 可以单独设置四个边的样式,规则和border一

​ 样,只不过它只对一个边生效

.box{
    border: red solid 10px;
    border-top: red solid 10px;
}

27、盒子模型-内边距

​ ● 内边距(padding),指的是盒子的内容区与盒子边框之间的距离,一共有四个方向的内边距,可以通过:

​ padding-top

​ padding-right

​ padding-bottom

​ padding-left 来设置四个方向的内边距

​ ● 内边距会影响盒子的可见框的大小,元素的背景会延伸到内边距

​ ● 使用padding可以同时设置四个边框的样式,规则和border-width一致

.box1{
    padding-top: 100px;
    padding-right: 100px;
}

.box2{
    padding: 100px;
}

28、盒子模型-外边距

​ ● 外边距指的是当前盒子与其他盒子之间的距离,它不会影响可见框的大小,而是会影响到盒子的位置

​ ● 盒子有四个方向的外边距

​ margin-top

​ margin-right

​ margin-bottom

​ margin-left

​ ● 由于页面中的元素都是靠左靠上摆放的,所以注意,当我们设置上和左外边距时,会导致盒子自身的位置发生

​ 改变,而如果是设置右和下外边距会改变其他盒子的位置

​ ● 外边距也可以指定一个负值,如果外边距设置的是负值,则元素会向反方向移动

​ ● margin还可以设置为auto,auto一般只设置给水平方向的margin;

​ 如果只指定左外边距或右外边距的margin为auto,则指定的那一侧的外边距将设置为最大值

​ 垂直方向外边距如果设置为auto,则外边距默认就是0

​ ● 如果将left和right同时设置为auto,则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居

​ 中,所以我们经常将左右外边距设置为auto,以使子元素在父元素中水平居中

​ ● 外边距同样可以使用简写属性margin,可以同时设置四个方向的外边距,规则和paddin一样

.box{
    margin-top: 100px;
    margin-left: 100px;
    margin: 0 auto;
}

29、垂直外边距的重叠

​ ● 在网页中相邻的垂直方向的外边距会发生外边距的重叠,所谓的外边距重叠指兄弟元素之间的相邻外边距会取

​ 最大值而不是取和

​ ● 如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            height: 100px;
            width: 100px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: green;
            margin-top: 100px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box4{
            height: 100px;
            width: 100px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4"></div>
    </div>

</body>
</html>

30、浏览器默认样式

​ 浏览器为了页面中没有样式时也可以有一个比较好的显式效果,所以为很多的元素都设置了一些默认的

​ margin和padding,而这些默认样式,正常情况下我们是不需要使用的,所以我们往往在编写样式之前需要将

​ 浏览器中的默认的margin和padding统统的去掉

*{
    margin: 0;
    padding: 0;
}

32、内联元素的盒模型

​ ● 内联元素不能设置 width 和 height

​ ● 内联元素可以设置水平方向的内边距

​ ● 内联元素可以设置垂直方向的内边距,但是不会影响页面的布局,不会影响页面的布局指的是如果在内联元素

​ 的上边或下边有元素,如果增加垂直方向的内边距,它会将上边或下边的元素遮挡掉,上边和下边的元素不

​ 会因为垂直方向的内边距增加而上移或下移

​ ● 内联元素可以设置边框,但是垂直的边框不会影响到页面的布局

​ ● 内联元素支持水平方向的外边距,水平方向的相邻外边距不会重叠,而是求和

​ ● 内联元素不支持垂直外边距

33、display和visibility

​ ● display

​ 将一个内联元素变成块元素,可选值:

​ inline:可以将一个元素作为内联元素显示

​ block:可以将一个元素设置块元素显示

​ inline-block:将一个元素转换为行内块元素,可以使一个元素既有行内元素的特点又有块元素的特点,既

​ 可以设置宽高,又不会独占一行

​ none:不显示元素,并且元素不会在页面中继续占有位置

​ ● visibility

​ 可以用来设置元素的隐藏和显示状态,可选值:

​ visible:默认值,元素默认会在页面显示

​ hidden:元素会隐藏不显示

​ 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示,但是它的位置会依然保持

.ele{
    display: inline-block;
}
.ele1{
    visibility: hidden;
}

34、overflow

​ ● 子元素默认是存在于父元素的内容区中,理论上讲子元素的最大高宽可以等于父元素内容区大小

​ ● 如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我

​ 们称为溢出的内容

​ ● 父元素默认是将溢出的内容在父元素外边显示,通过overflow可以设置父元素如何处理溢出内容,可选值:

​ visible:默认值,不会对溢出内容做处理,元素会在父元素以外的位置显示

​ hidden:溢出的内容会被修剪,不会显示

​ scroll:会为父元素添加滚动条,通过拖动滚动条来查看完整内容,该属性不论内容是否溢出,都会添加水

​ 平和垂直双方向的滚动条

​ auto:会根据需求自动添加滚动条,需要水平就添加水平,需要垂直就添加垂直,都不需要就都不加

35、文档流

​ ● 文档流

​ 文档流处在网页的最底层,它表示的是一个页面中的位置,我们所创建的元素默认都处在文档流中

​ ● 元素在文档流中的特点

​ ○ 块元素

​ ■ 块元素在文档流中会独占一行,块元素会自上向下排列

​ ■ 块元素在文档流中默认宽度是父元素的100%

​ ■ 块元素在文档流中的高度默认被内容撑开

​ ○ 内联元素

​ ■ 内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则

​ 换到下一行,继续自左向右排列

​ ■ 在文档流中,内联元素的宽度和高度默认都被内容撑开

​ ● 当元素宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度,以适应内边距

36、浮动

​ ● 块元素在文档流中默认垂直排列,所以多个块元素会自上向下依次排开,如果希望块元素在页面中水平排列,

​ 可以是块元素脱离文档流

​ ● 使用 float 来使元素浮动,从而脱离文档流,可选值:

​ none:默认值,元素默认在文档流中排列

​ left:元素会立即脱离文档流,向页面的左侧浮动

​ right:元素会立即脱离文档流,向页面的右侧浮动

​ ● 当为一个元素设置浮动以后(float属性是一个非none的值),元素会立即脱离文档流,元素脱离文档流以后,它

​ 下边的元素会立即向上移动,元素浮动以后,会尽量向页面的左上或者是右上漂浮,直到遇到父元素的边框

​ 或者内边距或者其他的浮动元素

​ ● 如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过这个没有浮动的块元素

​ ● 浮动元素不会超过它上边浮动的元素,最多最多是一样的高度

​ ● 浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以通过浮动来设置文字环绕图片的

​ 效果

​ ● 在文档流中,子元素的宽度默认占父元素的全部。当元素设置浮动以后,会完全脱离文档流,块元素脱离文档

​ 流以后,如果不设置高度和宽度,那么高度和宽度都被内容撑开

​ ● 内联元素脱离文档流以后会变成块元素

37、高度塌陷

​ ● 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高

​ ● 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致

​ 父元素的高度塌陷

​ ● 由于父元素的高度塌陷了,则父元素后面的所有元素都会向上移动,这样将导致页面布局混乱

38、解决高度塌陷

​ 解决高度塌陷都是设置父元素

方案一

​ ● 根据W3C的标准,在页面中元素都有一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以

​ 设置打开或者关闭,默认是关闭的

​ ● 当开启元素的BFC以后,元素将会具有如下特性

​ ○ 父元素的垂直外边距不会和子元素重叠

​ ○ 开启BFC的元素不会被浮动元素所覆盖

​ ○ 开启BFC的元素可以包含浮动的子元素

​ ● 如何开启BFC

​ ○ 设置元素浮动(将父元素设置浮动)

​ 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致

​ 下边的元素上移,不能解决问题

​ ○ 设置元素绝对定位(设置父元素)

​ ○ 设置元素为 inline-block(设置父元素)

​ 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式

​ ○ 将元素的overflow设置为一个非visible的值

推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式

​ 但是在IE6及以下的浏览器中并不支持BFC,所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC,但是具有另

​ 一个隐含的属性叫做 hasLayout,该属性的作用和 BFC类似,所以IE6浏览器可以通过 hasLayout 来解决该问题

​ 开启方式很多,我们直接使用一种副作用最小的:

​ 直接将元素的 zoom 设置为1即可

​ zoom表示放大的意思,后边跟着一个数值,写几就将元素放大几倍

​ zoom:1 表示不放大元素,但是通过该样式可以开启 hasLayout,zoom这个样式,只在IE中支持,其他浏览器

​ 都不支持

方案二

​ ● 有时我们希望清除掉其他元素浮动对当前元素产生的影响,这时可以使用clear来完成功能。

​ ● clear可以用来清除其他浮动元素对当前元素的影响,可选值:

​ none:默认值,不清除浮动

​ left:清除左侧浮动元素对当前元素的影响

​ right:清除右侧浮动元素对当前元素的影响

​ both:清除两侧浮动元素对当前元素的影响,清除对它影响最大的那个元素的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*
            	清除box1浮动对box2产生的影响
            	清除浮动以后,元素会回到其他元素浮动之前的位置
            */
            clear: left;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

​ 解决高度塌陷二:可以直接在高度塌陷的父元素的最后添加一个空白的div,由于这个div并没有浮动,所以他是

​ 可以撑开父元素的高度的,然后再对其进行清除浮动,这样可以通过这个空白的div来撑开父元素的高度,基

​ 本没有副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid yellow;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

​ 使用上面这种方式虽然可以解决高度塌陷问题,但是会在页面中添加多余的结构

​ 我们可以通过after伪类来替换这个空的div。

​ 可以通过after伪类向元素的最后添加一个空白的块元素,然后对其清除浮动,这样做和添加一个div的原理一

​ 样,可以达到一个相同的效果,而且不会在页面中添加多余的div,这是我们最推荐使用的方式,几乎没有副作

​ 用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid yellow;
        }
        .box1:after{
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>

</body>
</html>

方案三

​ 子元素和父元素相邻的垂直外边距会发生重叠,子元素的外边距会传递给父元素,使用空 table 标签可以隔离父

​ 子元素的外边距,阻止外边距的重叠

<div class="box1">
	<div class="box2"></div>
</div>
/*解决父子元素的外边距重叠*/
.box1:before{
    content: "";
    /*
    	display: table可以将一个元素设置为表格显示
    */
    display: table;
}

​ 解决父元素高度塌陷:

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

​ 同时解决高度塌陷和父子相邻元素垂直外边距重叠问题

.clearfix:before, .clear:after{
    content: "";
    display: table;
    clear: both;
}

39、相对定位

​ ● 定位指的是将指定的元素摆放到页面的任意位置,通过定位可以任意地摆放元素

​ ● 通过 position 属性来设置元素的定位,可选值:

​ static:默认值,元素没有开启定位

​ relative:开启元素的相对定位

​ absolute:开启元素的绝对定位

​ fixed:开启元素的固定定位(也是绝对定位的一种)

​ ● 当开启了元素的定位(position属性值是一个非static的值)时,可以通过left、right、top、bottom四个属性来

​ 设置元素的偏移量

​ left:元素相对于其定位位置的左侧偏移量

​ right:元素相对于其定位位置的右侧偏移量

​ top:元素相对于其定位位置的上边的偏移量

​ bottom:元素相对于其定位位置下边的偏移量

​ 通常偏移量只需要使用两个就可以对一个元素进行定位,一般选择水平方向的一个偏移量和垂直方向的偏移

​ 量来为一个元素进行定位

​ ● 当元素的position属性设置为 relative 时,则开启了元素的相对定位

​ ○ 当开启了元素的相对定位以后,如果不设置偏移量时,元素不会发生任何变化

​ ○ 相对定位是相对于元素在文档流中原来的位置进行定位

​ ○ 相对定位的元素不会脱离文档流

​ ○ 相对定位会使元素提升一个层级

​ ○ 相对定位不会改变元素的性质,块还是块,内联还是内联

40、绝对定位

​ ● 当 position 属性值设置为absolute时,则开启了元素的绝对定位

​ ● 绝对定位:

​ ○ 开启绝对定位,会使元素脱离文档流

​ ○ 开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化

​ ○ 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会

​ 同时开启父元素的相对定位),如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位

​ ○ 绝对定位会使元素提升一个层级

​ ○ 绝对定位会改变元素的性质,内联元素变成块元素;块元素的宽度和高度默认都被内容撑开

41、固定定位

​ 当元素的position属性设置fixed时,则开启了元素的固定定位,固定定位也是一种绝对定位,它的大部分特点

​ 都和绝对定位一样,不同的是:

​ ● 固定定位永远都会相对于浏览器窗口进行定位

​ ● 固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动

​ ● IE6不支持固定定位

42、元素的层级(z-index)

如果定位元素的层级是一样的,而且多个元素之间存在覆盖现象,那么下边的元素会覆盖上边的,可以通过

​ z-index 属性来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越

高,越优先显示

对于没有开启定位的元素不能使用 z-index

​ 父元素的层级再高,也不会覆盖子元素

.box{
   	position: absolute;
    z-index: 100;
}

43、opacity

​ ● 设置元素的透明背景

​ ● opacity可以用来设置元素背景的透明,它需要一个 0-1 之间的值

​ 0 表示完全透明

​ 1 表示完全不透明

​ 0.5 表示半透明

​ ● opacity属性在 IE8 及以下的浏览器中不支持,IE8 及以下的浏览器需要使用如下属性代替:

​ alpha(opacity=透明度)

​ 透明度需要一个 0-100之间的值

​ 0 表示完全透明

​ 100 表示完全不透明

​ 50 半透明

​ 这种方式支持 IE6,但是这种效果在 IE Tester 中无法测试

.box{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

44、背景

​ ● background-color

​ 用来设置背景颜色

​ ● background-image

​ 用来设置背景图片

​ ○ 语法:background-image: url(图片相对路径)

​ ○ 如果背景图片大于元素,默认会显示图片的左上角

​ ○ 如果背景图片和元素一样大,则会将背景图片全部显示

​ ○ 如果背景图片小于元素大小,则会默认将背景图片平铺,以充满元素

​ ● 可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将作为背景图片的底色,一般情况下设置背景图

​ 片时都会同时指定一个背景颜色

​ ● background-repeat

​ 用来设置背景图片的重复方式,可选值:

​ repeat:默认值,背景图片会双向重复(平铺)

​ no-repeat:背景图片不会重复,有多大就显示多大

​ repeat-x:背景图片沿水平方向重复

​ repeat-y:背景图片沿垂直方向重复

​ ● background-position

​ 背景图片默认是贴着元素的左上角显示,通过 background-position可以调整背景图片在元素中的位置

​ 可选值:

​ 该属性可以使用 top、right、left、bottom、center 中的两个值来指定一个背景图片的位置

​ top left 左上

​ bottom right 右下

​ 如果只给出一个值,则第二个值默认是 center

​ 也可以直接指定两个偏移量:

​ 第一个值是水平偏移量

​ 如果指定的是一个正值,则图片会向右移动指定的像素

​ 如果指定的是一个负值,则图片会向左移动指定的像素

​ 第二个值是垂直偏移量

​ 如果指定的是一个正值,则图片会向下移动指定的像素

​ 如果指定的是一个负值,则图片会向上移动指定的像素

​ ● background-attachment

​ 用来设置背景图片是否随页面一起滚动,可选值:

​ scroll:默认值,背景图片随窗口滚动

​ fixed:背景图片会固定在某一位置,不随页面滚动

​ 当背景图片的 background-attachment 设置为 fixed 时,背景图片的定位永远相对于浏览器的窗口,即自己

​ 设置的 background-position 都是相对于浏览器来定位的,所以不随窗口滚动的图片,我们一般都是设置给

​ body,而不是设置给其他元素

.box{
    background-color: #bfa;
    background-image: url(img/1.png);
    background-repeat: no-repeat;
    /*background-position: center;*/
    background-position: 100px 100px;
    background-attachment: scroll;
}

45、背景简写属性

​ background

​ ● 通过该属性可以同时设置所有背景相关的样式

​ ● 没有顺序要求,谁在前谁在后都行,也没有数量要求,不写的样式就使用默认值

.box{
    background: #bfa url(img/1.png) cneter center no-repeat fixed;
}

46、表格

​ 在html中,使用table标签来创建一个表格

​ 在 table 标签中使用 tr 来表示表格中的一行,有几行就有几个tr

​ 在 tr 中需要使用 td 来创建一个单元格,有几个单元格就有几个td

<!-- border设置边框,width设置整个表格的宽度,align设置整个表格居中 -->
<table border="1" width="30%" align="center">
    <tr>
    	<td>A1</td>
        <td>A2</td>
        <!-- colspan用来横向合并单元格 -->
        <td colspan="1">A3</td>
        <!-- rowspan用来设置纵向的合并单元格 -->
        <td rowspan="2">A4</td>
    </tr>
    <tr>
    	<td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
    </tr>
    <tr>
    	<td>C1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
    </tr>
    <tr>
    	<td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
    </tr>
</table>

47、表格的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            width: 300px;
            margin: 0 auto;
            border: 1px solid black;
            /*
                table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离
            */
            border-spacing: 0px;
            /*
                border-collapse可以用来设置表格的边框合并,如果设置了边框合并,则
                border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
            background-color: #bfa;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <!--
                可以使用th标签来表示表头中的内容,它的用法和td一样,不同的是它会有
                一些默认效果
            -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
    </table>

</body>
</html>

48、长表格

​ 有一些情况下表格是非常长的,这是就需要将表格分为三个部分,表头、表格的主体、表格底部

​ 在 HTML 中为我们提供了三个标签:

​ thead 表头,thead中的内容,永远会显示在表格的头部

​ tbody 表格主体,tbody中的内容,永远都会显示在表格的中间

​ tfoot 表格底部,tfoot中的内容,永远都会显示在表格的底部

​ 这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写

​ 在这些标签中

​ 如果表格中没有写 tbody,浏览器会自动在表格中添加 tbody,并且将所有的 tr 都放在 tbody 中,所以注意

​ tr 并不是 table 的子元素,而是 tbody 的子元素,通过 table > tr 无法选中行,需要通过 tbody > tr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10.24</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>10.24</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

49、表单

​ ● 单选按钮

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked="checked" />女

​ ● 多选框

<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked"/>羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球

​ ● 下拉框

<select name="star">
    <option value="fbb">范冰冰</option>
    <option value="lxr">林心如</option>
    <option value="zbs" selected="selected">赵本山</option>
</select>

<!-- 如果select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表,所有的都会显示出来 -->
<select name="star" multiple="multiple">
    <option value="fbb">范冰冰</option>
    <option value="lxr">林心如</option>
    <option value="zbs" selected="selected">赵本山</option>
</select>

<!-- 在select中可以使用optgroup对选项进行分组,同一个optgroup中的选项是一组 -->
<select name="star">
    <optgroup label="女明星">
    	<option value="fbb">范冰冰</option>
    	<option value="lxr">林心如</option>
    </optgroup>
    <optgroup label="男明星">
    	<option value="ldh">刘德华</option>
        <option value="gfc">郭富城</option>
        <option value="zbs" selected="selected">赵本山</option>
    </optgroup>
</select>

 类似资料:

相关阅读

相关文章

相关问答