定位3: 轮播图

guai_guai_guai

已于 2023-11-12 17:40:41 修改

阅读量63

点赞数

分类专栏： # 前端知识总结文章标签：前端 html5 css html

于 2023-11-10 21:06:58 首次发布

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134339454

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天我们就继续练习定位吧！

首先还是创建重置文件以及轮播图.css

接着就创建html文件：先创建一个类名为banner（轮播图常用类名）的div盒子，这个盒子的大小只是展现出来的图片大小

这几张图片横向依次放置，所有图片均放置在一个类名为imgs的div盒子里，这时就要设置div的宽度以及高度，宽高由图片决定（宽为所有图片横向排列时的总宽），图片也有宽高，在这里我们就先以三张图片为例，定宽高后，调整banner的位置水平居中，因为已经定宽，所以可以用margin来设置左右居中（margin：1em auto），接着在创建一个类名imgs的div盒子，再写三个a元素，每个a元素里都有一张图片，再根据规定轮播图区域的宽高设置每张图片的宽高（平分）。此时的图片为竖直分布，

对a元素浮动设置问题

此时就要对a元素进行浮动设置，这里要注意imgs的宽度必须得精准控制，和三张图片的总宽相同，否则会因为宽度不够，被迫导致图片换行。但未设置浮动之前效果是这样的：

我们发现精准设置宽高后图片还是会换行，是因为a元素是行级元素，写a元素代码时，每个a元素之间用回车隔开，会发生空白折叠现象，导致图片与图片之间有一定距离，这样会导致最后一张图片区域不够而而被迫换行，如果将a元素浮动，a元素就会变成块盒，此时不会发生空白折叠。

设置a元素浮动之后，就达到了我们想要的效果

溢出部分隐藏

此时的图片超出了banner（只显示一张图片）的宽度，溢出部分默认显示，我们想要制作出只展示一张图片的效果，所以我们给banner设置溢出隐藏，即overflow：hidden这时就会只只展示出一张照片，如果想展示出下一张图片，这是通过js将imgs属性设置为margin-left：XXpx（一张图片的宽度）

接下来我们设置以下右箭头的样式

我们在banner中添加两个div来放置左右箭头，类名分别为left和right（左箭头：&lt；右箭头：&gt），我们发现，它和图片之间有重叠，这时就要精准定位，设置left以及right绝对定位，接着设置父元素为相对定位，分别设置调整左右箭头相对于图片的位置，垂直居中（top，bottom均为0，上下margin为auto）将垂直居中放在left和right共有的位置上，之后是字体大小，文字水平居中，注意刚开始（鼠标未移入）文字颜色，背景，之后设置鼠标移入后的颜色以及文字颜色，以及圆角边框（border-radius：50%，注意设置在统一（left和right）样式里），然后是里面的文字相对于圆角边框垂直居中（linne-height：left高度）显示（这里的垂直居中和我之前说的垂直居中不一样喔，我之前说的垂直居中在是整体left和right在图片里垂直居中），以及鼠标样式（cursor：pointer）

.banner{
    width:520px ;
    height: 304px;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
}
.banner .imgs{
    width: 1560px;
    height: 304px;
}
.banner .imgs img{
    width: 520px;
    height: 304px;

}
.banner .imgs a{
    float: left;
}
 .banner .left,
.banner .right{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    font-size: 3em;
    text-align: center;
    font-family: Arial;
    border-radius: 50%;
    line-height: 50px;
    cursor: pointer;
} 
 .banner .left:hover,
.banner .right:hover{
    background-color: #fff;
    color: red;

}
.banner .left{
    left: 20px;
}
.banner .right{
    right: 20px;
}

接着再注意观察图片下方一小行文字以及多个圆点，以及黑边蒙层（遮罩层）

蒙层效果

首先我们先制作蒙层效果，这里蒙层一定也是绝对定位，这时添加一个类名为modal的div，宽度撑满（width：100%），高度适宜，之后设置蒙层为绝对定位元素，他的父元素banner已经是相对定位了，这事就不需要再设置了（再设置箭头位置时，已经将banner设置为相对定位了），设置其位置靠下靠左为0，以及rgba

黑色半透明即可，蒙层里又有靠左靠右的内容，靠左为类名为title的div，靠右为类名为dots的div这里靠左靠右自然就会想到浮动元素，接着设置文字的行高居中（line-height），左右内边距（padding:0 20px），设置左右内边距的时候会增大蒙层区的宽度（宽度设置的是内容区的宽度），因此需要加上box-sizing：border-box，再设置字体加粗等样式。

ul元素横向排列方法

右边的三个点可以用列表元素ul li设置，设置宽度高度，这时它们是纵向排列，用浮动将其横向排列，注意此时要考虑高度坍塌问题，ul高度自动，之前使用浮动元素时并未考虑高度坍塌问题，原因是因为设置浮动时他们的高度已经确定，并不是自适应，故不用设置clearfix解决高度坍塌问题，这里也可以用行块盒解决纵向排列问题，行块盒能够自动适应行高，这里我们就用行块盒吧，设置li 的display为inline-block，接着设置适宜左右外边距，圆形（border-radius：50%）然后设置li背景颜色，设置鼠标样式等；接着设置hover样式：背景颜色。轮播图差不多就制作完成喽

整体代码及效果

<!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="./css/reset.css">
    <link rel="stylesheet" href="./css/轮播图.css">
</head>
<body>
    <div class="banner">
        <div class="imgs clearfix">
            <a href=""><img src="./轮播图.png" alt=""></a>
            <a href=""><img src="./轮播图2.jpg" alt=""></a>
            <a href=""><img src="./轮播图3.jpg" alt=""></a>
        </div>
         <div>
            <div class="left">&lt;</div>
            <div class="right">&gt</div>
        </div> 
        <div class="modal">
            <div class="title">
                <h6>新闻联播</h6>
            </div>
            <div class="dots clearfix">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div> 
    </div>
</body>
</html>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.banner{
    width:520px ;
    height: 304px;
    margin: 1em auto;
    overflow: hidden;
    position: relative;
}
.banner .imgs{
    width: 1560px;
    height: 304px;
}
.banner .imgs img{
    width: 520px;
    height: 304px;

}
.banner .imgs a{
    float: left;
}
 .banner .left,
.banner .right{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #fff;
    font-size: 3em;
    text-align: center;
    font-family: Arial;
    border-radius: 50%;
    line-height: 50px;
    cursor: pointer;
} 
 .banner .left:hover,
.banner .right:hover{
    background-color: #fff;
    color: red;

}
.banner .left{
    left: 20px;
}
.banner .right{
    right: 20px;
}
.banner .modal{
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    bottom: 0;
    left: 0;
    position: absolute;
    font-size: 2em;
    color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
}
.banner .modal .title{
    float: left;
    font-weight: bold;
}
.banner .modal .dots{
float: right;
}
.banner .modal .dots li{
    width: 10px;
    height: 10px;
    /* float: left; */
    background-color:#ccc;
    display: inline-block;
    margin: 0 2px;
    border-radius: 50%;
    cursor: pointer;
    
}
.banner .modal .dots li:hover{
    background-color: #369;
}

效果图：