本文介绍了一种使用HTML5新元素实现的网页布局方案，包括header、aside、section等元素的应用，并通过CSS样式调整实现了响应式设计。此外，还展示了导航栏和页脚的具体实现方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新元素新布局模板</title>
<style type="text/css">
body{height: 608px}
header{background: red;width: 100%;height: 10%}
aside{width: 20%;height: 100%;float: left;background: #f0f0f0}
section{width: 80%;height: 100%;float: left;background: #f8f8f8}
footer{background: red;width: 100%;height: 10%;clear: left;text-align: center;}
nav{width: 100%;height:5%;text-align: center;padding: 6px;}
hgroup{width: 100%;height:5%;text-align: center;padding: 6px;}
address{width: 100%;padding-top: 20px;}
li{display: inline;}
a{text-decoration: none;}
</style>
</head>
<body>
<header>
<hgroup>
hgroup布局元素
</hgroup>
<nav>
<ul>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
<li><a href="">搜狐</a></li>
</ul>
</nav>
</header>
<aside>
<div id="div1">侧边</div>
</aside>
<section>
<div id="div2">主体</div>
</section>
<footer>
<address>侯伟东，文安县教育局，18022</address>
</footer>
</body>
</html>
转载于:https://www.cnblogs.com/houweidong/p/7519954.html
扫一扫
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
