html简单网页代码： web前端网页设计与制作 div静态网页设计
warning:
这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。
以下是一个简单的HTML网页代码示例，使用了div元素来布局页面的不同区域。这个示例展示了一个包含头部、导航、主要内容区和页脚的静态网页：
<!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;
}
header, footer {
background-color: #f2f2f2;
padding: 20px 0;
text-align: center;
}
nav {
float: left;
width: 20%;
margin: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
section {
margin-left: 25%;
padding-left: 20px;
}
h1 {
color: #333;
}
p {
color: #555;
}
</style>
</head>
<body>
<header>
<h1>我的静态网页</h1>
</header>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
<section>
<h2>欢迎来到我的网页</h2>
<p>这是一个简单的静态网页示例，展示了如何使用div元素来构建一个基本的网页布局。</p>
</section>
<footer>
<p>版权所有 © 2023</p>
</footer>
</body>
</html>这段代码展示了如何使用div元素创建一个简单的三栏布局网页，其中头部、导航和内容区被分为不同的div。同时，代码中包含了一些基本的CSS样式来增强页面的视觉效果。这是学习前端网页设计的一个基本入门示例。
评论已关闭