第09章 header元素

HTML5页面布局实例

最新推荐文章于 2025-08-10 15:33:19 发布

最新推荐文章于 2025-08-10 15:33:19 发布 · 127 阅读

阅-H52 专栏收录该内容

35 篇文章

订阅专栏

本文提供了一个HTML5页面布局的示例代码，包括了基本的header头部区域布局、导航栏样式设计等内容，展示了如何使用HTML5标签进行网页结构划分。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0;}
body{ font-family:微软雅黑; text-align:center;}
a{ color:#f60; text-decoration:none;}
hgroup{ margin-bottom:10px;}
nav{ height:48px; background:#ff6600;}
nav li{ float:left; background:#000; border-radius:5px; padding:5px 10px; margin:10px; list-style:none;}
</style>
</head>
<body>
<header>
	<hgroup>
    	<h1>HTML5</h1>
        <a href="###">[手机版]</a>
        <a href="###">[电脑版]</a>
    </hgroup>
    <nav>
    	<ul>
        	<li><a href="###">首页</a></li>
            <li><a href="###">手机版</a></li>
            <li><a href="###">电脑版</a></li>
        </ul>
    </nav>
</header>
</body>
</html>

效果图：