(HTML區)
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>HTML5 Document</title>
<meta charset="utf-8" />
<meta name="description" content="This is an HTML5 example" />
<meta name="keywords" content="HTML5,CSS3,javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="ch01.css" />
</head>
<body id="wrapper">
<header id="main__header">
<img src="image/navbg.jpg">
<h1>這是網站主標題放置之處</h1>
</header>
<nav id="main_menu">
<ul>
<li id="main_menu_li">首頁</li>
<li id="main_menu_li"><a href="http://tw.youtube.com" target="_blank">視訊</a></li>
<li id="main_menu_li">音樂</li>
<li id="main_menu_li">聯絡我們</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h2>This is the subtitle of article number one</h2>
<figure>
<img src="http://minkbooks.com/content/myimage.jpg" />
<figcaption>
This is the description of the image
</figcaption>
</figure>
</hgroup>
</header>
這是第一篇文章
<footer><p>comments (0)</p></footer>
</article>
<article>
<header>
<hgroup><h1>This is the second post</h1>
<h2>This is the subtitle of article number two</h2></hgroup>
</header>
這是第二篇文章
<footer><p>comments (0)</p></footer>
</article>
</section>
<aside id="main_aside">
<blockquote>Article one</blockquote>
<blockquote>Article two</blockquote>
<blockquote><a href="http://tw.yahoo.com" target="_blank">Yahoo!</a></blockquote>
</aside>
<footer id="main_footer">
著作權所有 © 2011-2014
</footer>
</body>
</html>
(CSS區)
*{
margin: 0px;
padding: 0px;
}
p {
font-size: 20px;
color: #03F;
font-style:italic;
}
a {
cursor:help
}
#text1 {
font-size:30px;
}
span {
font-size: 30px;
color: #f36;
font-style:italic
}
h1{
font: bold 20px Verdana, Geneva, sans-serif;
}
h2{
font: bold 14px Verdana, Geneva, sans-serif;
}
body{
text-align: center;
}
header, sectin, footer, aside, nav, article, figure, figcaption, hgroup{
display:block;
}
#wrapper {
width: 960px;
margin: 15px auto;
text-align: center;
}
#main__header{
background-image:url(imagenavbg.jpg.jpg);
width:960px;
border:3px solid #6F0;
padding: 20px 0px;
}
#main_menu {
background-image:url(image/navbgz.jpg);
background-repeat: repeat-x;
padding: 5px 15px;
}
#main_menu_li {
display: inline-block;
list-style: none;
padding: 5px 30px;
font: bold 14px "標楷體"
verdana, Geneva, sans-serif;
}
#main_section {
float: left;
width: 660px;
margin: 20px;
}
#main_aside {
float: left;
width: 220px;
margin: 20px 0px;
padding: 20px;
background: #CCC;
}
#main_footer {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom:15px;
}
article_footer {
text-align: right;
} time {
color: #999999;
}
figcaption {
font: italic 14px Verdana, Geneva, sans-serif;
}
留言列表
