HTML练习-校园官网首页面

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园官网</title>
    <style>
        /* 初始化样式 */
        body, h1, h2, h3, p, ul, li, a {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-family: Arial, sans-serif;
        }

        /* 头部导航栏 */
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        nav ul {
            display: flex;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav a {
            color: #fff;
            font-size: 16px;
        }

        /* 轮播图区域 */
        #slider {
            position: relative;
            overflow: hidden;
            max-width: 1200px;
            margin: 20px auto;
        }

        #slider img {
            width: 100%;
            height: auto;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #slider img.active {
            display: block;
            opacity: 1;
        }

        /* 轮播图指示器 */
        #slider-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        #slider-indicators span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }

        #slider-indicators span.active {
            background-color: #fff;
        }

        /* 主要内容区域 */
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 新闻动态 */
        #news {
            margin-bottom: 30px;
        }

        #news h2 {
            font-size: 24px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        #news ul li {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        #news ul li img {
            width: 100px;
            height: 80px;
            margin-right: 15px;
        }

        #news ul li div {
            flex: 1;
        }

        #news ul li h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }

        #news ul li p {
            color: #666;
            font-size: 14px;
        }

        /* 校园风采 */
        #campus {
            margin-bottom: 30px;
        }

        #campus h2 {
            font-size: 24px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        #campus-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        #campus-gallery img {
            width: 100%;
            height: auto;
            border-radius: 5px;
        }

        /* 通知公告 */
        #notice {
            margin-bottom: 30px;
        }

        #notice h2 {
            font-size: 24px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        #notice ul li {
            position: relative;
            padding-left: 15px;
            margin-bottom: 10px;
        }

        #notice ul li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            width: 5px;
            height: 5px;
            background-color: #333;
            border-radius: 50%;
        }

        /* 快速链接 */
        #quick-links {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        #quick-links a {
            display: block;
            width: calc(20% - 10px);
            background-color: #f0f0f0;
            border-radius: 5px;
            text-align: center;
            padding: 20px 0;
            margin-bottom: 20px;
            color: #333;
            font-size: 16px;
            transition: background-color 0.3s ease-in-out;
        }

        #quick-links a:hover {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <!-- 头部导航栏 -->
    <header>
        <nav>
            <div>
                <a href="#">首页</a>
                <a href="#">学校概况</a>
                <a href="#">教学科研</a>
                <a href="#">学生天地</a>
                <a href="#">招生就业</a>
            </div>
            <div>
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div id="slider">
        <img src="https://example.com/slider1.jpg" alt="轮播图1" class="active">
        <img src="https://example.com/slider2.jpg" alt="轮播图2">
        <img src="https://example.com/slider3.jpg" alt="轮播图3">
        <div id="slider-indicators">
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <main>
        <!-- 新闻动态 -->
        <section id="news">
            <h2>新闻动态</h2>
            <ul>
                <li>
                    <img src="https://example.com/news1.jpg" alt="新闻图片1">
                    <div>
                        <h3>学校举办大型学术研讨会</h3>
                        <p>近日，学校成功举办了一场大型学术研讨会，吸引了众多专家学者参与。</p>
                    </div>
                </li>
                <li>
                    <img src="https://example.com/news2.jpg" alt="新闻图片2">
                    <div>
                        <h3>学生荣获全国竞赛一等奖</h3>
                        <p>我校学生在全国竞赛中表现出色，荣获一等奖，为学校争光。</p>
                    </div>
                </li>
                <li>
                    <img src="https://example.com/news3.jpg" alt="新闻图片3">
                    <div>
                        <h3>校园文化节盛大开幕</h3>
                        <p>一年一度的校园文化节正式拉开帷幕，丰富多彩的活动等待师生参与。</p>
                    </div>
                </li>
            </ul>
        </section>

        <!-- 校园风采 -->
        <section id="campus">
            <h2>校园风采</h2>
            <div id="campus-gallery">
                <img src="https://example.com/campus1.jpg" alt="校园风景1">
                <img src="https://example.com/campus2.jpg" alt="校园风景2">
                <img src="https://example.com/campus3.jpg" alt="校园风景3">
                <img src="https://example.com/campus4.jpg" alt="校园风景4">
                <img src="https://example.com/campus5.jpg" alt="校园风景5">
                <img src="https://example.com/campus6.jpg" alt="校园风景6">
            </div>
        </section>

        <!-- 通知公告 -->
        <section id="notice">
            <h2>通知公告</h2>
            <ul>
                <li>关于期末考试安排的通知</li>
                <li>校园网络维护公告</li>
                <li>图书馆开放时间调整通知</li>
            </ul>
        </section>

        <!-- 快速链接 -->
        <section id="quick-links">
            <a href="#">教务系统</a>
            <a href="#">图书馆资源</a>
            <a href="#">校园地图</a>
            <a href="#">校历查询</a>
            <a href="#">在线课程</a>
        </section>
    </main>

    <script>
        // 轮播图自动切换脚本
        const sliderImages = document.querySelectorAll('#slider img');
        const sliderIndicators = document.querySelectorAll('#slider-indicators span');
        let currentIndex = 0;

        setInterval(() => {
            sliderImages[currentIndex].classList.remove('active');
            sliderIndicators[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % sliderImages.length;
            sliderImages[currentIndex].classList.add('active');
            sliderIndicators[currentIndex].classList.add('active');
        }, 3000);

        // 轮播图指示器点击事件
        sliderIndicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                sliderImages[currentIndex].classList.remove('active');
                sliderIndicators[currentIndex].classList.remove('active');
                currentIndex = index;
                sliderImages[currentIndex].classList.add('active');
                sliderIndicators[currentIndex].classList.add('active');
            });
        });
    </script>
</body>

</html>
效果图
可以将图片自己更改！