实训第十天

m0_57715248

于 2022-11-29 21:53:40 发布

阅读量65

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_57715248/article/details/128106090

版权

一、图标字体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类名

*②类名形式（常用）

③伪类（了解）

样式值越大，层级越高，越能够显示在最上面

注意点:

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不具有继承性

<p style="background-color: red; opacity: 0.6">

（3）这是一个p标签，颜色red，opacity值为0.6

<span style="background-color: green"> 这是一个span标签，颜色green，opacity未设置 </span>

</p>



<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>