<!DOCTYPE html">
<HTML>
<HEAD>
<TITLE> lesson 1 </TITLE>
<META charset="utf-8">
<link rel="stylesheet" href="html5.css">
</HEAD>
<BODY>
<header><!-- 标记头部区域的内容 （用于页面或页面中的一部分）-->
<h1>Header</h1>
<h2>Subtitle</h2>
<h4>Html5 Rocks!</h4>
</header>
<div>
<nav><!-- 导航类辅助内容-->
<h3>Nav</h3>
</nav>
<section><!-- web 页面中得一块区域-->
<article><!-- 独立的文章内容-->
<header>
<h1>Article Header</h1>
</header>
<p> Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectertur adipiscing elit Vivamus at est eros, vel fringilla urna</p>
<p> Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc</p>
<footer><!--标记脚本区域内容（用于页面或页面中的一部分）-->
<h2>Article footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article header</h1>
</header>
<p> "Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectertur adipiscing elit Vivamus at est eros, vel fringilla urna"</p>
<footer><!--标记脚本区域内容（用于页面或页面中的一部分）-->
<h2>Article footer</h2>
</footer>
</article>
</section>
<aside><!-- 相关内容或引文-->
<h3>Aside</h3>
<p> "Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectertur adipiscing elit Vivamus at est eros, vel fringilla urna2415"</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</BODY>
</HTML>
body{
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
margin:0px auto;
max-width:900px;
border:solid;
border-color:#FFFFFF
}
header{
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}
header h2{
margin:0px;
}
h1{
font-size:72px;
margin:0px;
}
h2 {
font-size:24px;
margin:0px;
text-align:center;
color:#F47D31;
}
h3{
font-size:18px;
margin:0px;
text-align:center;
color:##F47D31;
}
h4{
color:#F47D31;
background:#fff;
-webkit-box-shadow:2px 2px 2px #888;
-webkit-transform:rotate(-45deg);<!--变化-->
-moz-box-shadow:2px 2px 2px #888;
-moz-transform:rotate(-45deg);
position:absolute;
padding: 0px 150px;
top:50px;
left:-120px;
text-align:center;
}
nav{
display:block;
width:25%;
float:left;
}
nav a:link, nav a:visited {
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
}
nav a:hover{
color:white;
background-color:#F47D31;
}
/*a:link {color: #FF0000}
未访问的链接 */
/* a:visited {color: #00FF00} 已访问的链接 */
/* a:hover {color: #FF00FF} 当有鼠标悬停在链接上 */
/* a:active {color: #0000FF} 被选择的链接 */
nav h3{
margin:15px;
color:white;
}
#container{
background-color:#888;
}
section{
display:block;
width:50%;
float:left;
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate:(-10deg);
-moz-box-shadow:2px 2px 20px #888;
-moz-transform:rotate:(-10deg);
}
article header{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px;
}
article h1{
font-size:18px;
}
aside{
display:block;
width:25%;
float:left;
}
aside h3{
margin:15px;
color:white;
}
aside p{
margin:15px;
color:white;
font-weight:bold;
font-style:italic;
}
footer{
clear:both;
display:block;
background-color:#F47D31;
color:#FFFFFF;
text-align:center;
padding:15px;
}
footer h2{
font-size:14px;
color:white;
}
a{color:#F47D31;}
a:{text-decoration:underline;}