Icodethis挑战：30-Day Roadmap 之 Basics-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73883323/article/details/143171897

Day01-Basics

实现样版

在这里插入图片描述

思路

三个按钮TYPOGRAPHY、HEADINGS、COLORS，点击按钮进行三个部分的切换（类似👇）
在这里插入图片描述

实现

1. HTML

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="body">
        <!--  三个点击按钮，用于控制盒子显示/隐藏 -->
        <button class="btnStyle showTyp btn">TYPOGRAPHY</button>
        <button class="btnStyle showHead btn">HEADINGS</button>
        <button class="btnStyle showColor btn">COLORS</button>
        <!-- typography盒子 -->
        <div class="typography selectBox">
            <p style="font-weight:bold">Make me bold</p>
            <p style="font-style:italic">Make me italic</p>
            <p style="font-family:Arial">I'm from the Arial font family!</p>
            <p style="font-family: Times New Roman">And I'm from the Times Roman font family!</p>
            <p style="text-decoration: underline">Make this text underline</p>
            <p style="text-decoration-line: line-through">And put a line throung this one</p>
        </div>
        <!-- headings盒子 -->
        <div class="headings selectBox">
            <h1>This is a h1 tag</h1>
            <h2>This is a h2 tag</h2>
            <h3>This is a h3 tag</h3>
        </div>
        <!-- colors盒子 -->
        <div class="colors selectBox">
            <div class="colorBox">
                <p style="Color:orange">Color me orange!</p>
                <div class="orangeBlock"></div>
            </div>
            <div class="colorBox">
                <p style="Color:purple">Color me purple!</p>
                <div class="purpleCircle"></div>
            </div>
        </div>
    </div>
</body>

</html>

2. CSS样式

/* 总体样式 */
.body {
    width: 450px;
    margin: 15px auto;
}

div {
    margin: 30px 0;
}
/* 选择盒 */
.selectBox {
    padding: 10px;
    display: none;
    border: 3px dotted black;
    border-radius: 10px;
}

/* 按钮样式 */
.btn {
    width: 130px;
    height: 50px;
    background-color: rgb(70, 33, 171);
    border-radius: 5px;
    font-weight: bold;
    font-family: Arial;
    color: white;
}

.btn:hover {
    background-color: rgb(134, 108, 220);
}

.btn:active {
    background-color: rgb(207, 196, 241);
}


/* 颜色盒样式 */
.colorBox {
    width: 150px;
    margin: 0 auto;
}

.orangeBlock {
    width: 100px;
    height: 100px;
    display: inline-block;
    cursor: pointer;
    border: 1px dotted black;
}

.orangeBlock:active {
    background-color: orange;
}

.purpleCircle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    border: 1px dotted black;
}

.purpleCircle:active {
    background-color: purple;
}

3. JS逻辑

const typBlock = document.querySelector(".typography")
const headBlock = document.querySelector(".headings")
const colorBlock = document.querySelector(".colors")

const showTyp = document.querySelector(".showTyp")
const showHead = document.querySelector(".showHead")
const showColor = document.querySelector(".showColor")

showTyp.addEventListener('click', () => {
 closeAllBlock()
 typBlock.style.display = "block"
})

showHead.addEventListener('click', () => {
 closeAllBlock()
 headBlock.style.display = "block"
})

showColor.addEventListener('click', () => {
 closeAllBlock()
 colorBlock.style.display = "block"
})

const closeAllBlock = function () {
 colorBlock.style.display = "none"
 headBlock.style.display = "none"
 typBlock.style.display = "none"
}