【简单html静态网页代码】用HTML+CSS制作一个简单的学校网页(9页)
由于原始代码中存在的问题是代码过于冗长和冗余，我们可以使用更简洁的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;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
a {
color: white;
text-decoration: none;
}
section {
margin: 10px;
padding: 20px;
background-color: #EEE;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
aside {
float: right;
width: 200px;
background-color: #EEE;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到XX学校</h1>
</header>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<!-- 其他链接 -->
</ul>
</nav>
<section class="clearfix">
<article>
<h2>学校新闻</h2>
<p>这里是新闻内容...</p>
</article>
<aside>
<h3>活动信息</h3>
<ul>
<li>活动1</li>
<li>活动2</li>
<!-- 其他活动 -->
</ul>
</aside>
</section>
<!-- 其他section内容 -->
<footer>
<p>版权所有 © XX学校</p>
</footer>
</body>
</html>这个简化版的代码使用了更现代的CSS语法，并且去除了冗余的结构和样式代码。它使用了<header>, <nav>, <section>, <article>和<aside>等语义化标签来提高代码的可读性和可维护性。同时，它使用了<style>标签内嵌CSS代码，这样可以避免外部CSS文件的引用，使得整个页面可以在一个HTML文件中自给自足。
评论已关闭