css3 定位，字体图标，flex布局综合案例之轮播图

章小絮

已于 2024-03-24 23:47:36 修改

阅读量307

点赞数 6

分类专栏： HTML和CSS学习文章标签： css3 css 前端

于 2024-03-13 20:34:04 首次发布

本文链接：https://blog.csdn.net/qq_66318904/article/details/136690626

版权

HTML和CSS学习专栏收录该内容

9 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何通过简单的HTML和CSS代码创建一个带有鼠标滑过显示箭头功能的轮播图，包括使用定位和flex布局来控制箭头和圆点的位置。

摘要由CSDN通过智能技术生成

先用简单的html和css实现轮播图的效果，比如鼠标滑过显示箭头。并且运用定位和flex摆放箭头和圆圈的位置。虽然看起来很简单，但也有很多要学习的地方。

以下是源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .banner{
            position: relative;
            margin: 100px auto;
            width: 564px;
            height: 315px;