码迷,mamicode.com
首页 > Web开发 > 详细

使用html5结构化元素

时间:2015-09-16 23:26:39      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

显示的效果如上边这样,但是有没有发现内容的外侧没有边线(这个难道是因为浏览器不同吗?有待测试)

html5中新增加的元素<header>可以明确的告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>元素表明页面已到页脚或根元素部分,并且这些标记可以重复使用,极大的提高了开发者的效率。

 

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
header,nav,footer{
border: solid 1px #666;
padding : 10px;
margin: 6px;
}
header{
width: 500px
}
nav{
float: left;
width: 60px;
height: 100px;
}
article{
float: left;
width: 406px;
height: 100px;
}
footer{
clear: both;
width: 500px;
}

</style>
</head>
<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部说明</footer>
</body>
</html>

使用html5结构化元素

标签:

原文地址:http://www.cnblogs.com/mudy/p/4814850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!