第六章元素应用CSS

标签：color border 元素 padding width 第六章 font margin CSS

1.使用CSS设置字体样式

在CSS中设置字体样式可以通过多种属性来实现。以下是一些常用的字体样式属性及其用法：

基本字体样式

css

body {

    font-family: 'Arial', sansserif; / 字体类型 /

    font-size: 16px; / 字体大小 /

    font-weight: normal; / 字体粗细: normal, bold, bolder, lighter, 或数值 /

    font-style: normal; / 字体样式: normal, italic, oblique /

    text-decoration: none; / 文本装饰: none, underline, linethrough, overline /

    color: 333333; / 字体颜色 /

}

示例

html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF8">

    <meta name="viewport" content="width=devicewidth, initialscale=1.0">

    <title>字体样式示例</title>

    <style>

        body {

            font-family: 'Arial', sansserif;

            font-size: 16px;

            font-weight: normal;

            font-style: normal;

            text-decoration: none;

            color: 333333;

        }

        h1 {

            font-size: 24px;

            font-weight: bold;

            color: 1a1a1a;

        }



        p {

            font-size: 14px;

            font-style: italic;

        }



        a {

            color: blue;

            text-decoration: underline;

        }

    </style>

</head>

<body>

    <h1>欢迎来到我的网站</h1>

    <p>这是一个示例段落。</p>

    <a href="">这是一个链接</a>

</body>

</html>

常用字体属性解释

font-family: 指定字体。可以使用多个字体作为后备。

font-size: 指定字体大小，可以使用 px、em、rem 等单位。

font-weight: 设置字体粗细，常见值包括 normal, bold, bolder, lighter，或数值（100到900）。

font-style: 设置字体样式，常见值有 normal, italic, oblique。

text-decoration: 设置文本装饰，如下划线或删除线。

color: 设置字体颜色，可以使用十六进制、RGB 或命名颜色。

可以根据需要自由组合这些属性，创建出适合你网页的字体样式。

2.使用CSS设置文本样式

在CSS中设置字体样式可以通过多种属性来实现。以下是一些常用的字体样式属性及其用法：

基本字体样式

css

body {

    font-family: 'Arial', sans-serif; / 字体类型 /

    font-size: 16px; / 字体大小 /

    font-weight: normal; / 字体粗细: normal, bold, bolder, lighter, 或数值 /

    font-style: normal; / 字体样式: normal, italic, oblique /

    text-decoration: none; / 文本装饰: none, underline, line-through, overline /

    color: 333333; / 字体颜色 /

}

示例

html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字体样式示例</title>

    <style>

        body {

            font-family: 'Arial', sans-serif;

            font-size: 16px;

            font-weight: normal;

            font-style: normal;

            text-decoration: none;

            color: 333333;

        }



        h1 {

            font-size: 24px;

            font-weight: bold;

            color: 1a1a1a;

        }



        p {

            font-size: 14px;

            font-style: italic;

        }



        a {

            color: blue;

            text-decoration: underline;

        }

    </style>

</head>

<body>

    <h1>欢迎来到我的网站</h1>

    <p>这是一个示例段落。</p>

    <a href="">这是一个链接</a>

</body>

</html>

常用字体属性解释

font-family: 指定字体。可以使用多个字体作为后备。

font-size: 指定字体大小，可以使用 px、em、rem 等单位。

font-weight: 设置字体粗细，常见值包括 normal, bold, bolder, lighter，或数值（100到900）。

font-style: 设置字体样式，常见值有 normal, italic, oblique。

text-decoration: 设置文本装饰，如下划线或删除线。

color: 设置字体颜色，可以使用十六进制、RGB 或命名颜色。

可以根据需要自由组合这些属性，创建出适合你网页的字体样式。

3.使用CSS设置图像样式

使用CSS设置图像样式可以帮助你控制图像的外观和布局。以下是一些常用的CSS属性和示例：

基本图像样式

css

img {

    max-width: 100%; / 设置最大宽度，避免图像超出容器 /

    height: auto; / 自动调整高度，保持图像比例 /

    border: 2px solid 000; / 添加边框 /

    border-radius: 8px; / 圆角边框 /

    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); / 添加阴影 /

    display: block; / 将图像设置为块级元素，消除下方空隙 /

    margin: 0 auto; / 水平居中对齐 /

}

示例

html



<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>图像样式示例</title>

    <style>

        img {

            max-width: 100%;

            height: auto;

            border: 2px solid 000;

            border-radius: 8px;

            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

            display: block;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <h1>我的图片展示</h1>

    <img src="https://via.placeholder.com/400" alt="示例图像">

    <p>这是一个示例图像，展示了如何使用CSS设置图像样式。</p>

</body>

</html>

常用图像属性解释

max-width: 设置图像的最大宽度，通常用于响应式设计。

height: 可以设置为 auto 以保持图像的原始比例。

display: 设置为 block 可以消除图像下方的空隙，并将其作为块级元素显示。

margin: 可以用来居中图像或设置图像与其他元素之间的间距。

width: 设置图像宽度，可以使用百分比、像素等单位。

height: 设置图像高度，通常设置为 auto 以保持比例。

border: 添加边框，设置边框样式、宽度和颜色。

border-radius: 设置圆角效果，使图像边缘更平滑。

box-shadow: 添加阴影效果，增强图像立体感。

object-fit: 控制图像的填充方式（如 cover, contain, fill）。

可以根据具体需求，组合这些属性，来创建吸引人的图像样式。

4.使用CSS设置表单样式

使用CSS可以美化表单的外观。以下是一些常用的表单样式设置及示例：

基本表单样式

css

form {

    max-width: 400px; / 最大宽度 /

    margin: auto; / 居中 /

    padding: 20px; / 内边距 /

    border: 1px solid ccc; / 边框 /

    border-radius: 8px; / 圆角边框 /

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); / 阴影效果 /

    background-color: f9f9f9; / 背景颜色 /

}



label {

    display: block; / 标签占一行 /

    margin-bottom: 8px; / 标签与输入框间距 /

    font-weight: bold; / 标签加粗 /

}



input[type="text"],

input[type="email"],

input[type="password"],

textarea {

    width: 100%; / 100% 宽度 /

    padding: 10px; / 内边距 /

    margin-bottom: 12px; / 输入框间距 /

    border: 1px solid ccc; / 边框 /

    border-radius: 4px; / 圆角 /

    font-size: 16px; / 字体大小 /

}



input[type="submit"] {

    background-color: 4CAF50; / 按钮背景色 /

    color: white; / 按钮文字颜色 /

    border: none; / 无边框 /

    padding: 10px 15px; / 内边距 /

    border-radius: 4px; / 圆角 /

    cursor: pointer; / 鼠标指针 /

    font-size: 16px; / 字体大小 /

}



input[type="submit"]:hover {

    background-color: 45a049; / 悬停效果 /

}

示例

html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>表单样式示例</title>

    <style>

        / 上述 CSS 样式在此处 /

    </style>

</head>

<body>

    <form action="" method="post">

        <label for="name">姓名:</label>

        <input type="text" id="name" name="name" required>



        <label for="email">邮箱:</label>

        <input type="email" id="email" name="email" required>



        <label for="password">密码:</label>

        <input type="password" id="password" name="password" required>



        <label for="message">留言:</label>

        <textarea id="message" name="message" rows="4" required></textarea>



        <input type="submit" value="提交">

    </form>

</body>

</html>

常用表单属性解释

max-width: 限制表单的最大宽度。

margin: 用于居中表单。

padding: 控制内边距，使内容与边框有一定距离。

border: 设置边框样式。

border-radius: 使边框圆滑。

box-shadow: 添加阴影效果，使表单看起来更立体。

display: block: 使标签和输入框占用整行，增强可读性。

cursor: pointer: 当鼠标悬停在按钮上时，指针会变成手形，表示可点击。

通过这些样式，可以让表单更加美观和易用。可以根据需要进行调整和扩展。

5.综合案例--商城的注册页面

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员注册</title>
    <link rel="stylesheet" href="6.1.textcss.css" type="text/css"/>
</head>
<body style="background: #fff;">
    <div class="loginLogo">
        <div class="logoMid">
            <h1 class="logo">
                <a href="index.html">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Logo"/>
                </a>
            </h1>
            <div class="loginBox">
                <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="295" height="393" class="chengnuo" alt="Chengnuo"/>
                <form action="#.html" method="get" class="reg">
                    <div class="regList">
                        <label><span class="red">*</span>用户名</label>
                        <input type="text" name="username" placeholder="请输入邮箱/用户名/手机号" required/>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>请设置密码</label>
                        <input type="password" name="password" required/>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>请确认密码</label>
                        <input type="password" name="confirm_password" required/>
                    </div>
                    <div class="regList">
                        <label><span class="red">*</span>验证码</label>
                        <input type="text" class="yanzheng" name="captcha" required/>
                        <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" width="103" height="38" alt="验证码"/>
                    </div>
                    <div class="xieyi">
                        <input type="checkbox" name="agreement" required/>
                        我已经阅读并同意<a href="#">商城用户注册协议</a>
                    </div>
                    <div class="reg">
                        <input type="submit" value="注册" />
                    </div>
                </form>
                <div class="clears"></div>
            </div>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    font-size: 12px;
    color: #333;
}
ol,ul{
    list-style: none;
}
img,a{
    border: 0;
    text-decoration: none;
}
a{
    color: #333;
}
a:hover{
    color: #f00;
}
.loginLogo{
    width: 100%;
    border-bottom: #efefef 1px solid;
}
.logoMid{
    width: 1040px;
    margin: 0 auto;
}
.loginReg{
    height: 30px;
    line-height: 30px;
    text-align: right;
}
.loginReg a{
    color: #7bc144;
}
.loginReg a:hover{
    color: #f00;
}
.loginBox{
    width: 1050px;
    margin: 30px auto;
    position: relative;
}
.regList{
    height: 35px;
    line-height: 35px;
}
.regList label{
    float: left;
    width: 105px;
    margin-right: 10px;
    text-align: right;
    color: #999;
}
.regList input{
    margin: 0;
    padding: 0;
    width: 283px;
    height: 33px;
    border: 3738400 1px solid;
    background: #feffdf;
    padding-left: 3px;
}
.regList .yanzheng{
    width: 135px;
}
.regList img{
    left: 260px;
    position: absolute;
}
.xieyi{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 115px;
}
.xieyi input{
    position: relative;
    top: 2px;
}
.xieyi a{
    color: #7bc144;
}
.reg{
    padding-left: 115px;
    margin-top: 10px;
}
.chengnuo{
    position: absolute;
    right: 0;
    top: 0;
}

本章习题

习题一

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Website with Features</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #30ad43;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        header img {
            height: 40px;
            margin-right: 10px;
        }

        nav {
            display: flex;
            justify-content: space-around;
            background-color: #33a46f;
            padding: 15px;
            color: white;
        }

        .main-content {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .main-content .search {
            width: 70%;
        }

        .main-content .ads {
            width: 25%;
        }

        .search-box {
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .search-box h2 {
            margin-bottom: 20px;
        }

        .search-box input,
        .search-box select {
            padding: 10px;
            margin: 10px 0;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .ads img {
            width: 100%;
            border-radius: 10px;
        }

        /* Slideshow/Banner Section */
        .slideshow-container {
            max-width: 100%;
            position: relative;
            margin: auto;
            margin-bottom: 20px;
        }

        .slides {
            display: none;
        }

        .slides img {
            width: 100%;
            height: 400px;
            object-fit: cover;
        }

        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
        }

        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Cards Section */
        .cards-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }

        .card {
            background-color: #fff;
            width: 30%;
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            text-align: center;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-10px);
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card h3 {
            padding: 15px;
        }

        .card p {
            padding: 0 15px;
        }

        .footer {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Logo">
        <h1>Travel Website</h1>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">Flights</a>
        <a href="#">Hotels</a>
        <a href="#">Tours</a>
        <a href="#">Cars</a>
    </nav>

    <!-- Slideshow/Banner Section -->
    <div class="slideshow-container">
        <div class="slides">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Slide 1">
        </div>
        <div class="slides">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Slide 2">
        </div>
        <div class="slides">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Slide 3">
        </div>

        <!-- Next and Previous buttons -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>

    <!-- Cards Section -->
    <div class="cards-container">
        <div class="card">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Destination 1">
            <h3>Paris</h3>
            <p>Discover the magic of Paris, the city of love and lights.</p>
        </div>
        <div class="card">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Destination 2">
            <h3>New York</h3>
            <p>Experience the fast-paced life of the Big Apple.</p>
        </div>
        <div class="card">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Destination 3">
            <h3>Tokyo</h3>
            <p>Explore the neon-lit streets of Tokyo, Japan's capital city.</p>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <p>&copy; 2024 Travel Website. All Rights Reserved.</p>
    </footer>

    <script>
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            let slides = document.getElementsByClassName("slides");
            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) { slideIndex = 1; }
            slides[slideIndex - 1].style.display = "block";
            setTimeout(showSlides, 3000); // Change image every 3 seconds
        }

        function plusSlides(n) {
            slideIndex += n;
            let slides = document.getElementsByClassName("slides");
            if (slideIndex < 1) { slideIndex = slides.length; }
            if (slideIndex > slides.length) { slideIndex = 1; }
            showSlides();
        }
    </script>
</body>
</html>

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #30ad43;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        header img {
            height: 40px;
            margin-right: 10px;
        }

        nav {
            display: flex;
            justify-content: space-around;
            background-color: #33a46f;
            padding: 15px;
            color: white;
        }

        .main-content {
            display: flex;
            justify-content: space-between;
            padding: 20px;
        }

        .main-content .search {
            width: 70%;
        }

        .main-content .ads {
            width: 25%;
        }

        .search-box {
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .search-box h2 {
            margin-bottom: 20px;
        }

        .search-box input,
        .search-box select {
            padding: 10px;
            margin: 10px 0;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .ads img {
            width: 100%;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <header>
        <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Logo">
        <h1>Travel Website</h1>
    </header>

    <nav>
        <a href="#">Home</a>
        <a href="#">Flights</a>
        <a href="#">Hotels</a>
        <a href="#">Tours</a>
        <a href="#">Cars</a>
    </nav>

    <div class="main-content">
        <div class="search">
            <div class="search-box">
                <h2>Flight Search</h2>
                <input type="text" placeholder="Departure City">
                <input type="text" placeholder="Arrival City">
                <input type="date" placeholder="Departure Date">
                <input type="date" placeholder="Return Date">
                <button>Search</button>
            </div>
        </div>
        <div class="ads">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="Ad">
        </div>
    </div>
</body>
</html>

习题二

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国青年志愿者</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
        header {
            background: #fff;
            border-bottom: 2px solid #ccc;
            padding: 20px 0;
        }
        
        .header-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            margin: auto;
        }
        
        .logo {
            height: 60px;
        }
        
        h1 {
            font-size: 24px;
            color: #333;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }
        
        nav ul li {
            margin-right: 20px;
        }
        
        nav ul li a {
            text-decoration: none;
            color: #000;
            font-weight: bold;
        }
        
        .main-banner {
            position: relative;
            text-align: center;
        }
        
        .main-banner img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        
        .banner-text {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.7);
            padding: 10px;
            border-radius: 5px;
        }
        
        .content {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            width: 90%;
            margin: auto;
        }
        
        .left, .right {
            width: 48%;
        }
        
        .left ul {
            list-style: none;
            padding: 0;
        }
        
        .left ul li {
            margin-bottom: 10px;
        }
        
        .left ul li a {
            text-decoration: none;
            color: #007BFF;
        }

        /* Image carousel styles */
        .carousel {
            position: relative;
            overflow: hidden;
            height: 200px;
        }

        .carousel img {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .carousel img.active {
            opacity: 1;
        }

        /* Navigation buttons */
        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
            border: none;
            font-size: 18px;
            z-index: 10;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        /* Dots container */
        .dots {
            text-align: center;
            position: absolute;
            bottom: 10px;
            width: 100%;
        }

        .dots span {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
        }

        .dots span.active {
            background-color: #333;
        }
        
        footer {
            background: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
    </style>
</head>    
<body>
    <header>
        <div class="header-container">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="中国青年志愿者" class="logo">
            <h1>中国青年志愿者</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">志愿组织</a></li>
                <li><a href="#">志愿项目</a></li>
                <li><a href="#">志愿文化</a></li>
                <li><a href="#">志愿人才</a></li>
                <li><a href="#">志愿服务</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="main-banner">
            <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="横幅">
            <div class="banner-text"> 
                <h2>挺膺担当,在进一步深化改革,推进中国式现代化...</h2>
            </div>
        </section>

        <section class="content">
            <div class="left">
                <h2>图片轮播</h2>
                <div class="carousel">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="图片1" class="active">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="图片2">
                    <img src="4465CAF7A217F1A5103C23623BE7CD18.jpg" alt="图片3">
                    <button class="prev">&#10094;</button>
                    <button class="next">&#10095;</button>
                    <div class="dots">
                        <span class="active"></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>

            <div class="right">
                <h2>国际新闻</h2>
                <ul>
                    <li>
                        <a href="#">青年志愿者行动国际化步伐稳健有力</a><p align="right">中国青年志愿者</p>
                    </li>
                    <li>
                        <a href="#">关于青年志愿者组织和志愿者开展防汛抗旱志愿服务的工作指引 | 西部计划出征季</a><p align="right">中国青年志愿者</p>
                    </li>
                    <li>
                        <a href="#">共青团组织持续深入实施青年志愿者助残“阳光行动”...</a><p align="right">中国青年志愿者</p>
                    </li>
                    <li>
                        <a href="#">中国青年志愿者协会招聘工作人员公告...</a><p align="right">中国青年志愿者</p>
                    </li>
                </ul>
            </div>
            
        </section>
    </main>

    <footer>
        <p>&copy; 2024 中国青年志愿者</p>
    </footer>

    <script>
        const images = document.querySelectorAll('.carousel img');
        const dots = document.querySelectorAll('.dots span');
        let currentIndex = 0;

        function showImage(index) {
            images.forEach((img, i) => {
                img.classList.remove('active');
                dots[i].classList.remove('active');
            });
            images[index].classList.add('active');
            dots[index].classList.add('active');
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        }

        function prevImage() {
            currentIndex = (currentIndex - 1 + images.length) % images.length;
            showImage(currentIndex);
        }

        function setImage(index) {
            currentIndex = index;
            showImage(currentIndex);
        }

        document.querySelector('.next').addEventListener('click', nextImage);
        document.querySelector('.prev').addEventListener('click', prevImage);
        dots.forEach((dot, i) => {
            dot.addEventListener('click', () => setImage(i));
        });

        setInterval(nextImage, 3000); // 每3秒切换一次
    </script>
</body>
</html>

标签：color,border,元素,padding,width,第六章,font,margin,CSS
From： https://blog.csdn.net/whitesandcnm/article/details/142508863

1.使用CSS设置字体样式

2.使用CSS设置文本样式

3.使用CSS设置图像样式

4.使用CSS设置表单样式

5.综合案例--商城的注册页面

本章习题

习题一

习题二

相关文章

赞助商

阅读排行

第六章 元素应用CSS

1.使用CSS设置字体样式

2.使用CSS设置文本样式

3.使用CSS设置图像样式

4.使用CSS设置表单样式

5.综合案例--商城的注册页面

本章习题

习题一

习题二

相关文章

赞助商

阅读排行

第六章元素应用CSS