web前端基础教程实践DIV＋CSS网页布局入门指南
在Web前端中，使用DIV和CSS进行页面布局是一种常见的方法。以下是一个简单的例子，展示了如何使用DIV和CSS创建一个基本的页面布局。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">
<h1>网站名称</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div id="content">
<h2>内容标题</h2>
<p>这里是内容部分。</p>
</div>
<div id="footer">
<p>版权所有 © 2023年网站名称</p>
</div>
</body>
</html>CSS部分（styles.css）:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#header {
background-color: #ccc;
padding: 20px;
text-align: center;
}
#nav {
background-color: #aaa;
padding: 10px;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
display: inline;
margin-right: 10px;
}
#content {
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
}
#footer {
background-color: #ccc;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}这个例子展示了如何使用DIV元素来创建页面的不同区域，并使用CSS为这些区域设置样式。同时，也演示了如何使用无序列表来创建导航栏，并通过CSS将其内联显示。这个简单的页面布局可以作为学习Web前端的起点。
评论已关闭