一、CSS简介
1.1 简介
网页分为三个部分:结构(HTML)、表现(CSS)、行为(JavaScript)
CSS:层叠样式表
网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层设置样式
而最终我们能看到的只是网页的最上边一层
1.2 CSS编写的位置
通过CSS来修改元素的样式
第一种方式:在标签内部通过style属性来设置元素的样式(内联样式/行内样式)
<p style="color:red;font: size 30px;">少小离家老大回,乡音无改鬓毛衰</p>
问题:使用内联样式,样式只能对一个标签生效,如果希望影响到多个元素,必须在每一个元素中都复制一遍
第二种方式:将样式编写到head中的style标签里(内部样式表)
内联样式表更加方便对样式进行复用
<style>
p{
color:yellow;
font-size:50px;
}
</style>
问题:内部样式表只能对一个网页起作用,它里边的样式不能跨页面进行复用
第三种方式:可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件(外部样式表)
p{
color:green;
font-size:100px;
}
<link rel="stylesheet" href="./01.css"></link>
外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用
将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速率,提高用户的体验
二、CSS选择器
2.1 CSS基本语法
<style></style>标签里的区域都属于CSS部分,遵守CSS语法规范,比如HTML的注释<!-- -->在CSS里会被读取,而不会认为是注释
CSS注释:/*里面是CSS的注释*/
CSS基本语法分为两大块:选择器 声明块
选择器:通过选择器可以选中页面中的指定元素,比如p的作用就是选中页面中所有的p元素
声明块:通过声明块来指定为元素设置的样式
声明块由一个一个的声明组成
声明是一个名值对结构,一个样式名对应一个样式值,名和值之间以:连接,以;结尾
2.2 常用选择器
2.2.1 元素选择器
作用:根据标签名来选中指定的元素
语法:标签名{}
例子:p{}、 h1{}、 div{}
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
</body>
2.2.2 id选择器
作用:根据元素的id属性值选中一个元素
语法:#id属性值{}
例子:#box{}、#red{}
#green{
color:green;
}
<p id="green">儿童相见不相识</p>
2.2.3 类选择器
class是一个标签的属性,它和id类似,不同的是class可以重复使用
作用:根据元素的class属性选中一组元素
语法:.class属性值
多个类选择器用空格隔开
.blue{
color:blue;
}
<p class="blue abc">少小离家老大回</p>
<p class="blue">笑问客从何处来</p>
2.2.4 通配选择器
作用:选中页面中的所有元素
语法:*{}
*{
color:purple;
}
2.3 复合选择器
2.3.1 交集选择器
交集选择器
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器3…选择器n{}
注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头
<style>
/* 将class为red的元素设置为红色(字体) */
.red{
color:red;
}
/* 将class为red的div字体大小设置为30px */
div.red{
font-size:30px;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
</body>
2.3.2 并集选择器
并集选择器
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,...,选择器n{}
h1,span{
color:green;
}
2.4 关系选择器
父元素:
直接包含子元素的元素叫做父元素
子元素:
直接被父元素包含的元素叫做子元素
祖先元素:
直接或间接包含后代元素的元素叫做祖先元素
一个元素的父元素也是它的祖先元素
后代元素:
直接或间接被祖先元素包含的元素叫做后代元素
兄弟元素:
拥有相同父元素的元素是兄弟元素
2.4节演示用到的html内容:
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
</div>
2.4.1 子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
<style>
/* 为div的子元素span设置一个字体颜色红色 */
div>span{
color:red;
}
</style>
div > p >span{
color:purple;
}
2.4.2 后代元素选择器
作用:选中指定元素内的指定后代元素
语法:祖先 后代
div span{
color:green;
}
2.4.3 兄弟元素选择器
作用:选择下一个兄弟(自身不会被选中)
语法:前一个 + 下一个
p+span{
color:blue;
}
作用:选择下面所有的兄弟
语法:兄~弟
p~span{
color:green;
}
2.5 属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性值*=属性值] 选择属性值中含有某值的元素的元素
<style>
p[title]{
color:red;
}
p[title=csldjkf]{
color:green;
}
p[title$=abc]{
color:purple;
}
p[title*=abc]{
color:burlywood;
}
</style>
2.6 伪类选择器
伪类:不存在的类,特殊的类
伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素……
伪类一般都是:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素,n的范围从1到正无穷
特殊值:
n 第n个,n的范围1到正无穷
2n或even,表示选中偶数位的元素
2n+1或odd,表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不同点是它们是在同类型元素中进行排序
:not() 否定伪类
将符合条件的元素从选择器中去除
<style>
ul > li:first-child{
color:red;
}
ul > li:nth-child(2n){
color:purple;
}
</style>
</head>
<body>
<ul>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
否定伪类:not()
<style>
ul>li:not(:nth-child(3)){
color:red;
}
</style>
2.7 超链接的伪类
链接状态:
1.没有访问过的链接
2.访问过的链接
2.7.1 :link
:link表示没访问过的链接(正常的链接)
a:link{
color:red;
}
2.7.2 :visited
:visited表示访问过的链接
由于隐私保护的原因,所以visited这个伪类只能修改链接的颜色
a:visited{
color:green;
}
2.7.3 :hover
:hover 表示鼠标移入的状态
a:hover{
color:aqua;
font-size:40px;
}
2.7.4 :active
:active 表示鼠标点击
a:active{
font-size: 30px;
color:orange;
}
2.8 伪元素选择器
伪元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置)
伪元素使用 :: 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before和::after必须结合content属性来使用
::before 表示元素的开始位置
::after 表示元素的最后
<style>
p::first-letter{
font-size:30px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: green;
}
</style>
::before和::after
p::before{
content:'sfsadfc';
color:blue;
}
p::after{
content: 'xfxdfdersfer';
color: red;
}
三、样式
3.1 继承
样式的继承:我们为一个元素设置的样式同时也会应用到它的后代元素上
集成是发生在祖先后代之间的
继承的设计是为了方便我们的开发,李永杰成我们可以将一些通用的样式设置到共同的祖先元素上,这样只需要设置一次即可让所有的元素都具有该样式
<style>
p{
color:red;
}
div{
color:green;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素的span</span>
</p>
<div>
我是div
<span>我是div的span
<em>我是span的em</em>
</span>
</div>
</body>
注意:不是所有的样式都会被继承
比如:背景相关的、布局相关的等这些样式都不会被继承
3.2 选择器的权重
样式的冲突:
当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突
发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重:
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示
for instance,div#box{}优先级高于#box{}
分组选择器优先级单独计算
选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
如果优先级计算后相同,此时则优先使用靠下的样式
可以在一个样式的后边添加 !important ,则此时该样式会获得最高的优先级,甚至超过内联样式
注意:在开发中!important一定要慎用
<style>
div{
font-size: 30px;
color:green !important;
}
*{
color:blue;
}
</style>
</head>
<body>
<div style="color:chocolate;">
我是一个div
<span>我是div的span</span>
</div>
</body>
3.3 像素和百分比
长度单位:
像素
- 屏幕(显示器)实际上是有一个一个的小点点构成的
- 不同屏幕的像素大小是不同的,像素越小的屏幕现实的效果越清晰
- 所以不同的200px在不同的设备上显示效果不一样
<style>
.box{
width:200px;
height:200px;
background-color: purple;
}
</style>
百分比
- 可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
<style>
.box1{
width:500px;
height:200px;
background-color: purple;
}
.box2{
width:50%;
height: 50%;
background-color: red;
}
</style>
3.4 em和rem
em
- em是相对于元素的字体大小来计算的
- 1em=1 font-size
- em会根据字体大小的改变而改变
.box3{
font-size:50px;
width: 10em;
height: 10em;
background-color: green;
}
rem
- rem是相对于根元素的字体大小(html的font-size)来计算的
.box3{
width: 10rem;
height: 10rem;
background-color: green;
}
3.5 RGB值
颜色单位:
在CSS中可以直接使用颜色名来设置各种颜色
比如red/orange/yellow/blue/green...
RGB值:
RGB通过三种颜色的不同浓度来调配出不同的颜色
R red/G green/B blue
每一种颜色的范围都在0~255(0%~100%)之间
语法:RGB()
.box{
font-size:1px;
width:100em;
height:100em;
background-color: rgb(0, 255, 0);
}
RGBA值:
- 就是在rgb的基础上增加了一个a表示不透明度
- 需要四个值,前三个和rgb一样,第四个表示不透明度
- 1表示完全不透明,.5表示半透明,0表示完全透明
.box{
font-size:1px;
width:100em;
height:100em;
background-color: rgba(0, 255, 0,0.5);
}
十六进制的RGB值:
- 语法:#红色绿色蓝色
- 颜色浓度通过00--fff
- 如果颜色两位两位重复,可以进行简写
- 比如#aabbcc ===> #abc
.box{
font-size:1px;
width:100em;
height:100em;
background-color: #ff0000;
}
3.6 HSL值
HSL:
H 色相(0~360)
S 饱和度(0%~100%)
L 亮度(0%~100%)
四、布局
4.1 文档流
文档流(normal flow)
- 网页是一个多层的结构,一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户只能看到最顶上一层
- 这些层中,最底下的一层称为文档流,文档流是网页的基础
我们所创建的元素,默认都是在文档流中进行排列的
- 对我们来说,元素主要有两个状态
- 在文档流中
- 不在文档流中(脱离文档流)
- 元素在文档流中有什么特点:
- 块元素
- 块元素会在页面中独占一行
- 默认宽度是父元素的全部(会把父元素撑满)
- 默认高度是被内容(子元素)撑开
- 行内元素
- 行内元素不会独占页面的一行,只占自身的大小
- 行内元素在页面中从左向右水平排列
如果一行之中不能哦让那所有的行内元素,则元素会换到第二行继续自 左向右排列(和书写习惯一致)
- 行内元素的默认宽度和高度都是被内容撑开
4.2 盒模型
盒模型,即盒子模型、框模型
- CSS将页面中的所有元素都设置为一个矩形的盒子
- 将元素设置为矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
- 每一个盒子都由以下几个部分组成:
- 内容区(content)
- 元素中的所有子元素和文本内容都在内容区中排列
- 内容区的大小由width和height两个属性来设置
- width:设置内容区的宽度
- height:设置内容区的高度
- 边框(border)
- 边框属于盒子边缘部分,边框里边属于盒子内部,出了边框都是盒子的外部
- 要设置边框,至少需要设置三个样式:
边框的宽度:border-width
border-width不写的话,会有一个默认值,3px
border-width可以用来指定四个方向的边框宽度
border-top-width/border-bottom-width/border-left-width/border-right-width
四个值分别为:上、右、下、左
三个值:上、左右、下
两个值:上下、左右
一个值:上下左右
边框的颜色:border-coor
border-color用来指定边框的颜色,同样可以分别指定四个边的边框,规则和border-width一样
border-color也可以省略不写,如果省略了则自动使用color的颜色值
边框的样式:border-style
border-style指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
- 边框的大小会影响整个盒子的大小
- 内边距(padding)
内容区和边框之间的距离是内边距
一共有四个方向的内边距:
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
padding内边距的简写属性,可以同时指定四个方向的内边距,规则和border-width一样
一共盒子的可见框大小,由内容区、内边距和边框共同决定,所以在计算盒子大小时,需要将这三个区域加到一起计算
- 外边距(margin)
外边距不会影响盒子的可见框的大小
但是外边距会影响盒子的位置
一共有四个方向的外边距:
margin-top/margin-right/margin-bottom/margin-left
设置一个上外边距,若为正值,元素会向下移动
设置一个左外边距,若为正值,元素会向右移动
元素在页面中是按照自左向右排序的,所以默认情况下如果我们设置的是左和上外边距,则会移动元素自身;而设置下和右外边距会移动其他元素
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
color:green;
padding-top:100px;
border-style:solid dotted dashed double;
margin-bottom:100px;
}
.inner{
width:100%;
height:100%;
background-color: yellow;
}
.box2{
width:200px;
height:200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
<div class="box2"></div>
</body>
4.3 盒子模型--水平方向的布局
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定:
margin-left;
border-left;
padding-left;
width;
padding-right;
border-right;
margin-right;
一个元素在其父元素中,水平布局必须要满足以下等式:
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度(必须满足)
以上七个值,没有设置即默认为0
- 以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整
- 调整的情况:
如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right的值使得等式满足
如果这七个值中有三个值可以设置为auto
width/margin-left/margin-right
如果某个值为auto,则会自动调整那个为auto的值以使得等式成立
如果将一个宽度和一个外边距都设置为auto,则宽度会调整为最大,设置为auto的外边距会自动为零
如果将三个值都设置为auto,则外边距都是0,宽度调整到最大
如果将两个外边距都设置为auto,宽度为固定值,则会将外边距设置为相同的值,我们经常利用这个特点来使得一个元素在其父元素中水平居中
如果不设置宽度,而margin-left和margin-right都为auto,则子元素宽度会调整为最大
<style>
.outer{
width:800px;
height:200px;
border:10px red solid;
}
.inner{
width:200px;
height:200px;
background-color: #bfa;
margin-left:100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
4.4 盒子模型--垂直方向布局
默认情况下父元素的高度被内容撑开
<style>
.outer{
background-color: #bfa;
}
.inner{
width:100px;
background-color: yellow;
height:200px;
margin-bottom:100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
子元素是在父元素的内容区排列的
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
overflow可选值:
visible:默认值,子元素会从父元素中溢出,在父元素外部的位置显示
hidden:移除内容会被裁剪不显示
scroll:生成两个滚动条,通过滚动条来查看完整的内容
auto:根据需要生成滚动条
.box1{
width:200px;
height:200px;
background-color: #bfa;
overflow: auto;
}
.box2{
width:100px;
height:400px;
background-color: orange;
}
4.5 盒子模型--外边距的折叠
垂直外边距的重叠(折叠)
相邻的垂直方向外边距会发生重叠现象
兄弟元素:
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)
特殊情况:
如果相邻的外边距一正一负,则取两者的和
如果相邻的外边距都是负值,则取两者中绝对值较大的
兄弟元素之间的外边距的重叠,对于开发是有利的,不需要进行处理
<style>
.box1,.box2{
width:200px;
height:200px;
}
.box1{
background-color: #bfa;
/* 设置一个下外边距 */
margin-bottom:100px;
}
.box2{
background-color: orange;
/* 设置一个上外边距 */
margin-top:100px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
父子元素
父子元素间相邻外边距,子元素的会传递给父元素(上外边距)
父子外边距的折叠会影响到页面的布局,必须要进行处理
<style>
.box3{
width:200px;
height:200px;
background-color: #bfa;
}
.box4{
width:100px;
height:100px;
background-color: orange;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box3">
<div class="box4"></div>
</div>
</body>
临时的解决方案:给父元素设置padding-top:100px;height:100px;
<style>
.box3{
width:200px;
height:100px;
background-color: #bfa;
padding-top:100px;
}
.box4{
width:100px;
height:100px;
background-color: orange;
}
</style>
4.6 行内元素的盒子模型
行内元素不支持设置宽度和高度
行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
行内元素可以设置border,垂直方向的border不会影响页面的布局
行内元素可以设置margin,垂直方向的margin不会影响布局
display:用来设置元素显示的类型
可选值:
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块:既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示
visibility:用来设置元素的显示状态
可选值:
visible 默认值,元素在页面中正常显示
hidden 元素在页面中隐藏,不显示,但是依然占据页面的位置
4.7 浏览器的默认样式
默认样式:
通常情况下,浏览器会为元素设置一些默认样式
默认样式的存在会影响到页面的布局,通常情况下编写网页时要去除浏览器的默认样式(PC端的页面)
<style>
.box1{
width:100px;
height:100px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
去除浏览器的默认样式:
body{
margin:0px;
}
p{
margin:0px;
}
ul{
padding:0px;
/*去除项目符号*/
list-style:none;
}
更简洁的方式:
*{
margin:0px;
padding:0px;
}
4.8 练习
4.8.1 京东图片列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片列表</title>
<style>
*{
margin:0;
padding:0;
}
ul>li{
list-style:none;
}
body{
background-color: antiquewhite;
}
.img-list{
width:190px;
height:470px;
overflow:hidden;
margin:50px auto;
background-color: #F4F4F4;
}
.img-list li:not(:last-child){
margin-bottom:9px;
}
.img-list img{
width:100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<a href="#">
<img src="../img/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../img/3.jpg" alt="">
</a>
</li>
</ul>
</body>
</html>
4.8.2 京东左侧导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东左侧导航栏</title>
<style>
body{
/* 设置一个网页的背景,方便查看 */
background-color: #bfa;
}
.left-nav{
width:190px;
height:450px;
padding:10px 0;
background-color: #fff;
margin:50px auto;
}
/* 设置菜单内部的item */
.left-nav .item{
height:25px;
/* 要让一个文字在父元素中垂直居中,只需要将父元素的line-height设置为一个和父元素height一样的值 */
line-height: 25px;
/* 设置item的左内边距,将文字向内移动 */
padding-left:18px;
/* 设置字体大小 */
font-size:12px;
}
.item:hover{
background-color: #d9d9d9;
}
.item a{
/* 设置字体大小 */
font-size:14px;
color:#333;
/* 去除下划线 */
text-decoration: none;
}
.item a:hover{
color:#c81623;
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 nav(div) div(div) ul(li)-->
<nav class="left-nav">
<div class="item">
<a href="#">家用电器</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
<div class="item">
<a href="#">手机</a>/<a href="#">运行商</a>/<a href="#">数码</a>
</div>
</nav>
</body>
</html>
4.8.3 网易新闻列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网易新闻列表</title>
<style>
a{
text-decoration: none;
}
/* 设置容器的样式 */
.news-wrapper{
width:300px;
height:357px;
margin:50px auto;
border-top:1px solid #ddd;
}
.news-title{
/* 为了边框和文字宽度一致,需要将h2转换为行内块元素 */
display:inline-block;
height:30px;
border-top:1px red solid;
/* 通过margin-top将h2上移,盖住上边框 */
margin-top:-1px;
padding-top:10px;
}
/* 设置title中超链接的样式 */
.news-title a{
color:#40406B;
font-weight: bold;
}
/* 设置图片容器的高度 */
.news-img{
height:150px;
}
/* 设置图片的文字效果*/
.news-img .img-title{
margin-top:-30px;
color:#fff;
font-weight: bold;
padding-left:30px;
}
/* 设置新闻列表 */
.news-list{
margin-top:15px;
padding-left:10px;
}
/* 设置li */
.news-list li{
margin-bottom:17px;
list-style:none;
}
.news-list li a{
font-size:14px;
color:#666;
}
.news-list li:before{
content:'■';
color:rgb(218,218,218);
font-size:12px;
margin-right: 4px;
}
.news-list li a:hover{
color:red;
}
</style>
</head>
<body>
<div class="news-wrapper">
<h2 class="news-title">
<!-- 创建一个标题的容器 -->
<a href="#">体育</a>
</h2>
<!-- 创建一个图片的容器 -->
<div class="news-img">
<img src="../img/1.jpeg" alt="费德勒">
<!-- 创建图片标题 -->
<h3 class="img-title">费德勒首负迪米 扶额不满发挥</h3>
</div>
<!-- 新闻列表 -->
<ul class="news-list">
<li>
<a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a>
</li>
<li>
<a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
</li>
<li>
<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
</li>
<li>
<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
</li>
</ul>
</div>
</body>
</html>
4.9 盒子的尺寸
默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值:
content-box:默认值,宽度和高度用来设置内容区的大小
border-box:宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小
<style>
.box1{
width:100px;
height:100px;
background-color: #bfa;
padding:10px;
border:10px red solid;
box-sizing:content-box;
/* box-sizing:border-box; */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
4.10 轮廓阴影和圆角
轮廓:
outline 用来设置元素的轮廓线,用法和border一模一样
轮廓和边框不同的点,就是轮廓不会影响到可见框的大小
outline:10px red solid;
阴影:
box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
第一个值:水平偏移量,设置阴影的水平位置;正值向右移动,负值向左移动
第二个值:垂直偏移量,设置阴影的垂直位置;正值向下移动,负值向上移动
第三个值:阴影的模糊半径
第四个值:阴影的颜色
box-shadow:10px 10px 50px rgba(0,0,0,.3);
圆角:
border-radius 用来设置圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
圆角设置的是圆的半径大小
border-radius可以分别指定四个角的圆角
四个值:左上、右上、右下、左下
三个值:左上、右上/左下、右下
两个值:左上/右下、右上/左下
将元素设置为一个圆形:border-radius:50%
border-top-right-radius:10px;
五、浮动
5.1 浮动的特点
通过浮动可以使一个元素向其父元素的左侧或右侧移动
通过float属性来设置元素的浮动
可选值:
none 默认值,元素不浮动
left 元素向左浮动
right 元素向右浮动
注意:元素设置浮动以后,水平布局的等式便不需要强制成立
元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点:
1.浮动元素会完全脱离文档流,不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时,不会盖住其他的浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高
简单总结:
浮动目前来讲主要作用是让页面中的元素可以水平排列,通过浮动可以制作一些水平方向的布局
5.2 浮动的其他特点
浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们利用浮动来设置文字环绕图片的效果
元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生改变
脱离文档流的特点:
块元素:
1.块元素不再独占页面的一行
2.脱离文档流以后,块元素的宽度和高度都默认被内容撑开
行内元素:
行内元素脱离文档流以后会变成块元素,特点和块元素一样
脱离文档流以后,不再区分块和行内了
5.3 导航条练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航条</title>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
ul li a{
text-decoration:none;
}
/* 设置nav的大小 */
.nav{
width:1205px;
height:48px;
background-color: #E8E7E3;
margin:100px auto;
}
/* 设置nav中的li */
.nav li{
float:left;
line-height:48px;
}
.nav a{
display:block;
color:#777;
font-size:18px;
padding:0 39px;
}
.nav a:hover{
background-color: #3f3f3f;
color:#E8E7E3;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
5.4 简单的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header,main,footer{
width:1000px;
margin:0 auto;
}
header{
height:150px;
background-color: silver;
}
main{
height: 500px;
background-color: #bfa;
margin:10px auto;
}
footer{
height:150px;
background-color: tomato;
}
nav,article,aside{
float:left;
}
/* 设置左侧的导航 */
nav{
width:200px;
height:100%;
background-color: yellow;
}
/* 设置中间的内容 */
article{
width:580px;
height:100%;
background-color: orange;
margin:0 10px;
}
/* 设置右侧的内容 */
aside{
width:200px;
height: 100%;
background-color: pink;
}
</style>
</head>
<body>
<!-- 创建头部 -->
<header></header>
<!-- 创建网页的主体 -->
<main>
<!-- 左侧导航 -->
<nav></nav>
<!-- 中间的内容-->
<article></article>
<!-- 右边的边栏 -->
<aside></aside>
</main>
<!-- 网页的底部 -->
<footer></footer>
</body>
</html>
5.5 高度塌陷和BFC
高度塌陷的问题:
在浮动布局中,父元素的高度默认是被子元素撑开的
当子元素浮动后,其会完全脱离文档流,子元素会从文档流中脱离
将无法撑起父元素的高度,导致父元素的高度丢失
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱
所以高度塌陷是浮动布局中比较常见的一个问题,必须处理
BFC:Block Formating Context 块级格式化环境
BFC是CSS中的一个隐含的属性,可以为一个元素开启BFC
开启BFC后该元素会变成一个独立的布局区域
元素开启BFC后的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊的方式开启元素的BFC:
1.设置元素的浮动
2.将元素设置为行内块元素
3.将元素的overflow设置为非visible的值
常用的方式:为元素设置overflow:hidden,开启其BFC,以使其可以包含浮动元素
<style>
.outer{
border: 10px red solid;
/* float:left; */
/* display:inline-block; */
overflow:hidden;
}
.inner{
height:100px;
width: 100px;
background-color: #bfa;
float:left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div style="width:100px;height:100px;background-color:yellow;"></div>
</body>
5.6 BFC演示
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素 子元素和父元素外边距不会重叠(如果子元素和父元素外边距重叠,子元素设置的外边距会传递给父元素,导致父元素高度塌陷)
<style>
.box1{
width:200px;
height:200px;
background-color: #bfa;
float:left;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
overflow:hidden;
}
.box3{
width:100px;
height:100px;
background-color: yellow;
margin-top:100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
<div class="box2"></div>
</body>
5.7 clear
如果我们不希望某个元素因为其他元素浮动的影响而改变位置
可以通过clear属性来清除浮动元素对当前元素所产生的影响
clear
作用:清除浮动元素对当前元素所产生的影响
可选值:
left:清除左侧浮动元素对当前元素的影响
right:清除右侧浮动元素对当前元素的影响
both:清除两侧中最大影响的那侧
原理:
设置清除浮动后,浏览器会自动为元素添加一个上外边距
以使其位置不受其他元素的影响
<style>
div{
font-size:50px;
}
.box1{
width:200px;
height:200px;
background-color: #bfa;
float:left;
}
.box2{
width:400px;
height:400px;
background-color: #ff0;
float:right;
}
.box3{
width:200px;
height: 200px;
background-color: orange;
clear:right;
}
/*
由于box1的浮动,导致box3位置上移
也就是box3受到了box1浮动的影响,位置发生了改变
*/
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
5.8 使用after伪元素解决高度塌陷
::after伪元素是行内元素,需要转换为块元素才能撑起盒子
<style>
.box1{
border:10px red solid;
}
.box2{
width:100px;
height:100px;
background-color: #bfa;
float:left;
}
.box1::after{
content:'';
clear:both;
display:block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
5.9 clearfix
clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题
<style>
.box1{
width:200px;
height: 200px;
background-color: #bfa;
}
.box2{
width:100px;
height:100px;
background-color: orange;
margin-top:100px;
}
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
六、定位
6.1 定位的简介
定位:position
定位是一种更加高级的布局手段
通过定位,可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值:
static:默认值,元素是静止的,没有开启定位
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定地位
sticky:开启元素的粘滞定位
6.2 相对定位
当元素的position属性值设置为relative时,则开启了元素的相对定位
相对定位的特点:
1.元素开启相对定位以后,如果不设置偏移量元素则不会发生任何变化
偏移量(offset)
2.相对定位是参照元素自身在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质,块还是块,行内还是行内
当元素开启了定位以后,可以通过偏移量来设置元素的位置
offset:
top 定位元素和定位位置上边的距离
bottom 定位元素和定位位置下边的距离
定位元素垂直方向的位置由top和bottom两个属性来控制,通常情况下只使用其中之一
top值越大,定位元素越向下移动
bottom值越大,定位元素越向上移动
left 定位元素和定位位置左侧的距离
right 定位元素和定位位置右侧的距离
定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
left越大,元素越靠右
right越大,元素越靠左
<style>
body{
font-size:60px;
}
.box1,.box2,.box3{
width:200px;
height:200px;
}
.box1{
background-color: #bfa;
}
.box2{
position:relative;
top:-200px;
left:200px;
background-color: orange;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
6.3 绝对定位
当元素的postion属性值设置为absolute时,则开启了元素的绝对定位
绝对定位的特点:
1.开启绝对定位后,如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后,元素会从文档流中脱离
3.绝对定位会改变元素的性质,行内变成块,块的宽度被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
包含块 containing block:
正常情况下,包含块就是当前元素最近的祖先块元素
开启绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位,则相对于根元素进行定位,即根元素就是它的包含块
html(根元素):初始包含块
<style>
body{
font-size:60px;
}
.box1{
width:200px;
height:200px;
background-color: #bfa;
}
.box2{
width:200px;
height: 200px;
background-color: orange;
position:absolute;
left:0;
top:0;
}
.box3{
width:300px;
height:300px;
background-color: yellow;
}
.box4{
position: relative;
width:400px;
height:400px;
background-color: tomato;
}
.box5{
position:relative;
width:300px;
height:300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box4">4
<div class="box5">5
<div class="box2">2</div>
</div>
</div>
<div class="box3">3</div>
</body>
6.4 固定定位
将元素的position属性设置为fixed,则开启了元素的固定定位
固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样
唯一不同的是,固定定位永远参照于浏览器的视口进行定位
固定定位的元素不会随网页的滚动条滚动
6.5 粘滞定位
当元素的position属性设置为sticky时,则开启了元素的粘滞定位
粘滞定位和相对定位特点基本一致:
不同的是粘滞定位可以在元素到达某个位置时将其固定
6.6 绝对定位的位置
对于开启绝对定位的元素,水平布局:
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容区宽度
当我们开启了绝对定位后:
水平方向的布局等式就需要添加left和right两个值
此时规则和之前的一样,只是多添加了两个值
当发生过度约束时:
如果9个值中没有auto,则自动调整right值使得等式满足
如果有auto,则自动调整auto的值以使得等式满足
可设置auto的值
margin/width/left/right
注意:
因为left和right的值默认为auto,所以如果不知道left和right,则等式不满足时,会自动调整这两个值
<style>
.box1{
width:500px;
height:500px;
background-color: #bfa;
position: relative;
}
.box2{
width: 100px;
height:100px;
background-color:orange;
position:absolute;
margin-left:auto;
left:0;
right:0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
垂直方向布局等式必须满足:
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height+bottom=包含块的高度
6.7 元素的层级
<style>
body{
font-size:60px;
}
.box1,.box2,.box3{
width:200px;
height:200px;
}
.box1{
background-color: #bfa;
position:absolute;
}
.box2{
background-color: rgba(255,0,0,.3);
position:absolute;
top:100px;
left: 100px;
}
.box3{
background-color: yellow;
position:absolute;
top:200px;
left:200px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
可以看到,是3压住2,2压住1
对于开启了定位的元素,可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数,值越大元素的层级越高
元素的层级越优先显示
如果元素的层级一样,则优先选择靠下的元素
祖先元素的层级再高,也不会盖住后代元素
6.8 京东轮播图练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
list-style:none;
}
.img-list{
width:590px;
height:470px;
margin:100px auto;
position: relative;
}
.img-list li{
position:absolute;
}
/* 通过修改元素的层级来显示指定的图片 */
.img-list li:nth-child(2){
z-index:1;
}
.pointer{
position:absolute;
z-index:2;
bottom:20px;
left:80px;
}
/* 设置导航点的样式 */
.pointer a{
float:left;
width:10px;
height: 10px;
margin:0 2px;
border-radius:50%;
background-color: rgba(255,255,255,.6);
/* 将背景颜色值设置到内容区,边框和内边距不再由背景颜色 */
background-clip:content-box;
border:2px solid transparent;
}
.pointer a.active,
.pointer a:hover{
background-color: #fff;
border:2px solid rgba(255,255,255,.6);
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="../img/07/1.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/2.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/3.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/4.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/5.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/6.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/7.jpg"></a></li>
<li><a href="javascript:;"><img src="../img/07/8.jpg"></a></li>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>
七、字体族
7.1 font-size&font-family
字体相关的样式
color 用来设置字体的颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相当于根元素的一个font-size
font-family 字体族(字体的格式)
可选值:(一般放最后兜底)
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
指定字体的类别,浏览器会自动使用该类别下的字体
font-family可以同时指定多个字体,多个字体间用逗号隔开
字体生效时优先使用第一个,第一个无法使用则是用第二个,以此类推
<style>
p{
color:red;
font-size:40px;
font-family:'华文彩云',sans-serif,'Courier New',cursive;
}
</style>
</head>
<body>
<p>今天天气真不错,baby can i kiss you</p>
</body>
@font-face可以将服务器中的字体直接提供给用户使用
问题:
1.加载速度
2.版权
@font-face{
/* 指定字体的名字 */
font-family: 'myfont';
/* 服务器中的字体的路径 */
src:url('./font/001.ttf');
}
7.2 图标字体
图标字体:iconfont
在网页中经常需要使用一些图标,可以通过图片来引入图标,但是图片大小本身比较大,并且非常的不灵活
所以在使用图标时,我们还可以将图标直接设置为字体,然后通过font-face的形式来对字体进行引入,这样我们就可以使用字体的形式来使用图标了
fontawesome使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中(注意必须是同级目录)
4.将all.css引入到网页中
5.使用图标字体
-- 直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fa/css/all.css">
</head>
<body>
<i class="fas fa-bell" style="color:red;font-size:80px;"></i>
<i class="fas fa-bell-slash" style="font-size:160px;color:green;"></i>
</body>
</html>
7.3 图标字体的其他使用方式
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after伪类
2.在content中设置字体的编码
3.设置字体的样式
fab
font-family:'Font Awesome 5 Brands';
fas
font-family:'Font Awesome 5 Free';
font-weight:900;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../fa/css/all.css">
<style>
li::before{
content:'\f1b0';
font-family:'Font Awesome 5 Free';
font-weight: 900;
}
</style>
</head>
<body>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
</body>
</html>
通过实体来使用图标字体:
&#图标的编码;
7.4 iconfont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../iconfont/iconfont.css">
<style></style>
</head>
<body>
<i clsss="iconfont"></i>
</body>
</html>
7.5 行高
行高(line height)
行高指的是文字占用的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小(px,em)
也可以直接为行高设置一个整数
如果是一个整数的话,行高将会是字体指定的倍数
字体框
字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度
行高在字体框的上下平均分配
可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中
行高还经常用来设置文字的行间距
行间距=行高 - 字体大小
行高用于设置单行高度
7.6 字体的简写属性
font 可以设置字体相关的所有属性
语法:
font:字体大小/行高 字体族
行高可以省略不写,如果不写则会使用默认值
font-weight:字重,字体的加粗
可选值:
normal 默认值,不加粗
bold 加粗
100-900 九个级别(没什么用)
font-style:字体的风格
可选值:
normal 正常的·
italic 斜体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border:1px red solid;
font:50px/100px 'Times New Roman',serif;
}
</style>
</head>
<body>
<div>今天天气不错,Hello Hello</div>
</body>
</html>
font:bold italic 50px/3 'Times New Roman',serif;
7.7 文本的水平和垂直对齐
texr-align:文本的水平对齐
可选值:
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border:1px red solid;
font:bold italic 50px/3 'Times New Roman',serif;
text-align:center;
}
</style>
</head>
<body>
<div>今天天气不错,Hello Hello</div>
</body>
</html>
vertical-align:设置元素垂直对齐方式
可选值:
baseline 默认值,基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
消除基线的影响:
vertical-align:top/bottom/middle;
只要不是沿着基线对齐,就可以消除基线带来的影响
7.8 其他的文本样式
text-decoration:设置文本修饰
可选值:
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
.box1{
font-size:50px;
text-decoration:line-through;
}
单行省略:
white-space 设置网页如何处理空白
可选值:
normal 正常
nowrap 不换行
pre 保留空白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box2{
white-space:nowrap;
overflow:hidden;
width:200px;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box2">Lorem ipsum dolor sit amet consectetur adipisicing elit. A maiores amet accusantium ab quia voluptatem. Officia, vitae voluptates saepe magni totam maxime eius aliquam autem ut ab nisi, blanditiis quidem.</div>
</body>
</html>
7.9 京东顶部导航条
7.9.1 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<!-- 引入图标字体 -->
<link rel="stylesheet" href="../fa/css/all.css">
</head>
<body>
<!-- 创建外围的容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar">
<!-- 左侧菜单 -->
<div class="location">
<div class="current-city">
<a href="javascript:;">北京</a>
</div>
</div>
<!-- 右侧的菜单 -->
<ul class="shortcut">
<li>
<a href="javascript:;">你好,请登录</a>
<a href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li><a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<li>
<a href="javascript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li><a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<li>
<a href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
</li>
<li class="line"></li>
<li>
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
7.9.2 基本样式
记得引入字体图标的css文件
<style>
*{
margin:0;
padding:0;
list-style:none;
}
body{
font:12px/1.5 Microsoft YaHei;
}
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
width:100%;
background-color: #E3E4E5;
line-height:30px;
border-bottom:1px #ddd solid;
}
/* 设置内部容器的样式 */
.top-bar{
width: 1190px;
margin:0 auto;
}
/* 设置字体样式 */
.top-bar a,
.top-bar span,
.top-bar i{
color:#999;
}
.top-bar a:hover,
.top-bar .highlight{
color:#f10215;
}
/* 设置location */
.location{
float:left;
}
.location .fas{
color:#f10215;
}
/* 设置shortcut */
.shortcut{
float:right;
}
/* 设置分割线 */
.shortcut .line{
width:1px;
height: 10px;
background-color: rgb(204,202,202);
margin:10px 12px;
}
/* 设置li */
.shortcut li{
float:left;
}
</style>
7.9.3 下拉框+完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东顶部导航条</title>
<!-- 引入图标字体 -->
<link rel="stylesheet" href="../fa/css/all.css">
<style>
*{
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration:none;
}
body{
font:12px/1.5 Microsoft YaHei;
}
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
width:100%;
background-color: #E3E4E5;
height: 30px;
line-height:30px;
border-bottom:1px #ddd solid;
}
/* 设置内部容器的样式 */
.top-bar{
width: 1190px;
margin:0 auto;
position:relative;
}
/* 设置字体样式 */
.top-bar a,
.top-bar span,
.top-bar i{
color:#999;
}
.top-bar a:hover,
.top-bar .highlight{
color:#f10215;
}
/* 设置location */
.location{
float:left;
}
.location .fas{
color:#f10215;
}
.location .city-list{
width:320px;
height:436px;
background-color: white;
border:1px solid rgb(204,204,204);
display:none;
/* 设置绝对定位,使其不占据页面的位置 */
position:absolute;
top:31px;
z-index:999;
box-shadow:0 2px 2px rgba(0,0,0,.2);
}
/* 当鼠标移入到location时,让city-list显示 */
.location:hover .city-list{
display: block;
}
.current-city{
padding:0 10px;
position:relative;
z-index:9999;
border:1px solid transparent;
border-bottom:none;
}
/* 设置current-city移入的效果 */
.location:hover .current-city{
background-color: white;
border:1px solid rgb(204,204,204);
border-bottom:none;
padding-bottom:1px;
}
/* 设置shortcut */
.shortcut{
float:right;
}
/* 设置分割线 */
.shortcut .line{
width:1px;
height: 10px;
background-color: rgb(204,202,202);
margin:10px 12px;
}
/* 设置li */
.shortcut li{
float:left;
}
</style>
</head>
<body>
<!-- 创建外围的容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar clearfix">
<!-- 左侧菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a>
</div>
<div class="city-list">
</div>
</div>
<!-- 右侧的菜单 -->
<ul class="shortcut">
<li>
<a href="javascript:;">你好,请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li><a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<li>
<a href="javascript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li><a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<li>
<a class="highlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
</li>
<li class="line"></li>
<li>
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
八、背景
8.1 背景(一)
background-color:设置背景颜色
background-image:设置背景图片
可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素,将会一个部分背景无法完全显示
如果背景图片和元素一样大,则会直接正常显示
background-repeat:设置背景的重复方式
可选值:
repeat 默认值,背景会沿着x轴、y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
background-position:用来设置背景图片的位置
设置方式:
通过 top left right bottom center几个表示方位的词来设置背景图片的位置
使用方位词时必须同时制定两个值,如果只写一个,则第二个默认是center
通过偏移量来指定背景图片的位置
水平方向的偏移量 垂直方向的偏移量
<style>
.box1{
width:500px;
height: 500px;
background-color: #bfa;
background-image: url(../img/09/1.png);
background-repeat: no-repeat;
/* background-position: center right; */
background-position: 100px 100px;
}
</style>
8.2 背景(二)
设置背景的范围
background-clip
可选值:
border-box 默认值,背景会出现在边框的下边
padding-box 背景不会出现在边框,只出现在内容区和内边距
content-box 背景只会出现在内容区
背景图片的偏移量计算的原点
background-origin
可选值:
padding-box 默认值,background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的偏移量从边框处开始计算
设置背景图片大小
background-size
第一个值表示宽度,第二个值表示高度
如果只写一个,则第二个值默认为auto
cover 图片的比例不变,将元素铺满
contain 图片比例不变, 将图片在元素中完整显示
背景图片是否跟随元素移动
background-attachment
可选值:
scroll 默认值,背景图片会跟随元素移动
fixed 背景会固定在页面中,不会随元素移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:500px;
height: 500px;
padding:10px;
background-color: #bfa;
background-image: url(../img/09/2.jpg);
background-repeat: no-repeat;
/* background-position: center right; */
/* background-position: 100px 100px; */
border:10px double red;
background-clip:content-box;
background-origin: content-box;
background-size: contain;
overflow:auto;
}
.box2{
width:300px;
height:1000px;
background-image: url('../img/09/1.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
总结:
background-color
background-image
background-repeat
background-position
background-size
background-clip
background-attachment
background:
背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求,也没有哪个属性是必须写的
注意:
background-size必须写在background-position后面,并且使用/隔开
background-origin和background-clip必须按照origin在clip前边
8.3 练习---背景重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:990px;
height:32px;
background-color: red;
margin:0 auto;
background-image:url('../img/09/bg.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
8.4 练习---背景练习2
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载
浏览器加载外部资源时,按需加载。用则加载,不用则不加载
比如这次的练习,link会首先加载,而hover和active会在指定状态触发时才会加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
display:block;
width:93px;
height:29px;
background-image: url(../img/10/link.png);
}
a:hover{
background-image: url(../img/10/hover.png);
}
a:active{
background-image: url(../img/10/active.png);
}
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
8.5 雪碧图
解决图片闪烁的问题:
可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来调整显示的图片
这样图片会同时加载到网页中,就可以有效地避免出现闪烁的问题
这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图
雪碧图使用步骤:
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
雪碧图特点:
一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{
display:block;
width:93px;
height:29px;
background-image: url(../img/10/btn.png);
}
a:hover{
background-position:-93px 0;
}
a:active{
background-position:186px 0;
}
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
8.6 线性渐变
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果
渐变是图片,通过background-image来设置
线性渐变:颜色沿着一条直线发生变化
linear-gradient()
linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域
线性渐变的开头,我们可以指定一个渐变的方向
to left
to right
to bottom
to top
xxxdeg deg表示度数
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
也可以手动指定渐变的分布情况
repeating-linear-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:200px;
height:200px;
/*background-image:linear-gradient(to left,red 40px,yellow 100px,#bfa,orange);*/
background-image:repeating-linear-gradient(red,yellow 50px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
8.7 径向渐变
radial-gradient()
径向渐变(有放射性的效果)
默认情况下,径向渐变的形状是根据元素的形状来计算的
正方形--->圆形
长方形--->椭圆形
我们也可以手动指定圆心的大小
circle 正圆
ellipse 椭圆
可以指定渐变的位置
语法:radial-gradient(大小 at 位置,颜色 位置,颜色 位置,……)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:300px;
height:500px;
/* background-image: radial-gradient(circle,red,yellow); */
/* background-image: radial-gradient(100px 100px at 0 0,red,yellow); */
background-image: radial-gradient(100px 100px at top,red,#bfa);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
8.8 电影卡片练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影卡片练习</title>
<link rel="stylesheet" href="../fa/css/all.css">
<style>
.outer{
width:240px;
margin:100px auto;
/* 设置阴影 */
box-shadow:0 0 10px rgba(0,0,0,.3);
}
/* 设置图片 */
.img-wrapper img{
width: 100%;
vertical-align:bottom;
}
.info{
padding:0 18px;
color:#acaaaa;
font-size:14px;
}
.info .title{
color:#717171;
font-size:18px;
margin:13px 0 15px 0;
}
.info .category i{
margin-left:4px;
margin-right:7px;
}
/* 设置简介的样式 */
.info .intro{
margin:18px 4px;
line-height:20px;
}
/* 设置下边的内容 */
.star-wrapper{
height:46px;
line-height:15px;
border-top:1px solid #e9e9e9;
color:#ddd;
padding:0 16px;
position:relative;
}
/* 设置星星的样式 */
.star-wrapper .star{
float:left;
position:absolute;
left:-20px;
}
.star-wrapper .light{
color:#b9cb41;
}
.star-wrapper .weibo{
float:right;
}
</style>
</head>
<body>
<!-- 创建一个外层容器 -->
<div class="outer">
<!-- 创建图片容器 -->
<div class="img-wrapper">
<img src="../img/10/1.jpg" alt="">
</div>
<!-- 创建内容区容器 -->
<div class="info">
<h2 class="title">
动画电影
</h2>
<h3 class="category"> <i class="fas fa-map-marker-alt"></i>
动画</h3>
<p class="intro">这是一部迪士尼的动画电影,非常好看</p>
</div>
<!-- 创建评分的容器 -->
<div class="star-wrapper">
<!-- 创建星星 -->
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
<ul class="weibo">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
</html>
九、表格
9.1 表格的简介
在现实生活中,我们经常需要使用表格来表示一些格式化数据
课程表、人名单、成绩单……
同样在网页中,我们也需要使用表格,我们通过table标签来创建一个表格<table></table>
在table中使用tr表示表格中的一行,有几个tr就有几行
在tr中使用td表示一个单元格,有几个td就有几个单元格
colspan 横向合并单元格
rowspan 纵向合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>al</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
</tr>
</table>
</body>
</html>
9.2 长表格
可以将一个表格分成三个部分
头部 thead
主体 tbody
底部 tfoot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">合计</td>
<td colspan="2">10000</td>
</tr>
</tfoot>
</table>
</body>
</html>
9.3 表格的样式
border-spacing:指定边框之间的距离
border-collapse:设置边框的合并
如果表格中没有使用tbody而是使用tr
那么浏览器会自动创建一个tbody,并且把tr全都放到tbody里面
所以tr不是table的子元素,无法通过子元素选择器(>)选中
默认情况下元素在td中是垂直居中的,可以通过vertical-align来修改
display:table-cell 将元素设置为单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width:50%;
border:1px solid black;
margin:0 auto;
border-spacing:0;
border-collapse: collapse;
}
td{
border:1px solid black;
height:100px;
vertical-align: middle;
text-align:center;
}
tr:nth-child(2n){
background-color: #bfa;
}
.box1{
width:300px;
height:300px;
background-color: orange;
display:table-cell;
vertical-align: middle;
}
.box2{
width:100px;
height:100px;
background-color: yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果庄</td>
</tr>
<tr>
<td>2</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果庄</td>
</tr>
<tr>
<td>3</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果庄</td>
</tr>
<tr>
<td>4</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果庄</td>
</tr>
<tr>
<td>5</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果庄</td>
</tr>
</table>
</body>
</html>
十、表单
在现实生活中,用于提交数据
在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建一个表单
form的属性
action 表单要提交的服务器的地址
文本框 <input type="text">
数据要提交到服务器中,必须为元素指定一个name属性值
密码框 <input type="password" name="pwd">
单选按钮 单选按钮name属性一致表示一组单选按钮
像这种选择框,必须指定一个value属性,value属性最终会作为用户填写的值传递给服务器
checked可以将单选按钮设置为默认选中
<input type="radio" name="hello" value="1">
<input type="radio" name="hello" value="2" checked>
多选框
<input type="checkbox" name="test" value="a">
<input type="checkbox" name="test" value="b">
<input type="checkbox" name="test" value="c">
下拉列表
<select name="haha" id="">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
提交按钮 <input type="submit" value="注册">
type指定类型,value指定内容
普通按钮 <input type="button" value="按钮">
重置按钮 <input type="reset">
按钮元素多用:
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
颜色选择 <input type="color">
电子邮箱 <input type="email">
属性:
autocomplete="off" 关闭自动补全
这个属性只会影响本元素,如果希望全局有效,应该在表单上添加该属性
readonly 将表单项设置为只读,数据会提交
disabled 将表单项设置为禁用,数据不会提交
autofocus 设置表单项自动获得焦点
十一、项目练习
transition 为样式设置过渡效果
比如: transition:height 0.3s
代表当高度发生变化时,需要花费0.3s才能到达目的高度
设置网站的图标(在标题栏和收藏栏)
网站图片一般都存储在网站的根目录下,名词一般都叫做favicon.ico
<link rel="icon" href="./favicon.ico">
效果展示:
十二、动画
12.1 过渡
过渡:transition
通过过渡,我们可以指定一个属性发生变化时的切换方式
通过过渡,可以创建一些非常好的效果,提升用户体验
trasition-property:指定要执行过渡的属性
多个属性间用逗号隔开
选择所有的属性可以用all
大部分属性都支持过渡效果
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-duration:指定过渡效果的持续时间
trasition-timing-function:过渡的时序函数
指定动画过渡方式
可选值:
ease:默认值,慢速开始,先加速,再减速
linear:匀速运动
ease-in:慢速开始,加速运动
ease-out:减速运动
ease-in-out:先加速,再减速
cubic-bezier()来指定时序函数
steps()分步执行过渡效果
假设transition-duration:2;
steps(2,end) 则表示在每一秒结束时执行过渡
steps(2,start) 表示在每一秒开始之前执行过渡
transition-delay:过渡效果的延迟,等待一段时间后再执行过渡
transition:可以同时设置所有过渡相关的属性,只有一个要求,即:
如果要写延迟,则两个时间中第一个是持续时间,第二个是延迟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box1{
width:800px;
height:800px;
background-color: silver;
overflow:hidden;
}
.box1 div{
width:100px;
height:100px;
margin-top:100px;
margin-left:0px;
}
.box2{
background-color: #bfa;
/* transition:all 0.3s; */
transition-property: width,height,margin-left;
transition-duration:2s;
/* transition-timing-function: ease; */
/* transition-timing-function: steps(5,end); */
transition-timing-function: steps(5,start);
transition-delay:2s;
}
.box3{
background-color: orange;
transition-property:all;
transition-duration:2s;
transition-timing-function:ease-in-out;
}
.box1:hover div{
width:200px;
height:200px;
margin-left:500px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
12.2 米兔练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:132px;
height:271px;
margin:100px auto;
background-image: url(../img/bigtap-mitu-queue-big.png);
background-position:0 0;
transition:background-position steps(4,start) 0.3s;
}
.box1:hover{
background-position: -528px 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12.3 动画
动画和过渡类似,都是可以实现一些动态的效果
不同的是过度需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行的每一个步骤
@keyframes test{
/* from动画的开始位置 ,也可以用0%表示 */
from{}
/* to表示动画的结束位置 ,也可以用100%表示 */
to{}
}
animation-name:要读当前元素生效的关键帧的名字
animation-duration:动画的执行时间
animation-iteration-count:动画执行的次数
可选值:
次数
infinite 无限执行
animation-direction:指定动画运行的方向
可选值:
默认值:normal 从from到to每次都这样
reverse 从to向from运行,每次都这样
alternate 从from向to运行,重复执行动画时反向执行
alternate-reverse 从to向from运行,重复执行动画时反向执行
animation-play-state:设置动画的执行状态
可选值:
running 默认值,动画执行
paused 动画暂停
animation-fill-mode:动画的填充模式
可选值:
none 默认值,动画执行完毕元素回到原来位置
forwards 动画执行完毕后元素会停止在动画结束的位置
backwards 动画延时等待时,元素就会处于开始位置
both:结合了forwards和backwards
animation-timing-function
animation-delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:800px;
height:800px;
background-color: silver;
overflow:hidden;
}
.box1 div{
width:100px;
height:100px;
margin-top:100px;
margin-left:0px;
}
.box2{
background-color: #bfa;
animation-name:test;
animation-duration:2s;
animation-delay:2s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-iteration-count:2;
animation-play-state: running;
animation-fill-mode: backwards;
}
@keyframes test{
from{
margin-left:0px;
background-color: orange;
}
to{
margin-left:700px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
12.4 练习--奔跑的少年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:256px;
height:256px;
margin:100px auto;
background-image: url(../img/bg2.png);
background-position: 0 0;
animation:runningman infinite 1s steps(6);
}
@keyframes runningman{
form{
background-position: 0 0;
}
to{
background-position: -1536px 0;
}
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
12.5 关键帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
height:500px;
border-bottom:10px black solid;
margin:50px auto;
overflow:hidden;
}
.outer div{
float:left;
margin-left:50px;
width:100px;
height:100px;
border-radius:50%;
background-color: #bfa;
animation:ball 2s forwards ease-in infinite;
}
.outer .box2{
background-color: orange;
animation-delay:0.2s;
}
.outer .box3{
background-color: pink;
animation-delay:0.4s;
}
.outer .box4{
background-color: blue;
animation-delay:1s;
}
.outer .box5{
background-color: purple;
animation-delay: 0.7s;
}
@keyframes ball{
from{
margin-top:0;
}
20%,60%,to{
margin-top:400px;
animation-timing-function:ease-out;
}
40%{
margin-top:50px;
}
80%{
margin-top:250px;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
12.6 变形平移(x轴)
变形就是指通过CSS来改变元素的形状或位置
变形不会影响到页面的布局
transform 用来设置元素的变形效果
平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
平移元素时,百分比是相对于自身计算的
这种居中方式只适用于元素的大小确定的情况
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
更好的水平居中的方法:
position:absolute;
left:50%;
transform:translateX(-50%);
所有的平移效果都应该写在一个transform里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(236,236,236);
}
.box1{
width: 200px;
height:200px;
background-color: #bfa;
margin:0 auto;
margin-top:200px;
transform: translateY(-100px);
}
.box2{
width: 200px;
height:200px;
background-color: orange;
margin:0 auto;
}
.box3{
background-color: orange;
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
.box4,.box5{
width:220px;
height: 300px;
background-color: yellowgreen;
float:left;
margin:0 10px;
transition:all .3s;
}
.box4:hover,
.box5:hover{
transform: translateY(-4px) translateX(4px);
box-shadow:0 0 10px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<!-- <div class="box2"></div> -->
<div class="box3">aaa</div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
12.7 Z轴平移
z轴平移,就是调整调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
距离越大,元素离人越近
z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视的
因此,必须要设置网页的视距
设置当前网页的视距为800px,人眼距离网页的距离
html{
perspective: 800px;
}
设置translateZ(800px),则此时平移后box1会铺满整个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 800px;
}
body{
border:1px red solid;
background-color: silver;
}
.box1{
width:200px;
height: 200px;
background-color: #bfa;
margin:200px auto;
transition:2s;
}
body:hover .box1{
transform:translateZ(800px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12.8 旋转
通过旋转可以使元素沿着x y 或z轴旋转指定的角度
rotateX()
rotateY()
rotateZ()
backface-visibility:设置是否显示元素的背面
默认:visibility
可选值:hidden visibility
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective: 800px;
}
body{
border:1px red solid;
background-color: rgb(241,241,241);
}
.box1{
width:200px;
height: 200px;
background-color: #bfa;
margin:200px auto;
transition:4s;
}
body:hover .box1{
/* transform: rotateZ(180deg); */
/* transform:rotateY(180deg) translateZ(100px) ; */
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box1">
<img src="../img/an.jpg" alt="">
</div>
</body>
</html>
12.9 鸭子表
理论上,秒针旋转的时候是沿着中点的,要使其沿着顶点旋转,可以设置它的容器旋转,这样秒针就会跟着旋转了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.sec-wrapper{
margin:100px auto;
width:500px;
height: 500px;
animation:run 60s;
}
.sec{
margin:0 auto;
width:4px;
height:250px;
background-color: red;
}
@keyframes run{
from{
transfrom:rotateZ(0);
}
to{
transform:rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</body>
</html>
实际制作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/* 设置表的样式 */
.clock{
width:500px;
height: 500px;
margin:0 auto;
margin-top:100px;
border-radius:50%;
border:10px solid black;
position: relative;
background-image:url(../img/bg.png);
background-size:cover;
}
.clock>div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
/* 设置时针 */
.hour-wrapper{
height:70%;
width:70%;
animation:run 7200s linear infinite;
}
.hour{
height: 50%;
width:6px;
background-color: #000;
margin:0 auto;
}
/* 设置分针 */
.min-wrapper{
height:80%;
width:80%;
animation:run 600s steps(60) infinite;
}
.min{
height:50%;
width:4px;
background-color: #000;
margin:0 auto;
}
.sec-wrapper{
height: 90%;
width:90%;
animation:run 10s infinite steps(60);
}
.sec{
height:50%;
width:3px;
background-color: #f00;
margin:0 auto;
}
@keyframes run{
from{
transform: rotateZ(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 创建表的容器 -->
<div class="clock">
<!-- 创建时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 创建分针 -->
<div class="min-wrapper">
<div class="min"></div>
</div>
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
12.10 复仇者联盟
设置3d旋转效果:
transform-style:preserve-3d;
transform:rotateX(45deg) rotateZ(45deg);
加上动画效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
perspective:800px;
}
.cube{
width:200px;
height: 200px;
margin:100px auto;
transform-style:preserve-3d;
transform:rotateX(0deg) rotateZ(0deg);
animation:fcz 20s infinite linear;
}
.cube>div{
width:200px;
height:200px;
/* 为元素设置透明效果 */
opacity: 0.7;
position:absolute;
}
img{
vertical-align:top;
}
.box1{
transform:rotateY(90deg) translateZ(100px);
}
.box2{
transform:rotateY(-90deg) translateZ(100px);
}
.box3{
transform:rotateX(90deg) translateZ(100px);
}
.box4{
transform:rotateX(-90deg) translateZ(100px);
}
.box5{
transform:rotateY(180deg) translateZ(100px);
}
.box6{
transform:translateZ(100px);
}
@keyframes fcz{
from{
transfrom:rotateX(0) rotateZ(0);
}
to{
transform:rotateX(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 -->
<div class="cube">
<!-- 引入图片 -->
<div class="box1">
<img src="../img/14/1.jpg" alt="">
</div>
<div class="box2">
<img src="../img/14/2.jpg" alt="">
</div>
<div class="box3">
<img src="../img/14/3.jpg" alt="">
</div>
<div class="box4">
<img src="../img/14/4.jpg" alt="">
</div>
<div class="box5">
<img src="../img/14/5.jpg" alt="">
</div>
<div class="box6">
<img src="../img/14/6.jpg" alt="">
</div>
</div>
</body>
</html>
12.11 缩放
scale 对元素进行缩放的函数
transform:scaleX() 水平方向缩放
transform:scaleY() 垂直方向缩放
transform:scale() 双方向的缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width:100px;
height:100px;
background-color: #bfa;
margin:100px auto;
transition:2s;
}
.box1:hover{
/* transform:scaleX(2); */
transform:scaleX(.2)
}
.img-wrapper{
width:200px;
height:200px;
border:1px red solid;
overflow:hidden;
}
.img-wrapper img{
transition:2s;
}
.img-wrapper:hover img{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="img-wrapper">
<img src="../img/an.jpg" width="100%" alt="">
</div>
</body>
</html>
transform-origin:设置变形的原点,默认值是center
e.g transform-origin:20px 20px;
十三、less
13.1 less简介
less是一门css的预处理语言
less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式
在less中添加了许多的新特性,像对变量的支持、对mixin的支持
less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向less转换为css,然后由浏览器执行
css原生也支持变量的设置
比如变量color:--color:#bfa;
引用的时候:var(--color);
calc()计算函数
less初体验:
body{
width:100px;
height:100px;
div{
color:red;
}
}
编译为对应的css:
body {
width: 100px;
height: 100px;
}
body div {
color: red;
}
13.2 less中的变量
//双斜线,是less中的单行注释,注释的内容不会被解析到css中
/*多行注释,内容会被解析到css文件中*/
变量,在变量中可以存储任意一个值
并且我们可以在需要的时候,任意的修改变量中的值
变量的语法:@变量名
@a:100px;
@color:#bfa;
.box6{
width:@a;
background-color: @color;
}
变量作为类名使用:
@c:box6;
.@{c}{
width:@a;
}
变量名作为一部分值使用时:
@d:css;
.@{c}{
width:@a;
background-image:url("@{d}/1.png");
}
通过$符号引用变量值
div{
width:300px;
height:$width;
}
summary:
使用变量时,如果直接使用则以 @变量名 的形式使用即可
作为类名时,或者一部分值时或者作为属性名时,必须以@{变量名}的形式使用
变量发生重名时,会优先使用比较近的变量
可以在变量声明前就使用变量
使用$引用其他的属性的值
13.3 父元素和扩展
&符号表示外层的父元素
.box1{
.box2{
color:red;
}
>.box3{
color:#bfa;
&:hover{
background-color: blue;
}
}
&:hover{
color:orange;
}
div &{
width:100px;
}
}
编译成css:
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: #bfa;
}
.box1 > .box3:hover {
background-color: blue;
}
.box1:hover {
color: orange;
}
div .box1 {
width: 100px;
}
扩展:
:extend()对当前选择器扩展指定选择器的样式(选择器分组)
.a1{
width:100px;
height:200px;
}
.a2:extend(.a1){
color:red;
}
编译成css:
.a1,
.a2 {
width: 100px;
height: 200px;
}
.a2 {
color: red;
}
也可以通过以下格式扩展:
.p3{
.p1();
}
直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
mixin混合
使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixin
.p4(){
width:100px;
height: 100px;
background-color: #bfa;
}
.p5{
.p4();
}
css编译:
.p5 {
width: 100px;
height: 100px;
background-color: #bfa;
}
13.4 混合函数
混合函数中可以直接设置变量(相当于传参)
.test(@w,@h,@bd-color){
width:@w;
height:@h;
border:1px solid @bd-color;
}
div{
.test(200px,300px,#bfa);
}
编译成css:
div {
width: 200px;
height: 300px;
border: 1px solid #bfa;
}
less内置函数:
darken(颜色,百分比);
body{
width:100%;
height:100%;
background-color: #bfa;
&:hover{
background-color: darken(#bfa,10%);
}
}
average(颜色1,颜色2);
body{
width:100%;
height:100%;
background-color: #bfa;
&:hover{
background-color: average(#bfa,#000);
}
}
btw,这个混合色好漂亮
13.5 less补充
在less中所有的数值都可以直接进行运算
+、-、*、/
.box1{
width:100px+100px;
height:100px*100px;
background-color: #bfa;
}
@import
下列代码相当于将syntax.less中所有代码复制到本less文件中
@import "syntax2.less";
十四、弹性盒
14.1 弹性盒简介
flex(弹性盒、伸缩盒)
是css中的一种布局手段,他主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变
弹性容器:
要使用弹性盒,必须先将一个元素设置为弹性容器
我们通过display来设置弹性容器
display:flex 设置为块级弹性容器
display:inline-flex 设置为行内的弹性容器
弹性元素
弹性容器的直接子元素是弹性元素(弹性项)
一个元素可以同时是弹性容器和弹性元素
flex-direction:指定容器中弹性元素的排列方式
可选值:
row 表示弹性元素在容器中水平排列,默认值(左向右)
row-reverse 弹性元素在容器中反向水平排列(右向左)
column 弹性元素纵向排列(自上向下)
column-reverse 弹性元素反向纵向排列(自下向上)
主轴和侧轴:
主轴:弹性元素的排列方向称为主轴
比如,row主轴自左向右;row-reverse主轴自右向左
侧轴:与主轴垂直方向的称为侧轴
弹性元素的属性:
flex-grow 指定弹性元素的伸展的系数(增长系数)
当父元素有多余的空间时:
flex-grow:1;子元素平均填满父元素
flex-grow数值不同时,子元素按比例分配父元素的空间
flex-shrink 指定弹性元素的收缩系数(收缩系数)
当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩
14.2 练习----会弹的导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.nav{
width:1210px;
height:48px;
line-height:48px;
margin:50px auto;
background-color: #E8e7e3;
display:flex;
}
.nav li{
/* 设置增长系数 */
flex-grow:1;
}
.nav a{
display:block;
color:#808080;
text-decoration:none;
font-size:16px;
text-align:center;
}
.nav a:hover{
background-color: #636363;
color:white;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Slide</a></li>
<li><a href="#">Server Slide</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">References</a></li>
</ul>
</body>
</html>
14.3 弹性容器上的样式
flex-wrap:设置弹性元素是否在弹性容器中自动换行
可选值:
nowrap:默认值,元素不会自动换行
wrap:元素会沿着辅轴自动换行
wrap-reverse:元素沿着辅轴反方向换行
flex-flow:wrap和direction的简写属性,没有顺序要求
flex-flow:row wrap;
justify-content:如何分配主轴上的空白空间(主轴上的元素如何排列)
可选值:
flex-start 元素沿着主轴起边排列
flex-end 沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素两侧
space-evenly 空白分布到元素的单侧
space-between 空白均匀分布到元素中间
align-items:元素在辅轴上如何对齐/元素间的关系
可选值:
stretch 默认值,将元素的长度设置为相同的值
flex-start 元素不会拉伸,沿着辅轴起边对齐
flex-end 沿着辅轴的终边对齐
center 居中对齐
baseline 基线对齐
align-content 辅轴空白空间的分布
align-self:用来覆盖当前弹性元素上的align-items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:600px;
height:800px;
border:10px red solid;
display:flex;
flex-flow:wrap row;
/* 设置弹性元素是否在弹性容器中自动换行 */
/* flex-wrap:wrap-reverse; */
/* flex-flow:wrap column; */
/* justify-content:center/flex-start/flex-end; */
/* justify-content:space-around/space-evenly/space-between; */
justify-content:flex-start;
/* align-items:stretch/flex-start/flex-end/baseline; */
align-items:flex-start;
align-content:flex-start;
}
li{
width:200px;
background-color: #bfa;
text-align:center;
line-height:100px;
font-size:50px;
flex-shrink:0;
}
/* li:nth-child(1){} */
li:nth-child(2){
background-color: pink;
}
li:nth-child(3){
background-color: orange;
}
li:nth-child(4){
background-color: yellow;
}
li:nth-child(5){
background-color: chocolate;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2
<div>2</div>
</li>
<li>3
<div>3</div>
<div>3</div>
</li>
<li>1</li>
<li>2
<div>2</div>
</li>
</ul>
</body>
</html>
14.4 弹性元素上的样式
flex-grow:弹性的增长系数
flex-shrink:弹性元素的缩减系数
缩减多少是根据缩减系数和元素大小来计算的
flex-basis:元素的基础长度
指定的是元素在主轴上的基础长度
如果主轴是横向的,则该值指定的就是元素的宽度
如果主轴是纵向的,则该值指定的就是元素的高度
默认值是auto,表示参考元素自身的高度或宽度
如果传递了一个具体的值,则以该值为准
flex可以设置弹性元素所有的三个样式
flex:增长 缩减 基础;
initial flex:0 1 auto
auto flex:1 1 auto
none flex:0 0 auto 弹性元素没有弹性
order:决定弹性元素的排列顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:900px;
height:800px;
border:10px red solid;
display:flex;
}
li{
width:200px;
background-color: #bfa;
text-align:center;
line-height:100px;
font-size:50px;
/* flex-grow:1; */
/* flex-shrink:1; */
flex-basis:200px;
}
li:nth-child(1){
order:3;
}
li:nth-child(2){
background-color: pink;
/* flex-grow:2; */
order:1;
}
li:nth-child(3){
background-color: orange;
/* flex-grow:3; */
order:2;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
14.5 淘宝导航
text-align只使用与块元素,对行内元素无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/* 设置外层容器 */
.nav{
width:100%;
}
/* 设置每一行的容器 */
.nav-inner{
/* 设置为弹性容器 */
display:flex;
justify-content:space-around;
}
.item{
width:13%;
/* flex:auto; */
text-align:center;
}
.item img{
/* 设置图片的宽度和父元素的宽度一样 */
width:100%;
}
.item a{
color:#333;
text-decoration:none;
font-size:16px;
}
</style>
</head>
<body>
<!-- 创建一个外层的容器 -->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="">
<img src="../img/17/1.png" alt="">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/2.png" alt="">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/3.png" alt="">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/4.png" alt="">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/5.png" alt="">
<span>天猫超市</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="">
<img src="../img/17/6.png" alt="">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/7.png" alt="">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/8.png" alt="">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/9.png" alt="">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="">
<img src="../img/17/10.png" alt="">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
</html>
十五、像素
15.1 浅聊像素
屏幕是由一个一个发光的小点构成的,这一个个的小点就是像素
分辨率:比如1920x1080 说的就是屏幕中小点的个数
在前端开发中像素要分成两种情况讨论:CSS像素和物理像素
物理像素:上述所说的小点就是物理像素
CSS像素,编写网页时,我们所用的像素就是CSS像素
浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现
一个CSS像素最终由几个物理像素显示,由浏览器决定:
默认情况下,在pc端一个css像素 = 一个物理像素
视口viewpoint
视口就是屏幕中用来显示网页的区域
可以通过查看视口的大小,来观察CSS像素和物理像素的比值
默认情况下:
视口宽度1920px(css像素)
1920px(物理像素)
此时,css像素和物理像素的比是1:1
放大两倍的情况:
视口宽度960px(css像素)
1920px(物理像素)
此时,css像素和物理像素的比是1:2
我们可以通过改变视口的大小,来改变css像素和物理像素的比值
15.2 手机像素
不同的屏幕,单位像素的大小是不同的,像素越小屏幕越清晰
24寸 1920x1000
iPhone6 4.7寸 750x1334
智能手机的像素点远远小于计算机的像素点
问题:一个宽度为900px的网页在iPhone中要如何显示呢?
注意: 默认情况下,移动端的网页会将视口设置为980px
以确保pc端网页可以在移动端正常访问
但是如果网页的宽度超过了980px,移动端的浏览器会自动对网页缩放以完整显示网页
所以基本大部分的pc端网站都可以在移动端正常浏览,但是往往不会有一个好的体验
为了解决这个问题,大部分网站都会专门为移动端设计网页
15.3 完美视口
移动端默认的视口大小是980px(css像素)
默认情况下,移动端的像素比是980/移动端宽度
如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好的
导致网页中的内容非常非常小
编写移动页面时,必须要确保有一个比较合理的像素比
可以通过meta标签来设置视口大小
每一款移动设备设计时,都会有一个最佳的像素比
一般我们只需要将像素比设置为该值即可得到一个最佳效果
将像素比设置为最佳像素比的视口大小我们称其为完美视口
设置视口大小:width=device-width
device-width表示设备的宽度(完美视口)
结论:写移动端页面时,先写下面这行代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15.4 vw单位
不同设备完美视口大小是不一样的
iphone6 --- 375
iphone6plus --- 414
由于不同设备视口和像素比不同,所以同样的375个像素在不同设备下的意义是不一样的
所以在移动端开发时,就不能使用px来进行布局了
vw表示的是视口的宽度(viewpoint width)
100vw = 一个视口的宽度
1vw = 1%视口宽度
vw这个单位永远相当于视口宽度进行计算
设计图的宽度一般为750px或1125px
创建一个48px x 35px大小的元素
100vw=750px(设计图的像素)
则6.4vw=48px(设计图像素)
4.667vw=35px
15.5 vw适配
rem
1 rem= 1 html字体大小
网页中字体大小最小是12px,不能设置一个比12像素还小的字体(0除外)
如果我们设置了一个小于12px的字体,则字体自动设置为12px
15.6 练习----移动端页面
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱学习</title>
<link rel="stylesheet" href="../fa/css/all.css">
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 创建头部的容器 -->
<header class="top-bar">
<div class="menu-btn">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<h1 class="logo">
<a href="#">I Learn</a>
</h1>
<div class="search-btn">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</header>
<div class="banner">
<a href="#">
<img src="../img/18/banner.png" alt="">
</a>
</div>
<nav class="menu">
<a href="#" class="course"><i class="fas fa-book"></i>My Courses</a>
<a href="#" class="star"><i class="fas fa-cut"></i> Star Teacher</a>
<a href="#" class="sub"><i class="fas fa-envelope"></i> Subscriptions</a>
<a href="#" class="download"><i class="fas fa-globe"></i> My Download</a>
</nav>
<div class="course-list">
<!-- 列表标题 -->
<div class="title">
<h2>Lastest course</h2>
<a href="#" class="more">More classes</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
</div>
</div> <div class="course-list">
<!-- 列表标题 -->
<div class="title">
<h2>Lastest course</h2>
<a href="#" class="more">More classes</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!-- 列表标题 -->
<div class="title">
<h2>Lastest course</h2>
<a href="#" class="more">More classes</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
<div class="item">
<div class="cover-img">
<img src="../img/18/cover.png" alt="">
</div>
<h3 class="course-title">Photography course</h3>
<div class="user-info">
<div class="avatar">
<img src="../img/18/avatar.png" alt="">
</div>
<div class="nickname">Annabelie</div>
</div>
</div>
</div>
</div>
</body>
</html>
less部分:
*{
margin:0;
padding:0;
}
@total-width:750;
html{
//设置rem的比值
font-size:(100/@total-width)*40vw;
background-color: #eff0f4;
}
.w{
width:(693/40)*1rem;
margin:0 auto;
}
a{
text-decoration:none;
}
// 设置头部的header
.top-bar:extend(.w){
display:flex;
height:(175/40)*1rem;
line-height:$height;
justify-content:space-between;
align-items:center;
a{
color:#24253d;
font-size:(50/40)*1rem;
i{
color:#999;
font-size:(50/40)*1rem;
}
}
}
// 设置banner
.banner:extend(.w){
img{
width:100%;
}
}
// 设置中间菜单
.menu:extend(.w){
// 确定元素高度
height: (329/40)*1rem;
// 设置弹性元素
display:flex;
flex-flow:row wrap;
// 设置对齐方式
justify-content:space-between;
// 设置辅轴方向的对齐方式
align-content:space-around;
// 设置框的大小
a{
width:(327/40)*1rem;
height:(104/40)*1rem;
line-height:$height;
color:white;
border-radius:(10/40)*1rem;
font-size:14px;
i{
font-size:16px;
margin:0 (20/40)*1rem 0 (38/40)*1rem;
}
}
.course{
background-color: #f97053;
}
.star{
background-color: #cd6efe;
}
.sub{
background-color: #f34479;
}
.download{
background-color: #1bc4fb;
}
}
// 设置课程列表
.course-list:extend(.w){
height:(453/40)*1rem;
display:flex;
flex-flow:column;
justify-content: space-between;
.title{
height:(100/40)*1rem;
display:flex;
justify-content:space-between;
align-items:center;
margin:(16/40)*1rem 0;
h2{
font-size:(33/40)*1rem;
color:#24253d;
border-left:2px solid #3a84ff;
padding-left:4px;
}
a{
font-size:(28/40)*1rem;
color: #656565;;
}
}
// 设置课程列表项
.item-list{
width:(720/40)*1rem;
overflow:auto;
display:flex;
justify-content: space-between;
.item{
flex:none;
display:flex;
flex-flow:column wrap;
justify-content: space-evenly;
box-sizing:border-box;
width:(320/40)*1rem;
height:(324/40)*1rem;
padding:0 (22/40)*1rem;
background-color: #fff;
box-shadow:0 0 5px rgba(0,0,0,.3);
margin-right:20px;
img{
width:100%;
vertical-align: top;
}
.course-title{
font-size:(27/40)*1rem;
color:#24253d;
}
.user-info{
display:flex;
align-items:center;
.avatar{
width:(42/40)*1rem;
height: $width;
}
.nickname{
padding-left:6px;
font-size:(24/40)*1rem;
color:#969393;
}
}
}
}
}
十六、媒体查询
16.1 响应式布局
网页可以根据不同的设备或窗口大小呈现不同的效果
使用响应式布局,可以使一个网页适用于所有设备
响应式布局的关键就是媒体查询
通过媒体查询,可以为不同的设备或设备不同状态来分别设置样式
使用媒体查询:
语法:@media 查询规则{}
媒体类型:
all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用逗号连接多个媒体,这样它们之间就是一个或的关系
可以在媒体类型前添加一个only,表示只有
only的使用主要是为了兼容一些老版本的浏览器
<style>
@media only screen{
body{
background-color: #bfa;
}
}
</style>
16.2 媒体特性
width 视口的宽度
height 视口的高度
min-width 视口的最小宽度(视口大于指定宽度时生效)
max-width 视口的最大宽度(视口小于指定宽度时生效)
样式切换的分界点,我们称其为断点,也就是网页的样式会在这里发生改变
一般比较常用的断点:
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1220px
@media(min-width:800px),(max-width:700px){
body{
background-color: #fab;
}
}
16.3 练习---美图手机
响应式设计的网页:
a.移动端优先
b.渐进增强
less部分:
a{
text-decoration: none;
color: #fff;
&:hover{
color: rgb(197, 196, 196);
}
}
// 导航条的外部容器
.top-bar-wrapper{
background-color: #000;
}
.top-bar{
max-width: 1200px;
margin: 0 auto;
height: 48px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
// 设置左侧的导航
.left-menu{
&:active{
//显示隐藏的菜单
.nav{
display: block;
}
}
// position: relative;
// 设置菜单
.nav{
display: none;
position: absolute;
top:48px;
left: 0;
bottom: 0;
right: 0;
// 设置背景颜色
background-color: #000;
padding-top: 60px;
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #757474;
a{
display: block;
line-height: 44px;
font-size: 14px;
}
&:last-child a{
display: inline-block;
margin-right: 6px;
}
span{
color: #fff;
font-size: 14px;
}
}
}
// 图标
.menu-icon{
width: 18px;
height: 48px;
position: relative;
// 导航的线
li{
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
// 修改变形的原点
transform-origin:left center;
transition: 0.5s
}
li:nth-child(1){
top:18px;
}
li:nth-child(2){
top:24px;
}
li:nth-child(3){
top:30px;
}
// 鼠标移入以后的效果,正常项目时,效果需要通过js来实现
&:active{
li:nth-child(1){
// 向下旋转
transform: rotateZ(40deg);
}
li:nth-child(2){
// 隐藏
opacity: 0;
}
li:nth-child(3){
transform: rotateZ(-40deg);
}
}
}
}
//设置logo
.logo{
a{
text-indent: -9999px;
display: block;
width: 122px;
height: 32px;
background-image: url('../img/18/dff63979.sprites-index@2x.png');
background-size: 400px 400px;
}
}
//设置媒体查询
@media only screen{
// 断点 768px
@media (min-width: 768px){
.left-menu{
order: 2;
flex: auto;
//显示菜单
.nav{
display: flex;
position: static;
padding: 0;
justify-content: space-around;
li{
width: auto;
border-bottom: none;
margin: 0;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
//隐藏菜单图标
.menu-icon{
display: none;
}
}
.logo{
order: 1;
}
.user-info{
order: 3;
}
}
}
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="./meitu.css">
<link rel="stylesheet" href="../fa/css/all.css">
</head>
<body>
<div class="top-bar-wrapper">
<div class="top-bar">
<!-- 左侧菜单 -->
<div class="left-menu">
<!-- 创建菜单图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建菜单 -->
<ul class="nav">
<li><a href="#">手机</a></li>
<li><a href="#">美容仪器</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">服务支持</a></li>
<li><a href="#">企业网站</a></li>
<li>
<a href="#"><i class="fas fa-search"></i></a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="fas fa-user"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
小于768px时:
大于768px时