HW05-选项卡开发

作业分析

本次使用div+css+Javascrip等标签编写出如下的效果：

选项卡开发最终演示图：

image.png

代码展示入下（使用vscode编辑）

html代码展示如下:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的场景解决方案</title>
    <link rel="stylesheet" href="./demo01.css">
</head>

<body>
    <div class="bg changjing">
        <div class="changjing-bg">
            <div class="content">
                <div class="changjing-title">我们的场景解决方案</div>
                <div class="changjing-nav">
                    <div class="c active">公域获客</div>
                    <div class="c">私域带货</div>
                    <div class="c">直播带货</div>
                    <div class="c">内容交付</div>
                    <div class="c">数字化运营</div>
                    </div>
                <!-- 图文的介绍 -->
                <div class="changjing-mid">
                    <div class="left active">
                    <div class="changjing-left-1">
                        <img src="./img/我们的场景解决方案.webp" alt="">
                    </div>
                    <div class="changjing-right-1">
                        <h3>数据化运营</h3>
                        <h4>
                            全链路数据分析，洞悉经营每一步
                        </h4>
                        <p>公域广告效果精准归因，无缝连接公域私域数据生态</p>
                        <p>直播实时大屏，实时监测直播效果，实时调整运营策略</p>
                        <p>商品交易漏斗全追踪，精准制定销售策略，提升商品售卖效率</p>
                        <p>商品交易漏斗全追踪，精准制定销售策略，提升商品售卖效率</p>
                        <div class="changjing-btn-1">
                            <div>免费试用</div>
                            <div>了解详情</div>
                        </div>
                    </div>
                </div>
                    <!-- 1 -->
                    <div class="left">
                    <div class="changjing-left-2">
                        <img src="./img/私域运营.png" alt="">
                    </div>
                    <div class="changjing-right-2">
                        <h3>私域运营</h3>
                        <h4>
                            精细化运营私域流量，搭建私域增长闭环
                        </h4>
                        <p>实现全场景营销管理，管理全渠道线索，实现全域运营</p>
                        <p>智能分配客户，各渠道线索及时分配，助力团队业绩提升</p>
                        <p>直播用户实时管控、数据查看、营销互动、销售跟进，助力企业 “低转高</p>
                        <div class="changjing-btn-2">
                            <div>免费试用</div>
                            <div>了解详情</div>
                        </div>
                    </div>
                </div>
                    <!-- 2 -->
                    <div class="left">
                    <div class="changjing-left-3">
                        <img src="./img/直播带货.png" alt="">
                    </div>
                    <div class="changjing-right-3">
                        <h3>直播带货</h3>
                        <h4>
                            多行业直播带货解决方案，助力私域客户转化
                        </h4>
                        <p>全平台直播分发引流，通过直播转播/邀请达人榜/渠道活码等能力引流到私域</p>
                        <p>海量营销玩法，支持任务奖励/抽奖/红包/等玩法，配合优惠券/折扣/秒杀/拼团等促销工具</p>
                        <p>多种带货形式，商品卡片/购买气泡/当页购买等方式，提升直播间转化率</p>
                        <p>多维度数据分析，实时带货数据、用户全生命周期的行为数据统计，提高客单价</p>
                        <div class="changjing-btn-3">
                            <div>免费试用</div>
                            <div>了解详情</div>
                        </div>
                    </div>
                </div>
                    <!-- 3 -->
                    <div class="left">
                    <div class="changjing-left-4">
                        <img src="./img/内容交付.png" alt="">
                    </div>
                    <div class="changjing-right-4">
                        <h3>内容交付</h3>
                        <h4>
                            多种内容交付工具，轻松打造高价值课程体系
                        </h4>
                        <p>提供多样化的内容工具，支持专栏、图文、音频、视频、电子书、AI互动课等内容类型</p>
                        <p>支持学考练一体互动式学习，支持题库、打卡、考试、练习、作业本、测试互动、证书等助学工具</p>
                        <p>商支持多终端学习渠道，支持微信生态H5/小程序/PC/APP，满足学员不同场景下的学习诉求</p>
                        <div class="changjing-btn-4">
                            <div>免费试用</div>
                            <div>了解详情</div>
                        </div>
                    </div>
                </div>
                    <!-- 4 -->
                    <div class="left">
                    <div class="changjing-left-5">
                        <img src="./img/数据化运营.png" alt="">
                    </div>
                    <div class="changjing-right-5">
                        <h3>数据化运营</h3>
                        <h4>
                            全链路数据分析，洞悉经营每一步
                        </h4>
                        <p>公域广告效果精准归因，无缝连接公域私域数据生态</p>
                        <p>直播实时大屏，实时监测直播效果，实时调整运营策略</p>
                        <p>商品交易漏斗全追踪，精准制定销售策略，提升商品售卖效率</p>
                        <p>
                            精准洞察用户学情，轻松掌握每位学员在各类课程中的到课率、学习进度及完成情况</p>
                        <div class="changjing-btn-5">
                            <div>免费试用</div>
                            <div>了解详情</div>
                        </div>
                    </div>
                </div>
                    <!-- 5 -->


                </div>
            </div>
        </div>
    </div>
    </div>
</body>
<script>
// 获得所有的标题标签
  let cs = document.getElementsByClassName("c")
  
//   循环给每个标签添加鼠标进入的事件
  for (let i = 0; i < cs.length; i++){

    cs[i].onmouseenter = function(){
        for (let j = 0; j < cs.length; j++){
            cs[i].classList = "c"
        }
        // 高光自己
        cs[i].classList = "c active"

        // 获得所有的内容
        let lefts = document.getElementsByClassName("left")
        // 所有内容全灭
        for(let x  = 0; x < lefts.length; x++){
            lefts[x].classList = "left"
        }
        // 高亮和标题编号对应的内容
        lefts[i].classList = "left active"
    }
  }
    

</script>




</html>

代码展示入下（使用vscode编辑）

html代码展示如下:


/* 小鹅通首页网页样式 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%; 
}
.bg {
    width: 100%;
    display: flex;
    justify-content: center;
}
.content {
    width: 1400px;
}


.changjing-bg {
    width: 100%;
    height: 1000px;
    background: linear-gradient(90deg, #f2fefe, #e2e2f1);
    display: flex;
    justify-content: center;
}

.changjing .content {
    height: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.changjing-title {
    font-size: 48px;
    font-weight: 600;
}

.changjing-nav {
    width: 850px;
    height: 52px;
    border-radius: 25px;
    background-color: #fff;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

.changjing-nav .c{
    width: 130px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.changjing-nav .c:hover {
    background-color: #4872f6;
    color: white;
    border-radius: 25px;
}

.changjing-mid {
    width: 1400px;
    height: 600px;
    border-radius: 10px;
    border: solid 2px #fff;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    position: relative;
}

.changjing-left-1,
.changjing-left-1 img {
    width: 700px;
    height: 600px;
}
.changjing-left-2,
.changjing-left-2 img {
    width: 700px;
    height: 600px;
}
.changjing-left-3,
.changjing-left-3 img {
    width: 700px;
    height: 600px;
}
.changjing-left-4,
.changjing-left-4 img {
    width: 700px;
    height: 600px;
}
.changjing-left-5,
.changjing-left-5 img {
    width: 700px;
    height: 600px;
}

.left {
    width: 700px;
    height: 600px;
    position: absolute; 
    display: none;
}
.left.active {
    display: block;
}
.changjing-right-1,
.changjing-right-2,
.changjing-right-3,
.changjing-right-4,
.changjing-right-5 {
    width: 700px;
    height: 600px;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.changjing-right-1 h3,
.changjing-right-2 h3,
.changjing-right-3 h3,
.changjing-right-4 h3,
.changjing-right-5 h3 {
    font-size: 28px;
}

.changjing-right-1 h4,
.changjing-right-2 h4,
.changjing-right-3 h4,
.changjing-right-4 h4,
.changjing-right-5 h4 {
    font-size: 26px;
    font-weight: 400;
}

.changjing-right-1 p {
    color: gray;
    background-image: url(./img/changjing-logo.png);
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 30px;
}

.changjing-right-1 .changjing-btn-1 {
    display: flex;
    gap: 30px
}
.changjing-right-2 .changjing-btn-2 {
    display: flex;
    gap: 30px
}
.changjing-right-3 .changjing-btn-3 {
    display: flex;
    gap: 30px
}
.changjing-right-4 .changjing-btn-4 {
    display: flex;
    gap: 30px
}
.changjing-right-5 .changjing-btn-5 {
    display: flex;
    gap: 30px
}

.changjing-right-1 .changjing-btn-1 div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}
.changjing-right-2 .changjing-btn-2 div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}.changjing-right-3 .changjing-btn-3 div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}.changjing-right-4 .changjing-btn-4 div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}.changjing-right-5 .changjing-btn-5 div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
}

.changjing-right-1 .changjing-btn div:nth-of-type(1) {
    background-color: #4872f6;
    color: white;
}

.changjing-right-1 .changjing-btn div:nth-of-type(2) {
    background-color: #fff;
    color: #4872f6;
}
.changjing-right-1 .changjing-btn div:nth-of-type(2):hover {
    background-color: #4872f6;
    color: white;
}

HW05-选项卡开发

推荐阅读更多精彩内容