<!DOCTYPE html>
<html>
<head>
<title>HTML 5 DEMO</title>
<style>
.demo {
background-color: yellow;
}
header, nav, section, article, footer {
display: block;
}
header, nav, section, article, footer {
color: white;
}
header, footer {
text-align: center;
width: 100%;
}
header {
background-color: red;
font-size: 36px;
font-weight: bold;
}
nav {
position: fixed;
top: 40px;
right: 25px;
background-color: blue;
width: 100px;
}
section {
width: 86%;
background-color: gray;
padding: 20px;
margin: 20px;
}
footer {
background-color: green;
font-size: 10px;
}
</style>
</head>
<body>
<header>
header
</header>
<nav class="demo">
<ul>
<li>nav 1</li>
<li>nav 2</li>
</ul>
</nav>
<section>
<article>
article
</article>
</section>
<footer>
<p>
footer © 2011
</p>
</footer>
</body>
</html>
我們將導覽區塊 <nav> 的 class 屬性 (attribute) 設定為 demo<nav class="demo">
demo 對應到 <style> 中定義的 .demo 規則
.demo {
background-color: yellow;
}
執行的結果如下:
結果如樣式規則， <nav> 區域是黃色的
Reference : http://pydoing.blogspot.tw/2012/01/html-5-class.html
沒有留言:
張貼留言