css学习2：定位、轮播图、元素显示与隐藏_轮播图隐藏旁边图片

最新推荐文章于 2025-05-29 17:01:20 发布

2401_89722475

最新推荐文章于 2025-05-29 17:01:20 发布

阅读量128

点赞数 2

文章标签： css 学习前端

本文链接：https://blog.youkuaiyun.com/2401_89722475/article/details/144599508

版权

在这里插入图片描述

2. 综合案例（淘宝轮播图）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 \* {
 margin: 0;
 padding: 0;
 }

 li {
 list-style: none;
 }

 .tb-promo {
 /\* 子绝父相 \*/
 position: relative;
 width: 577px;
 height: 433px;
 background-color: pink;
 /\* 相对定位和标准流一样可以用margin，但是绝对定位和固定定位不行 \*/
 margin: 100px auto;
 }

 .tb-promo img {
 width: 577px;
 height: 433px;
 }

 /\* 并集选择器 \*/
 .prev,
 .next {
 /\* 加了绝对定位的盒子可以直接设置高度和宽度 \*/
 position: absolute;
 /\* 垂直居中 \*/
 top: 50%;
 margin-top: -15px;
 width: 20px;
 height: 30px;
 background: rgba(0, 0, 0, .3);
 text-align: center;
 line-height: 30px;
 color: #fff;
 text-decoration: none;
 }

 .prev {
 left: 0;
 /\* 修改圆角 \*/
 border-top-right-radius: 15px;
 border-bottom-right-radius: 15px;
 }

 .next {
 /\* 小细节：如果一个盒子既有left属性又有right属性，则默认会执行left，top和bottom会执行top \*/
 right: 0;
 /\* 修改圆角 \*/
 border-top-left-radius: 15px;
 border-bottom-left-radius: 15px;
 }

 .promo-nav {
 position: absolute;
 /\* 水平居中 \*/
 left: 50%;
 margin-left: -35px;
 bottom: 15px;
 width: 70px;
 height: 13px;
 background-color: rgba(255, 255, 255, .3);
 border-radius: 7px;
 }

 .promo-nav li {
 float: left;
 width: 8px;
 height: 8px;
 background-color: #fff;
 border-radius: 50%;
 margin: 3px;
 }

 /\* 不要忘记选择器权重的问题 \*/
 .promo-nav .selected {
 background-color: #ff5000;
 }
 </style>
</head>

<body>
    <div class="tb-promo">
        <img src="images/mao.jpg" alt="">
        <!-- 左侧按钮 -->
        <a href="#" class="prev">&lt;</a>
        <!-- 右侧按钮 -->
        <a href="#" class="next">&gt;</a>
        <!-- 下方小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

在这里插入图片描述

3. 网页布局总结

在这里插入图片描述

4. 元素的显示与隐藏

在这里插入图片描述

在这里插入图片描述
例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 .tudou {
 position: relative;
 width: 577px;
 height: 433px;
 background-color: pink;
 margin: 30px auto;
 }

 .tudou img {
 width: 100%;
 height: 100%;
 }

 .mask {
 /\* 隐藏遮罩层 \*/
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, .4) url(logo.jpg) no-repeat center;
 }

 /\* 当鼠标经过了.tudou 这个盒子就让里面遮罩层显示出来 \*/
 .tudou:hover .mask {
 display: block;
 }
 </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/mao.jpg" alt="">
    </div>
</body>

</html>