一、图标字体iconfont
网页中会有很多小的图片,例如,购物车、小箭头、定位等,
这些内容可以直接用图片代替,但图片一般都是比较大的,而且修改起来也不方便所以可以直接使用图标字体,把它们就当成字体,可以用字体相关的样式,去修改图标字体,例如可以改变大小,颜色。
阿里巴巴矢量图标库 https: // www.iconfont.cn/
使用图标库
第一步:选择你需要的图标
第二步:将你选中图标对应的css文件引入到你的html文件当中
css文件可以线上版本,也可以下载下来,引入线下版本
第三步:在结构中可以通过不同的使用方式,显示在页面中
<!-- 引入线上版本 跟上面的线下版本引入一个就可以了-->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3797640_42r1d8h61fk.css" />
<!-- 引入线下版本 下载下来,如果没有网也是可以生效的 -->
<link rel="stylesheet" href="./font_3797640_f35uft3b4bi/iconfont.css">
①转义字符形式 &实体的名字;
注意:一定要加公有的iconfont类名
*②类名形式(常用)
③伪类(了解)
<style>
i.ss{
font-size: 50px;
color: red;
}
i.ss:hover{
color: hotpink;
}
span.s1{
font-size: 50px;
color: green;
}
.s2{
font-size: 100px;
color: indigo;
}
/* 在p前面加一个图标 */
p::before{
content: "\eacc";
font-family: 'iconfont';
}
</style>
<!-- 第一种方式 转义字符形式 &实体的名字;
注意:一定要加公有的iconfont类名-->
<i class="iconfont ss"></i>
<span class="iconfont s1"></span>
<!-- 第二种方式 类名形式 (常用)-->
<i class="iconfont icon-shangjiantou s2"></i>
<i class="iconfont icon-24gf-cartFull7 ss"></i>
<!--第三种方式 伪类 (了解)-->
<p>葬便治未,文使谢你。</p>
二、层级z-index
如果希望元素a盖住元素b,那么我们就可以提高元素a的层级
样式值越大,层级越高,越能够显示在最上面
注意点:
1 样式值:是一个正整数
2 z-index,默认值是0
3 使用前提:必须开启定位
4 父元素的层级再高也不会盖住子元素
三、透明效果
rgba 不可以单独设置透明度
opacity:0.6; 可以单独设置透明度
transparent 可以设置透明效果
面试题:opacity、rgba、transparent在设置透明的时候,几者的区别?
1 opacity是样式名,通过样式值的不同设置透明效果
rgba、transparent是样式值,必须跟在特定的样式名后,才可以设置透明效果
2 opacity可以给任何元素设置透明效果,就像在元素前面加一个模糊镜子
rgba、transparentl只能给背景色,颜色等特定的元素设置
3 opacity具有继承性,
rgba、transparent不具有继承性
<!-- 用opacity设置透明度 -->
<p style="background-color: red; opacity: 0.6">
(3)这是一个p标签,颜色red,opacity值为0.6
<span style="background-color: green"> 这是一个span标签,颜色green,opacity未设置 </span>
</p>
<!-- 用rgba设置透明度 -->
<p style="background-color: rgba(255, 0, 0, 0.6)">
(3)这是一个p标签,颜色red,透明度为0.6
<span style="background-color: green">(这是一个span标签,颜色green,透明度未设置)</span>
</p>
代码运行结果:
四、轮播图
手写轮播图两种写法(结合js)
1 浮动 float: ;
<!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>
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
#wrap{
width: 590px;
height: 470px;
margin: 50px auto;
/* border: 10px red solid; */
overflow: hidden;
position: relative;
}
img{
vertical-align: middle;
}
.imgs{
width: 2950px;
}
.imgs>img{
float: left;
}
.piont{
position: absolute;
left: 30px;
bottom: 20px;
}
.piont>a{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(243,206,139);
margin: 0 3px;
border: 2px solid transparent;
/* 背景色只到内容区,边框没有背景 */
background-clip: content-box;
}
.piont>a:hover{
background-color: #fff;
border: 2px solid rgb(100,100,109);
}
</style>
</head>
<body>
<!-- 轮播图 -->
<div id="wrap">
<!-- 图片 -->
<div class="imgs">
<img src="./img/1.jpg" alt="1">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
<img src="./img/5.jpg" alt="5">
</div>
<!-- 小圆点 -->
<div class="piont">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
<!-- 上一张下一张 -->
<div>
<span></span>
<span></span>
</div>
</div>
</body>
</html>