- 0133技术站
- 联系QQ：88526
- QQ交流群
- 微信公众号
灭绝小师太
更新时间：2019-04-12 16:54:59
HTML布局
网页布局对一个网站的外观是非常重要的
大多数网站可以使用 <div> 或者HTML5中的元素来为页面创建更加丰富的外观。
div布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#header{
background-color:skyblue;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:150px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:skyblue;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>顶部</h1>
</div>
<div id="nav">
<h1>左侧菜单</h1>
</div>
<div id="section">
<h1>右侧内容</h1>
</div>
<div id="footer">底部</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
HTML5元素布局
HTML5 语义元素
| 元素名称 | 描述 |
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#header{
width:450px;
background-color:#ef687f;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:150px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
width:450px;
background-color:#ef687f;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header id="header">
<h1>顶部</h1>
</header>
<nav id="nav">
<h1>左侧菜单</h1>
</nav>
<section id="section">
<h1>HTML5布局</h1>
</section>
<footer id="footer">底部</footer>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图
推荐手册