校园网页html

最新推荐文章于 2025-06-14 16:59:34 发布

cfbl2024

最新推荐文章于 2025-06-14 16:59:34 发布

阅读量159

点赞数 2

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/cfbl2024/article/details/145263882

<html lang="zh - CN">

<head>
  <meta charset="UTF - 8">
  <meta name="viewport" content="width=device-width, initial - scale=1.0">
  <title>校园官网首页</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    /* 导航栏样式 */
   .navbar {
      background-color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 50px;
    }

   .logo img {
      height: 40px;
    }

   .nav-links {
      list-style: none;
      display: flex;
    }

   .nav-links li {
      margin-left: 20px;
    }

   .nav-links a {
      color: white;
      text-decoration: none;
    }

    /* 轮播图样式 */
   .carousel {
      width: 100%;
      overflow: hidden;
    }

   .carousel-slide {
      width: 100%;
      display: none;
    }

   .carousel-slide img {
      width: 100%;
      height: auto;
    }

    /* 学校介绍板块样式 */
   .introduction {
      padding: 50px;
      text-align: center;
    }

    /* 新闻动态板块样式 */
   .news {
      padding: 50px;
    }

   .news-item {
      display: flex;
      margin-bottom: 30px;
    }

   .news-item img {
      width: 200px;
      height: 150px;
      margin-right: 20px;
    }

    /* 页脚样式 */
   .footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>

<body>
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="logo">
      <img src="school-logo.png" alt="学校logo">
    </div>
    <ul class="nav-links">
      <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>

  <!-- 轮播图 -->
  <div class="carousel">
    <div class="carousel-slide">
      <img src="校园风景1.png"alt="校园风景1>
    </div>
    <div class="carousel-slide">
      <img src="校园风景2.png"alt="校园风景2">
    </div>
    <div class="carousel-slide">
      <img src="校园风景3.png"alt="校园风景3">
    </div>
  </div>

  <!-- 学校介绍板块 -->
  <section class="introduction">
    <h2>学校简介</h2>
    <p>我校是一所具有悠久历史和卓越声誉的高等学府，秉承着独特的教育理念，培养了众多优秀人才。...</p>
  </section>

  <!-- 新闻动态板块 -->
  <section class="news">
    <h2>新闻动态</h2>
    <div class="news-item">
   
      <h3>我校学生在全国竞赛中荣获佳绩</h3>
      <p>近日，我校学生在全国XX竞赛中表现出色，斩获多项大奖。...</p>
    </div>
    <div class="news-item">
    
      <h3>知名学者来校开展学术讲座</h3>
      <p>上周，知名学者XX教授受邀来校，为师生带来了一场精彩的学术讲座。...</p>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer">
    <p>&copy; 2025 某某学校 版权所有</p>
  </footer>
</body>

</html>```
**结果**
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f02295d1cb1843beb830a068b6a94433.png)