<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<h1>網(wǎng)頁(yè)標(biāo)題</h1>
</header>
<article>
<header>
<h1>文章標(biāo)題</h1>
<p>文章正文</p>
</header>
</article>
</body>
</html>
實(shí)例2<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<header>
<hgroup>
<h1>HTML 融水公子</h1>
<a href="/">手機(jī)版</a>
<a href="/">HTML5論壇</a>
</hgroup>
<nav>
<ul>
<li>
<a href="/">首頁(yè)</a>
</li>
<li><a href="/">手機(jī)版</a></li>
<li><a href="/">論壇</a></li>
</ul>
</nav>
</header>
</body>
</html>改進(jìn)加上CSS元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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-color: #ff6600;
}
nav li{
float:left;
border-radius:5px;
padding:5px 10px;/*shangxia zuoyou neibianju 指的是黑框*/
margin:10px;/*shangxiazuoyou 都是10px 指的是橘色框 外邊距*/
list-style: none;/*去掉小圓點(diǎn)*/
background-color: #000000;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>HTML 融水公子</h1>
<a href="/">[手機(jī)版]</a>
<a href="/">[HTML5論壇]</a>
</hgroup>
<nav>
<ul>
<li>
<a href="/">首頁(yè)</a>
</li>
<li><a href="/">手機(jī)版</a></li>
<li><a href="/">論壇</a></li>
</ul>
</nav>
</header>
</body>
</html>分享知識(shí)，分享快樂(lè)！希望中國(guó)站在編程之巔！----融水公子
公眾微信號(hào)：rsgz520
360圖書館館號(hào)：rsgz002.360doc.com
聯(lián)系客服
