您的位置：首页 > Web前端 > HTML5

DayDayUp之HTML5学习笔记二使用header、aside、section、footer实现一个简单的界面

2014-04-22 15:50 1076 查看

HTML5新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

这是一个用HTML5新的结构标签header、aside、section、footer实现的一个简单的页面框架布局。

示例代码：

<!DOCTYPE HTML>

<html>

<meta charset="utf-8">

<head>

<style>
body
{
width:800px;
height:600px;

}
header
{
width:800px;

height:120px;
background-color:#FFFFCC;
}

header nav ul li
{
float:left;

display: inline-block;
width:80px;
height:30px;
line-height:30px

}
nav
{
width:800px;
height:30px;
background-color:#FFCC99;
margin-top:70px;

}
div
{
width:800px;
height:400px;
background-color:#FFCC99;
margin-top:0px;

}
section
{
width:80%;
height:400px;

background-color:#666666;
float:left;
}

aside
{
width:10%;
height:400px;

background-color:#CCCCFF;
loat:left;
}
footer
{
width:800px;
height:50px;
margin-top:-98px;

background-color:#CC9966;
clear:both;

}
</style>

</head>

<body>

<header>
<p >header</p>
<nav>
<ul>
<li>导航一</li>
<li>导航二</li>
<li>导航三</li>
<li>导航四</li>
<li>导航五</li>

<li>导航六</li>
<li>导航七</li>
</ul>
</nav>
</header>
<div>
<aside>
<p >aside</p>
</aside>
<section>
<p >section</p>

</section>

<aside>
<p >aside</p>
</aside>
</div>
<footer>
<p >footer</p>
</footer>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 HTML5 标签布局

相关文章推荐

新的分享

章节导航

DayDayUp之HTML5学习笔记 二 使用header、aside、section、footer实现一个简单的界面

HTML5新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

DayDayUp之HTML5学习笔记二使用header、aside、section、footer实现一个简单的界面