html5.1版本

<!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;}
posted @ 2017-05-12 16:55  xiaozhisir  阅读(191)  评论(0)    收藏  举报