用div与css实现网页布局代码
当使用 <div> 元素与 CSS 来创建网页布局时，通常会使用盒模型和浮动等属性。
html<!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 {
margin: 0;
font-family: Arial, sans-serif;
}
#container {
width: 80%;
margin: 0 auto;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
float: left;
width: 20%;
background-color: #f1f1f1;
padding: 20px;
}
section {
float: left;
width: 60%;
padding: 20px;
}
aside {
float: left;
width: 20%;
background-color: #f1f1f1;
padding: 20px;
}
footer {
clear: both;
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>网页标题</h1>
</header>
<nav>
<ul>
<li><a href="#">导航项 1</a></li>
<li><a href="#">导航项 2</a></li>
<li><a href="#">导航项 3</a></li>
</ul>
</nav>
<section>
<h2>内容区域</h2>
<p>这是网页的主要内容。</p>
</section>
<aside>
<h2>侧边栏</h2>
<p>一些相关的信息或链接。</p>
</aside>
<footer>
<p>版权 © 2024 网站名称</p>
</footer>
</div>
</body>
</html>
在这个示例中，<div> 元素被用作容器，其中包含了头部 (<header>)、导航栏 (<nav>)、内容区域 (<section>)、侧边栏 (<aside>) 和底部 (<footer>)。CSS 样式被用来定义布局、颜色和其他样式。
html<!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 {
margin: 0;
font-family: Arial, sans-serif;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
}
header, nav, section, aside, footer {
box-sizing: border-box;
padding: 20px;
margin: 10px;
}
header {
background-color: #333;
color: #fff;
text-align: center;
flex-basis: 100%;
}
nav, section, aside {
flex-basis: calc(33.33% - 20px);
}
nav, aside {
background-color: #f1f1f1;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
flex-basis: 100%;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>网页标题</h1>
</header>
<nav>
<ul>
<li><a href="#">导航项 1</a></li>
<li><a href="#">导航项 2</a></li>
<li><a href="#">导航项 3</a></li>
</ul>
</nav>
<section>
<h2>内容区域</h2>
<p>这是网页的主要内容。</p>
</section>
<aside>
<h2>侧边栏</h2>
<p>一些相关的信息或链接。</p>
</aside>
<footer>
<p>版权 © 2024 网站名称</p>
</footer>
</div>
</body>
</html>
在这个示例中，使用了 Flexbox 布局模型，通过设置 display: flex，子元素默认成为弹性盒子。flex-basis 属性用于设置每个子元素的初始尺寸。justify-content 和 align-items 属性用于调整子元素在主轴和侧轴上的布局。这种方法比浮动更为灵活和简洁。
