点击刷新
CSS
-层叠样式表
-网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到的只是网页的最上边一层
-总之，CSS用来设置网页中元素的样式
使用CSS来修改元素的样式
第一种方式（内联样式，行内样式）：在标签内部通过style属性来设置元素的样式（属性只能写在开始标签里） style是名值对结构
问题：使用内联样式，样式只能对当前的标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍，并且当样式发生变化时，我们必须要一个一个修改，非常不方便
所以开发时绝对不要使用内联样式（不方便复用），且内联样式属于结构与表现耦合，不方便后期维护
<p style="color:red;">张毅你妈死了~</p> 写在P标签里面
<p style=color:red;font-size:100px;>DRAVEN</p>
第二种方式（内部样式表）
将CSS样式编写到head中的style标签里，
然后通过CSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
内部样式更加方便对样式进行复用
将样式写到外部的CSS文件中，可以使用浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验
存在的问题：内部样式值只能对一个网页起作用，它里边的样式不能跨页面进行复用
<head>
<style>
p{
color:yellow;
font-size: 60px;
}
</style>
</head>
第三种方式（外部样式表）（开发用）
可以将CSS样式表编写到一个外部的CSS文件中，创建新文件style.css，然后通过link标签来引入css文件。
这个link也是写在head里面。这样外部文件中的CSS样式表将会应用到当前页面中
<link rel="stylesheet" href="style.css">
head里面的style中的内容不属于html， 遵循的是CSS的语法规范。（style标签里面是一个特殊的区域）
这样可以完全使结构和表现分离，可以是样式表可以在不同的页面中使用，最大限度地使样式可以复用
CSS中的注释： /*...................*/ 必须编写在style标签中，或者是css文件中
CSS基本语法：
选择器 和 声明块 比如p{}
选择器：通过选择器可以选中页面中的指定元素，并且将声明块中的样式应用到选择器对应的元素上
比如p的作用就是选中页面中的所有p元素
声明块（跟在选择器的后面，使用一对{}括起来）：通过声明块来指定要为元素设置的样式
声明块中实际上就是一组一组的名值对结构
在一个声明块中可以写多个声明
声明是一个名值对结构（一个样式名对应一个样式值，名和值之间以：连接，以；结尾，最后一个；可以省略 ）
Hbuilder
ctrl+D：删除一行
ctrl+/：提示
ctrl+Enter：光标来到下一行
常用选择器
作用：根据标签名来选中指定的元素
语法：标签名（）
例子：p() h1() div()
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值()
例子：#box() #red()
<style>
#someone{
color: red;
}
</style>
<body>
<p>11111</p>
<p id="someone">22222</p>
<p>33333</p>
</body>
类选择器
作用：根据元素的class属性值选中一族元素
语法：.class属性值
class是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组
<head>
<style>
.blue{
color: blue;
}
</style>
</head>
<body>
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
#id（不可重复）
.class（主要用class），可以同时为一个元素指定多个class属性
通配选择器
作用：选中页面中的所有元素
语法：*
*{
color:blue;
}
块元素和内联元素
div就是一个块元素（独占一行）
div这个标签没有任何语义，就是一个纯粹的块元素，并且不会为它里边的元素设置任何默认样式
div元素主要用来对网页布局
内联元素是针对块元素而言的
<span>我是一个span</span>
span是一个内联元素（行内元素），没有任何语义，span标签专门用来选中文字，为文字设置样式
所谓内联元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素有：a img iframe span
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式
一般情况下只使用块元素去包含内联元素
a元素可以包含任意元素
p元素不可以包含任何其他的块元素
24
为页面中所有的p元素设置一个字体颜色为红色
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{}
举例：P{
color:red;
}
h1{
color:blue;
}
id选择器
通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
举例：
#p1{
font-size:20px;
}
类选择器
要分组处理元素时，可以为元素设置class属性
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，是一组元素
语法：.class属性值{}
举例：
.p2{
color:red;
}
选择器分组：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
通配选择器
- 可以用来选中页面中的所有元素
语法：*{}
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1,选择器2,选择器N{}
对于id选择器来说，不建议使用复合选择器
元素之间的关系（还有祖先元素和后代元素）
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
为div中的span元素设置一个颜色为绿色
后代元素选择器（用得多）
作用：选中指定元素的制定后代元素
语法：祖先元素 后代元素{}
为div的子元素span设置一个背景颜色为黄色
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
27
伪类选择器
伪类：可以让你根据访问者与该连接的交互方式，将链接设置成不同的状态
正常链接：-a:link
访问过的连接：-a:visited(只能定义字体颜色)
鼠标滑过的链接：-a:hover
正在点击的链接：-a:active
获取焦点：- :focus
指定元素前：- :before
指定元素后：- :after
选中的元素：- ::selection
伪元素选择器
使用伪元素来表示元素中的一些特殊位置
首字母 :first-letter
首行 :first-line
为p中的第一个字符来设置一个特殊的样式
:before表示元素最前边的部分
一般before都需要结合content这个样式一起使用
通过content可以向before或after的位置添加一些内容
:after表示元素的最后边的部分
title属性：可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性将会作为提示文字显示
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值以包含指定内容的元素
为所有具有title属性的p元素，设置一个背景颜色为黄色
p[title]{
background-color: yellow;
}
其他子元素选择器
:first-child
选择第一个子标签
:last-child
选择最后一个子标签
:nth-child （比如tr:nth-child(1)）
选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
选择指定类型的子元素：
body > p:first-child{
background-color:yellow;
}
或者
p:nth-child(填你要改的数字){
...
}
括号内填even表示偶数
填odd表示奇数
first-of-type
last-of-type
nth-of-type
和first-child非常相似
child是所有，type是同类型
<p>我是一个P</p>
<span>我是一个span</span>
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
span ~ p{
background-color: yellow;
}
32 否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
举例：
p:not(.hello){
background-color:red;
}
...
...
<p class="hello">我是一个p标签</p>
CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承可以将一些基本样式设置给祖先元素，但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承
33.选择器的优先级
.p1{
background-color:yellow;
}
p{
background-color:red;
}
#p2{
background-color:blue;
}
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，样式之间产生了冲突，最终会采用哪个样式，由选择器的优先级决定
优先级规则：
内联样式：优先级1000
id选择器：优先级100
类和伪类：优先级10
元素选择器：优先级1
通配*选择器：优先级0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，但是选择器优先级计算不会超过他的最大的数量级
如果选择器的优先级一样，则优先选择靠后的样式
并集选择器的优先级是单独计算
div, p, #p1, .hello{}
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先与所有的样式显示，但是在开发中尽量避免使用!important
涉及到a的伪类一共有4个 （伪类：表示特殊状态）
* :link
* :visited
* :hover //鼠标移入
* :active //正被点击
而这四个选择器的优先级是一样的，写伪类的顺序就是LVHA
36.文本标签
<em>和<strong> //这两个标签都表示一个强调的内容
em标签用于表示一段内容中的着重点
strong标签用于表示一个内容的重要性
通常em显示为斜体，strong显示为粗体
<i>和<b>
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者斜体，就可以使用b和i标签
<small>...</small>
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容，比如合同中的小子，网站的版权声明都可以放到small
<cite>...</cite>
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容
比如：书名 歌名 话剧名 电影名
<q>...</q>
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
<blockquote></blockquote>
blockquote标签表示一个长引用（块级引用）
使用sup标签来设置一个上标
<sup>...</sup>
使用sub标签来设置一个下标
<sub>...</sub>
<del>...</del>
使用del标签来表示一个删除的内容
<ins>...</ins>
ins中的内容，会自动添加下划线
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code是专门用来表示代码
我们一般结合pre和code来表示一段代码
<pre>
<code>
...
</code>
</pre>
37.HTML网页中一共有3种列表
1.无序列表
2.有序列表
3.定义列表
无序列表 （ul和li都是块元素）
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项
一个li就是一个列表项
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号一般都不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
有序列表和无序列表类似，只不过它使用ol来代替ul
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<ol>
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字
a/A 采用大小写或大写字母作为序号
i/A 采用小写或大写的罗马数字作为序号
ol也是块元素
<ol type="I">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<ol>
定义列表：用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt：被定义的内容
dd：对定义内容的描述
文本格式化
em
- em和百分比类似，它是相对于当前元素的字体大小来计算的
- 1em = 1font-size
- 使用em时，当字体大小发生改变时，em也会随之改变
- 当设置字体相关的样式时，经常会使用em
长度单位 像素 px
百分比 %
也可以将单位设置为一个百分比的格式
这样浏览器将会根据其父元素的样式来计算该值
使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
在外面创建一个自适应的页面时，经常使用百分比作为单位
可以使用RGB值和十六进制的rgb值来表示颜色
十六进制
语法：#红色绿色蓝色 00 - ff
字体样式（浏览器中默认文字大小为16px）
font-size设置的实际上是格的高度，并不是文字本身的大小
通过font-family可以指定文字的字体
当采用某种字体时，如果浏览器支持则使用该字体
如果字体不支持，则使用默认
可以同时指定多个字体,使用,隔开
font-family：arial,微软雅黑;
字体分类（5大类）
serif（衬线字体）
sanf-serif（非衬线字体）
monospace（等宽字体）
cursive（草书字体）
fantasy（虚幻字体）
44.字体样式
font-style可以用来设置文字的斜体
- 可选值：
normal：默认值，文字正常显示
itallic：文字会以斜体显示
font-weight可以用来设置文本的加粗效果
- 可选值：normal，默认值，文字正常显示
bold，文字加粗显示
font-variant可以用来设置小型大写字母
- 可选值：
normal，默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些
/*在css中还为我们提供了一个样式叫font
使用该样式可以同时设置字体相关的所有样式
可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，可写可不写
但是字体样式在最后，大小倒数第二。*/
45 行间距
设置行间距 - 通过修改 行高 的方式
使用line-height来设置行高（线与线之间的距离就是行高）
行间距 = 行高(line-height:) - 字高（font-size:)
通过设置line-height可以间接的设置行高：
可以接收的值：
1.直接就收一个大小
2.可以指定一个百分数，则会相对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
对于单行文本，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
在字体中也可以指定行高
font: 30px/30px "微软雅黑"; //此处行高为30px
如果不指定，系统会自动设置为默认值
text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-transform: capitalize;
文本的修饰
text-decoration属性，用来给文本添加各种修饰，通过它可以为文本的上下中间添加线条
可选值：
none:默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
letter-spacing可以指定字符间距
/*letter-spacing:100px*/
word-spacing可以设置单词之间的距离
/*设置词与词之间空格的大小*/
text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right，文本靠右对齐
center，文本居中对齐
justicy，两端对齐（通过调整文本之间的空格大小，达到一个两端对齐的目的）
text-indent用来设置首行缩进
当给他指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素（通过这种方式可以将一些不想显示的文字隐藏起来）
/*text-incent: 2em;*/
47.盒子模型
CSS处理网页时认为每个元素都包含在一个不可见的盒子里
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局
盒子的组成
使用width、height来设置盒子内容区的宽度
要为一个元素设置边框，必须指定3个样式：
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小
盒子可见框的大小由内容区，内边距和边框共同决定
/*设置边框的宽度*/
border-width:10px;
border-color:red;
border-style:solid;（实线）
使用border-width可以分别指定4个边框的宽度(上右下左）：
border-width:10px 20px 30px 40px;
如果指定3个值，则会分别设置给 上 左右 下
2个---上下 左右
也可以这样改上下左右：
border-top-width
border-bottom-width
border-left-width
border-right-width
设置边框的颜色：
border-color(与width同理)
设置边框的样式
border-style(与width同理)
可选值：
none:没有边框
solid:实线
dotted:点状边框
dashed:虚线
double:双线
50.盒模型-内边距（padding）
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
有4个方向的内边距，可以通过
padding-top
padding-bottom
padding-left
padding-right
来设置4个方向的内边距
内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
盒子的大小由内容区、内边距和边框共同决定
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right
盒子可见框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom
设置上内边距
padding-top:100px;
设置右内边距
padding-right:100px;
padding-bottom:100px;
padding-left:100px;
使用padding可以同时设置四个边框的样式，规则和border-width一致
padding:100px;
padding:100px 200px;
padding:100px 200px 300px;
padding:100px 200px 300px 400px
51.盒子模型-外边距
外边距：盒子与盒子之间的距离（不会影响可见框的大小，而是会影响到盒子的位置）
盒子有4个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
设置box1的上外边距，盒子上边框和其他的盒子的距离(其他方向的外边距同理)
margin-top:100px
同时，外边距也可以是一个负值，设置好则向相反的地方移动
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
将left和right都设置为auto，则会将两侧的外边距设置为相同的值
就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距
margin:0 auto;
52.垂直外边距的重叠
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距回去最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
53.浏览器默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果
所以为很多元素都设置了一些默认的margin和padding
而它的这些默认样式，正常情况下我们是不需要使用的
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding通通去掉
清除浏览器的默认样式
*{
margin:0;
padding:0;
}
54.内联元素的盒子模型
内联元素不能设置width和height，但是可以设置水平方向的内边距
为元素设置边框
border: 100px blue solid;
内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
水平外边距
内联元素支持水平方向的外边距
内联元素不支持垂直外边距
内联元素不支持设置width 和 height
水平方向的外边距不会重叠，而是求和
55.display（规定元素应该生成的框的类型）
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block：可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
none：不显示元素，并且元素不会在页面中继续占有位置
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
display: block;
width:500px;
height:500px;
visibility
- 用来设置元素的隐藏和显示的状态
- 可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏，不显示
使用visibility:hidden;隐藏的元素虽然不会在页面中显示，但它的位置会保持
56.overflow
子元素默认是存在于父元素的内容区中
理论上将子元素最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出内容在父元素外边显示
通过overflow可以设置父元素如何处理溢出内容：
可选值：
- visible,默认值，不会对溢出内容做处理，元素会在父元素意外的位置显示
- hidden,溢出的内容，会被修剪，不会显示
- scroll,会为父元素添加滚动条，通过拖动滚动条来查看完整内容
该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
- auto,会根据需求自动添加滚动条
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
57.文档流
文档流处在网页的最底层，它表示的是一个页面中的位置
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列（默认垂直排列）
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则会换到下一行，继续自左向右
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
58.浮动
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float使元素浮动，从而脱离文档流
可选值：
none,默认值，元素默认在文档流中排列
left,元素会立即脱离文档流，向页面的左侧浮动
right,元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），
元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多一边齐
float:left
float:right
float:none
59.浮动2
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围
所以我们可以通过浮动来设置文字环绕图片的效果
在文档流中，元素的宽度默认占父元素的全部
当元素设置浮动以后，会完全脱离文档流
块元素脱离文档流以后，高度和宽度都被内容撑开
内联元素不能设置宽高
开启span的浮动，内联元素脱离文档流以后会变成块元素
60.简单布局
61.高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的
也就是子元素多高，父元素就多高
但是当为子元素设置浮动以后，子元素会完全脱离文档流
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
开发中要避免出现高度塌陷的问题
62.解决高度塌陷问题
页面中的元素都有一个隐含属性叫做BFC，默认关闭
开启BFC后：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启BFC：
1.设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
- 可以解决问题，但是会导致宽度丢失，不推荐这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
***所以解决高度塌陷最简单的方式：给父元素添加overflow:hidden;
IE6可以通过开启hasLayout：直接将元素的zoom设置为1即可
zoom表示放大的意思，后面跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom:1;
zoom这个样式，只在IE中支持，其他浏览器都不支持
zoom:1;
overflow:hidden;
63.Navigator
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
/* 清除默认样式 */
*{
margin:0;
padding:0;
}
/* 设置ul */
.nav{
/* 去除项目符号 */
list-style: none;
/* 为ul设置一个背景颜色 */
background-color: #6495ED;
/* 设置一个宽度 */
width: 1000px;
/* 设置元素居中，还要靠下 */
margin: 50px auto;
/* 解决高度塌陷 */
overflow: hidden;
}
/* 设置li */
.nav li{
/* 设置li向左浮动 */
float: left;
width:250px;
}
.nav a{
display: block;
width:100%;
/*设置文字居中*/
text-align:center;
/*设置一个上下内边距*/
padding: 5px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体颜色*/
color: white;
/*设置加粗*/
font-weight:bold;
/*内联元素不能设置宽度，要先将内联元素转换为块元素，再设置宽度
因为a在li里，父元素会被子元素撑开，所以给a转换为款元素，再设置指定数值的宽度*/
}
/*设置a的鼠标移入的效果*/
.nav a:hover{
background-color: #CC0000;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
64.解决高度坍塌最终方案
我们希望清除掉其它元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
clear可以用来清除其它浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
清除box1浮动对box2的影响：
清除浮动以后，元素会回到浮动之前的位置
解决高度塌陷方案：
在高度塌陷的父元素的最后，添加一个空白的div
由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
基本没有副作用，但是会在页面中添加多余的结构
方案2：
/*可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动
这样做和添加一个div的原理一样，可以达到一个相同的效果
而且不会在页面中添加多余的div，这是我们最推荐使用的方式
通过after伪类，选中box1的后边
**********最推荐***********
.box1:after{
/*添加一个内容*/
content:"hello";
/*转换为一个块元素*/
display:block;
/*清除两侧的浮动*/
clear:both;
}
66.开班信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
/*统一页面中的字体*/
body{
font:12px/1 宋体;
}
/*设置outer的大小*/
.outer{
width:300px;
height:473px;
background-color: #bfa;
/*设置outer居中效果，上下0，左右auto*/
margin: 50px auto;
}
/*设置title的边框*/
.title{
border-top:2px #019e8b solid ;
/*设置盒子的高度*/
height:36px;
/*设置背景颜色*/
background-color:#f5f5f5;
/*设置title的行高*/
line-height:36px;
/*设置title的内边距*/
padding: 0px 22px 0px 16px;
/*设置title中的超链接*/
}
.title a{
float: right;
color: red;
}
/*设置h3*/
.title h3{
font: 16px/36px "微软雅黑";
}
/*设置内容，先不指定高度，由后面填入的元素撑开*/
.content{
border: 1px solid #deddd9;
padding: 0 28px 0 20px;
}
/*设置内容中的超链接*/
.content a{
color:black;
/*去除超链接的下划线*/
text-decoration: none;
font-size: 12px;
}
.content a:hover{
color: red;
}
.content h3{
margin-top: 14px;
margin-bottom: 16px;
}
/*设置ul的样式*/
ul{
/*去除项目符号*/
list-style: none;
/*为ul设置下边框*/
border-bottom: 1px dashed;
}
/*取消最后一个ul的边框*/
.content .no-border{
border: none;
}
/*设置内容中的红色字体*/
.red{
color:red;
font-weight: bold;
}
/*设置内容中的li*/
.content li{
margin-bottom: 8px;
}
.right{
float: right;
}
</style>
</head>
<body>
<!-- 创建一个外层div，容纳整个内容 -->
<div class="outer">
<!-- 大的div内嵌2个小的div -->
<!-- 开班信息的头部 -->
<div class="title">
<a href="#">16年面授开班计划</a>
<h3>近期开班</h3>
</div>
<div class="content">
<h3><a href="#">JavaEE全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
</ul>
<h3><a href="#">Android全程就业班</a></h3>
<ul>
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
</ul>
<h3><a href="#">前端就业班</a></h3>
<ul class="no-border">
<li>
<a class="right" href="#"><span class="red">预约报名</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span class="red">无座，名额爆满</span></a>
<a href="#">开班时间：<span class="red">2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
<li>
<a class="right" href="#"><span>开班盛况</span></a>
<a href="#">开班时间：<span>2016-04-27</span></a>
</li>
</ul>
</div>
</div>
</body>
</html>
69.相对定位
快捷键：div.box$*3
可直接生成3个div，class名分别为box1,box2,box3
定位：
- 将指定的元素摆放到页面的任意位置
通过定位可以任意摆放元素
- 通过position属性来设置元素的定位
- 可选值：
static：默认值：元素未开启定位
relative：开启元素相对定位
absolute：开启元素绝对定位
fixed：开启元素固定定位（也是绝对定位的一种）
当元素的position属性设置为relative时，则开启了元素的相对定位，position属性值是一个非static的值
1.当开启了元素的相对定位，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质（块、内联）
可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量（其它3个同理）
position:relative;
绝对定位
1.开启绝对定位会脱离文档流
2.开启绝对定位以后，如果不设置偏移量，元素的位置不会变
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的
（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质
内联元素变成块元素
块元素的宽度和高度默认都被内容撑开
71.固定定位（position:fixed;）
固定定位是绝对定位的一种
不同点：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
72.元素的层级
如果定位元素的层级是一样的，则下边的元素会盖住上面的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素(比如static)不能使用z-index
父元素的层级再高，也不会盖住子元素
z-index:1/2/3;
73.opacity
opacity可以用来设置元素背景的透明
需要0-1之间的值
0表示完全透明，1表示完全不透明
74.背景1
使用background-image来设置背景图片
语法：background-image:url(相对路径);
如果背景图片大于元素，默认会显示图片的左上角
如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将作为背景图片的底色，一般设置背景图片时都会同时指定一个背景颜色
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat，背景图片不会重复，有多大就显示多大
repeat-x，背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
75.导航条
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.box1{
width:990px;
height: 32px;
background-color: #bfa;
margin: 50px auto;
background-image: url(js/bdd8727a707ca6c137815f993f05bbb.png);
/*图片截取导航条中的1像素宽度的竖条*/
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
76.
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用top right left bottom center中的2个值（1个也行）
来指定一个背景图片的位置
top left:左上
bottom right:右下
如果只给出一个值，则第二个值默认是center
background-position:center;
也可以直接指定两个偏移量，第一个值是水平偏移量，第二个值是垂直偏移量
background-position: 100px 200px;
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll:默认值，背景图像会随着页面其余部分的滚动而移动
fixed:背景图片的定位永远相对于浏览器的窗口
不随窗口滚动的图片，一般都是设置给body，而不设置给其他元素
77.lyy一键去世
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.btn:link{
display: block;
width:175px;
height:168px;
background-image: url(js/1.png);
background-repeat: no-repeat;
}
.btn:hover{
background-image:url(js/3.jpg);
}
.btn:active{
background-image:url(js/2.jpg);
}
</style>
</head>
<body>
<a class="btn" href="#"></a>
</body>
</html>
做完功能以后，在第一次切换图片时，会发现图片有一个非常快的闪烁
这个闪烁会造成一次不佳的用户体验
产生问题的原因：
背景图片时以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独地发送一次请求
但是我们外部资源并不是同时加载，浏览器会在资源被使用采取加载资源
这个练习一开始只会加载link，，，hover和active的状态没有马上触发
当hover被触发时，浏览器采取加载hover.jpg
当active...
由于加载图片需要一定的时间，所以在加载和显示过程中会有一段时间，背景图片无法显示，导致出现闪烁的情况
为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁了
然后通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
优点：
1.将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高用户体验
2.将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
78.background
通过background属性可以同时设置所有背景相关的样式
没有顺序、数量要求，不写则使用默认值
background: #bfa url(img/1.png) center center no-repeat fixed;
80.表格
使用table来创建表格（table是块元素）
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有一些默认效果
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
81.表格的样式
表格居中
table{
margin: 0 auto;
}
table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离
通过border-collapse可以用来设置表格的边框合并
border-spacing:0px;
border-collapse: collapse;
//鼠标移入变色
tr:hover{
background-color: #ff0;
}
//设置隔行变色
tr:nth-child(even){
background-color: #bfa;
}
82.长表格
长表格分为：表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头
tbody 表格主体
tfoot 表格底部
这3个标签的作用，用来区分表格的不同的部分，它们都是table的子标签
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中行 需要通过tbody > tr
84.
子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
（空的div无法隔开父子元素相邻的外边距）
（空的table标签可可可可可可可可可可以隔离父子元素的外边距，阻止外边距的重叠）
display:table 可以将一个元素设置为表格显示
经过修改后的clearfix是一个多功能的
可以同时解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
85.
表单的作用就是用来将用户信息提交给服务器的
使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
<form action="target.html">
//使用form创建的仅仅是一个空白的表单
//我们还需要向form中添加不同的表单项
/*使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性---name表示提交内容的名字*/
/*用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示*/
用户名<input type="text" name="username"/> <br /><br />
/*密码框
- 使用input创建一个密码框，它的type属性值时password*/
密码<input type="password" name="password" /> <br /><br />
/*单选按钮
- 使用input来创建一个单选按钮，它的type属性使用radio、 - 单选按钮通过name属性进行分组，name属性相同的是一组
- 像这一种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项
则可以再希望选中的项中添加checked="checked"属性
*/
性别<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
/*提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮，它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字*/
/*多选框
- 使用input创建一个多选框，它的type属性使用checkbox
*/
爱好 <input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>羽毛球
<input type="checkbox" name="hobby"/>乒乓球
<input type="submit" />
/*
下拉列表
- 使用select来创建一个下拉列表
下拉列表的name属性需要指定给select，而value属性需要指定给option
可以通过在option中添加selected="selected"来将选项设置为默认选中
当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
*/
你喜欢的明星
<select name="star">
/*在select中可以使用optgroup对选项进行分组
同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字
*/
/*在下拉列表中使用option标签来创建一个一个列表项*/
<optgroup>
<option value="dqwj">大桥未久<option>
<option value="xcyc">小仓由菜<option>
</optgroup>
<optgroup>
<option value="qbyc">桥本有菜<option>
<option value="ydgzy">宇都宫紫苑<option>
</optgroup>
</select>
</form>
87.表单项2
使用textarea创建一个文本域
<textarea name="1"></textarea>
<input type="reset" />可以创建一个重置按钮
点击重置按钮以后表单中内容将会恢复为默认值
<input type=button value="按钮" />可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击
/*除了使用input，也可以使用button标签来创建按钮*/
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
/*在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签，该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值*/
/*在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中*/
/*
在fieldset可以使用legend子标签，来指定组名
*/
<legend>用户信息</legend>
© 著作权归作者所有
举报
发表评论
0/200
