CSS基础 - 3.14 定位练习-轮播图

最新推荐文章于 2024-03-19 10:15:00 发布

夏赞恩

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量323

点赞数

分类专栏：前端学习文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44714543/article/details/122331734

版权

HTML CSS 轮播图静态页面前端开发

关键词由CSDN通过智能技术生成

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

轮播图效果图
HTML代码
CSS代码

轮播图效果图

将多张图片置于同一位置（下图其实有三张图片），点击轮播按钮进行轮播。本代码所实现的轮播图是个静态页面，还未实现跳转功能。

轮播图按钮是内容为>，<的div元素组成，这里其实用背景图更好。或者直接用按钮元素。
图片下方有蒙层，上面标明的图片的介绍信息等等。

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/轮播图.css">
</head>
<body>
    <div class="banner">
        <div class="imgs">
            <a href=""><img src="./img/1.jpg" alt=""></a>
            <a href=""><img src="./img/2.jpg" alt=""></a>
            <a href=""><img src="./img/3.jpg" alt=""></a>
         </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <div class="modal">
            <div class="title">
                电影不是爱情，你们才是
            </div>
            <div class="dots">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>    
</body>
</html>

CSS代码

.banner{
    width:1000px;
    height:1400px;
    border: 2px solid #333;
    overflow: hidden;/* 溢出隐藏，将多余的图片隐藏起来 */
    position: relative;
    cursor: pointer;    /* 鼠标的指针样式，移动到该地方时，鼠标的箭头变成了小手*/
}
.banner .imgs{
    width: 3100px;
    height:1400px;
    float: left;
}
.banner .imgs img{
    width:1000px;
    height:1400px;   
}
.banner .imgs a{
    float: left;
}
/* .left和.right所具备的统一样式，可以像这样一起写 */
.banner .left,
.banner .right{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    color: red;
    font-size: 3em;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
}
.banner .left:hover,
.banner .right:hover{
    background-color: #e3e4e5;
}
.banner .left{
    left: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.banner .right{
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.banner .modal{  
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, .3);
    color: white;
}
.banner .modal .title{
    float: left;
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
}
.banner .modal .dots{
    float: right;
}
.banner .modal .dots li{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: white;
    display: inline-block;   /* 将圆点变成行块盒，因此不用float元素便可排成一排 */
    margin: 0 10px;
}