css学习2：定位、轮播图、元素显示与隐藏_轮播图隐藏旁边图片，React面试题总结对象篇模块化编程-自研模块加载器

对象篇

模块化编程-自研模块加载器

开源分享：docs.qq.com/doc/DSmRnRG… 子绝父相
在这里插入图片描述

例如：

在这里插入图片描述

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;
 }



**对象篇**

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fadfa34c35fc43b09a374cca274cd4bf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920355&x-signature=yH8kQwDBlfpY3xkPRb5W5iLIc1w%3D)

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/851cabda7a2f40bba1b7e9d5bf8391d5~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920355&x-signature=3ipuKIY%2FaSonLdpwMKNjtj54CQI%3D)

**模块化编程-自研模块加载器**



![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3fab45721cf2428d88c2ed310a208881~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920355&x-signature=6BgyZ2cKqZHVhqjUnXdmWE3ad3w%3D)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**

![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/20f6e2d8ebc84f238c7b6821f6ae409e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771920355&x-signature=6ALLrkuhSip3Dc1BNv%2BTH%2BdKHG8%3D)