资讯中心

HTML基础学习——布局

来自:衡庐科技 发布时间:2019/10/25 16:47:08 浏览次数:
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:500px;
width:300px;
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:1320px;
background-color:aquamarine;
color:red;
text-align:center;
padding:5px;
}
#nav {
line-height:50px;
background-color:cyan;
height:510px;
width:300px;
float: left;
padding:5px;
}
#section {
width:1000px;
height: 500px;
text-align: center;
background-color: gray;
float:left;
padding:10px;
}
#footer {
width:1320px;
background-color:#ef687f;
color:white;
clear:both;
text-align: end;
padding:5px;
}
</style>
</head>
<body>
<header id="header">
<h1>顶部</h1>
</header>
<nav id="nav">
<h1>左侧菜单</h1>
</nav>
<section id="section">
<h1>布局</h1>
</section>
<footer id="footer">底部</footer>
</body>
</html>
 
结果图:
 
 
 
售前咨询售后服务技术支持