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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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>
           <a href="#" target="_blank">菜单 1</a>
           <a href="#" target="_blank">菜单 2</a>
           <a href="#" target="_blank">菜单 3</a>
       </nav>
       <section>
       	<article>
           	<header>
               	<h1>关于手册网</h1>
               </header>
               <p>手册网（www.shouce.ren）提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。。</p>
               <p>手册网提供开源ASP,PHP,jquery,Ajax网站源码,C#,Java,VB,Delphi,VC++等编程源码下载。</p>
               <footer>
               	<h2>高质量源码基地</h2>
               </footer>
           </article>
       </section>
       <section>
       	<article>
           	<header>
               	<h1>关于手册网</h1>
               </header>
               <p>手册网（www.shouce.ren）提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等，做有质量的学习型源码下载站。。</p>
               <p>手册网提供开源ASP,PHP,jquery,Ajax网站源码,C#,Java,VB,Delphi,VC++等编程源码下载。。</p>
               <footer>
               	<h2>开源源码下载</h2>
               </footer>
           </article>
       </section>
       <aside>
       	<h3>关于手册网</h3>
           <p>源代码下载,书籍教程,技术文章,网页特效,素材模板,编程资源,有测试截图的源码下载站。</p>
           <footer>
               <h2>footer</h2>
           </footer>
       </aside>
   </div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

HTML5代码

描述

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