H5分栏（第一章） - youchim_H5之家 - 中国HTML5教程资源分享第一站

HTML5技术

H5分栏（第一章） - youchim

字号+ 作者：H5之家来源：H5之家 2016-11-04 13:00 我要评论( )

页面结构 header, nav, article, footer { border padding header { width nav { float width height article { float width height footer { clear width header 头部部分 nav 菜单导航说明部分 article 内容说明部分 footer 底部说明部分普通html 分栏 ht

普通html 分栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html页面结构</title>
<style>
#header, #nav, #article, #footer {
border: solid 1px #666;
padding: 5px;
}

#header {
width: 500px;
}
/*左边菜单*/
#nav {
float: left;
width: 60px;
height: 100px;
}
/*右边菜单*/
#article {
float: left;
width: 428px;
height: 100px;
}

#footer {
clear: both;
width: 500px;
}
</style>
</head>
<body>
<div>
导航部分
</div>
<div>
左边内容
</div>
<div>
右边内容
</div>
<div>
底部
</div>