用HTML+CSS做一个漂亮简单大学生校园班级网页

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

以下是一个简单的HTML和CSS代码示例，用于创建一个漂亮而简单的大学校园班级网页。




<!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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }
  .header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
  }
  .nav {
    float: left;
    width: 20%;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
  }
  .content {
    float: right;
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
  }
  .footer {
    clear: both;
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
</style>
</head>
<body>
 
<div class="header clearfix">
  <h1>大学生活</h1>
</div>
 
<div class="nav">
  <h2>班级信息</h2>
  <ul>
    <li><a href="#">班级活动</a></li>
    <li><a href="#">班级成员</a></li>
    <li><a href="#">班级规则</a></li>
  </ul>
</div>
 
<div class="content">
  <h2>欢迎来到我们的班级主页</h2>
  <p>这里有关于班级的所有信息，活动，规则等等。</p>
</div>
 
<div class="footer">
  <p>版权所有 &copy; 班级名称</p>
</div>
 
</body>
</html>

这个简单的网页包含了一个头部（Header），一个导航栏（Nav），主要内容区域（Content）和一个底部（Footer）。使用了float属性来构建一个基本的两列布局，同时使用了clearfix技巧来处理浮动元素导致的布局问题。CSS使用了box-sizing: border-box;使得内边距和边框包含在宽度和高度之内，避免了宽度计算上的问题。

这个示例提供了一个简单而又实用的大学校园班级网页模板，可以根据实际需求进行扩展和修改。

用HTML+CSS做一个漂亮简单大学生校园班级网页

评论已关闭

推荐阅读