web前端：利用html，css仿写学校网站

最新推荐文章于 2024-07-15 22:17:25 发布

葵因lemon

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量276

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/2301_76862126/article/details/138166714

版权

1.完成学校官方网站页面制作
2.使用动画完成过渡+变换效果

<!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="../css/作业四.css">  
</head>  
<body>  
    <header>  
        <!-- 学校标志 -->  
        <div class="school-logo">  
            <img src="../01.html/04.图片和音频视频/image/作业四.jpg" alt="学校标志">  
        </div>  
          
        <!-- 导航栏 -->  
        <nav>  
            <ul class="navbar">  
                <li><a href="index.html">首页</a></li>  
                <li><a href="about.html">关于我们</a></li>  
                <li><a href="courses.html">课程介绍</a></li>  
                <li><a href="news.html">新闻动态</a></li>  
                <li><a href="contact.html">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
  
    <main>  
        <!-- 首页内容 -->  
        <section class="home-content">  
            <h1 class="C">欢迎来到学校官方网站</h1>  
            <p>这里是首页的内容，可以介绍学校的历史、特色、成就等。</p>  
            <!-- 其他首页元素，如图片、视频、介绍板块等 -->  
        </section>  
  
        <!-- 页面的内容 -->  
        <section class="about-content">  
            
            <h2 class="B">关于我们</h2>  
            <div class="A">这里是关于我们页面的内容，可以详细介绍学校的历史、办学理念、师资力量等。</div>  
        </section>  
  
          
  
    </main>  
  
    <footer>  
        <!-- 版权信息、联系方式等 -->  
        <div class="footer-content">  
            <p>版权所有 &copy; 学校名称</p>  
            <p>联系方式:电话:XXX-XXXX-XXXX | 邮箱：[example@school.edu](mailto:example@school.edu)</p>  
            <!-- 其他页脚元素，如社交媒体链接、友情链接等 -->  
        </div>  
    </footer>  
</body>  
</html>