web前端基础教程实践DIV＋CSS网页布局入门指南

作者：System 时间：2024年08月23日分类：所有,css 字数：1363

在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前端的起点。

web前端基础教程实践DIV＋CSS网页布局入门指南

评论已关闭

推荐阅读