html5练习代码 Div圆角阴影菜单旋转实例

2024-09-05 12:19:05

字体：大中小

来源：转载

供稿：网友

这个代码是纯粹学习HTML5时候写的，演示了在网页上实现Div圆角、div边框阴影、菜单布局以及Div旋转放置的演示实例，本演示更侧重于“布局”方面的知识，主要使用了与HTML5相配套的CSS3代码来实现，是学习CSS3和HTML5基础知识的好范例，特别是对新手帮助比较大。

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>html5阴影 圆角 菜单练习代码</title><style>@charset "utf-8";body{	background-color:#CCC;	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:71px;	margin:0px;	}h2{	font-size:24px;	margin:0px;	test-align:center;	color:#F47D31;	}h3{	font-size:18px;	margin:0px;	text-align:center;	color:#F47D31;	}h4{	color:#F47d31;	background-color:#FFF;	/*阴影*/	-webkit-box-shadow:2px 2px 20px #888;	/*旋转*/	-webkit-transform:rotate(-45deg);	-moz-box-shadow:2px 2px 20px #888;	-moz-transrorm: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;	}nav h3{	margin:15px;	color:white;	}#container{	background-color:#888;	}section{	display:block;	width:50%;	float:left;	}article{	background-color:#eee;	display:block;	margin:15px; padding:10px;	/*圆角*/	-webkit-border-radius:10px;	-moz-border-radius:10px;	border-radius:10px;	/**/	-webkit-box-shadow:2px 2px 20px #888;	-moz-box-shadow:2px 2px 20px #888;	-webkit-transform:rotate(-10deg);	-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;	}aside p{	margin:15px;	color:white;	font-weight:bold;	font-style:italic;	}footer{	clear:both;	display:block;	background-color:#F47D31;	color:#FFFFFF;	}footer h2{	font-size:14px;	color:white;	}</style></head><body><header>	<h1>html5练习代码 Div圆角 阴影 菜单 旋转</h1>    <h2>有品质的源码下载站</h2>    <h4>HTML5 Rocks!</h4></header><div id="container">   	<nav>       	<h3>Nav</h3>           菜单 1           菜单 2           菜单 3       </nav>       <section>       	           	<header>               	<h1>关于武林网</h1>               </header>               <p>武林网（www.vevb.com）提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。。</p>               <p>武林网提供开源ASP,PHP,jquery,Ajax网站源码,C#,Java,VB,Delphi,VC++等编程源码下载。</p>               <footer>               	<h2>高质量源码基地</h2>               </footer>           </article>       </section>       <section>       	           	<header>               	<h1>关于武林网</h1>               </header>               <p>武林网（www.vevb.com）提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。。</p>               <p>武林网提供开源ASP,PHP,jquery,Ajax网站源码,C#,Java,VB,Delphi,VC++等编程源码下载。。</p>               <footer>               	<h2>开源源码下载</h2>               </footer>           </article>       </section>              	<h3>关于武林网</h3>           <p>源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源,有测试截图的源码下载站。</p>           <footer>               <h2>footer</h2>           </footer>       </aside>   </div></body></html>

上一篇：HTML5 Canvas结合RGraph插件制作柱状图

下一篇：CSS3创建上下移动的动画效果