html5_1

最新推荐文章于 2024-06-25 10:51:21 发布

phoenix_qiqi

最新推荐文章于 2024-06-25 10:51:21 发布

阅读量623

点赞数

分类专栏： html5 ccs3 文章标签： html5 header stylesheet float 脚本 web

本文链接：https://blog.csdn.net/phoenix_qiqi/article/details/6960273

版权

html5 ccs3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
			<a href="http://www.example.com">Link 1</a>
			<a href="http://www.example.com">Link 2</a>
			<a href="http://www.example.com">Link 3</a>
		</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>

css

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;}