一、引入图标字体

图标字体（iconfont）

网页中会有很多小的图片，例如，购物车，小箭头，定位等，

这些内容可以直接用图片代替，但图片一般都是比较大的，而且修改起来也不方便

所以可以直接使用图标字体，把它们就当成字体，可以用字体相关的样式，去修改

图标字体，例如可以改变大小，颜色。

图标字体在一些大的框架系统里，或者一些大的网站，很多大牛都已经归纳好，那我们

直接使用即可，使用的方式方法大同小异。

目前只要掌握一到两个网站即可

阿里巴巴矢量图标库 https://www.iconfont.cn/

使用图标库

第一步：选择你需要的图标

第二步：将你选中图标对应的css文件引入到你的html文件当中

css文件可以线上版本，也可以下载下来，引入线下版本

第三步：在结构中可以通过不同的使用方式，显示在页面中

第一种方式转义字符形式 &实体的名字;

注意：一定要加公有的iconfont类名

第二种方式类名形式（常用）

第三种方式伪类（了解）

二、层级

知识点1:z-index

如果希望一个元素盖住另一个元素，那么我们就可以提高元素的层级

使用z-index样式，样式值：是一个正整数，值越大，层级越高，越能够显示在最上面

注意点：

1、z-index，默认值是0

2、z-index的使用前提是必须开启定位

3、父元素的层级再高，也不会盖住子元素

知识点2:opacity 设置元素的透明度

样式值：0-1之间，0是透明，1是不透明

rgba也可以设置透明度

transparent 可以设置透明效果

opacity、rgba、transparent的区别

1、 opacity是样式名，通过样式值的不同设置透明效果

rgba、transparent是样式值，必须跟在特定的样式名后，才可以设置透明效果

2、opacity可以给任何元素设置透明效果，就像在元素前面加一个模糊镜子一样

rgba、transparent只能给背景色，颜色等特定的元素设定

3、opacity具有继承性，rgba、transparent不具有继承

三、轮播图

手写轮播图两种写法（结合js）

1、float

2、定位方式

3、 swiper插件一种写法（会引用，会修改即可）

<!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="./swiper/swiper-bundle.css"><style>.swiper{width: 750px;height: 450px;margin: 50px auto;}.swiper-pagination-bullet{background-color: rgb(220, 25, 51);width: 20px;height: 20px;}</style>
</head>
<body><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./focus.jpg" alt=""></div><div class="swiper-slide"><img src="./focus.jpg" alt=""></div><div class="swiper-slide"><img src="./focus.jpg" alt=""></div ></div><div class="swiper-pagination"></div></div><script src="./swiper/swiper-bundle.js"></script><script>var mySwiper = new Swiper(".swiper", {loop: true, effect: 'cards',pagination: {el: ".swiper-pagination",clickable :true,},});</script>
</body>
</html>

关于轮播图的简单介绍相关推荐

qq音乐（轮播图）详细介绍
目录 QQ音乐出续集了啊小伙伴们! 下面说一下这三块分别是怎么设置的额外一些细节的修改: 接下来展示一下我的代码部分 css样式 html代码 js代码: 今日金句 QQ音乐出续集了啊小伙伴 ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
js实现轮播图（简单滚动轮播)
原理: 在页面上有一个可视区域(a),用来显示图片,还有一个放所有需要轮播的图片的区域(b) ,当执行操作时 ,b需要移动 ,移动一个a的宽度,使下一张图片显示, 需要实现一下效果: 1.自动播放 2 ...
用jQuery实现轮播图——超简单(代码解释)
先看效果鼠标悬浮时停止轮播,离开时自动轮播,点下一张小圆点会随着动直接上代码 <!DOCTYPE html> <html><head><meta char ...
老徐WEB：最简单详细的轮播图原理和制作过程（一）
老徐利用空闲时间,制作了一个最简单的轮播图,主要介绍轮播图的原理和制作过程,只要大家能认真看完这篇文章,并理解文中内容,就能完全掌握轮播图的制作了.之后工作中碰到复杂的轮播图,自己也能思考制作出来了. ...
JS实现轮播图的三种简单方法。
Js实现轮播图01 实现思路这可能是轮播图最简单点的实现之一,通过更改图片的src来实现该效果,首先需要将图片命名格式统一比如pic01.jpg,pic02.jpg-,再通过js使用定时器去改变im ...
css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...

关于轮播图的简单介绍

一、引入图标字体

二、层级

opacity、rgba、transparent的区别

三、轮播图

关于轮播图的简单介绍相关推荐

最新文章

热门文章