购物车
登陆 / 注册
微信扫码登陆

HTML 布局

HTML 布局
网页布局对一个网站的外观是非常重要的,大多数网站可以使用 <div> 或者HTML5中的元素来为页面创建更加丰富的外观。
编辑:流言 流言 更新时间:2019-01-17 17:48:11

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
文章列表
教程文档
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号