2. [代码]第2步：index.html
Coding A CSS3 & HTML5 Page Template | Script tutorials demo
And Your Promo
Your promo text 1
Promo text description here
More
Your promo text 2
Promo text description here
More
Your promo text 3
Promo text description here
More
Your promo text 4
Promo text description here
More
10 Great Examples of HTML5 Canvas
This is collection of most incredibly HTML5 canvas demos. Today, during browsing web I was amazed with so big amount of various html5 demonstration. And glad to share what I was able to collect. HTML5 become more, and more powerful, it even less processor-consuming than Flash. So, may not be far off such an event when the flash will fully shifted with html5?
Read More
Creating Wave Effects Using Javascript
Today’s lesson quite entertaining, we’ll learn how to construct a wave effect. For clarity, we will apply that effect to the picture. I will explain how it works directly in our tutorial, now, its time to see our online demonstration.
Read More
Multiple backgrounds Animation with CSS3
In CSS3 appear new possibility to use multiple backgrounds for the objects, in our new article I will demonstrate how to do it. And, I going to add a bit of JS code for simple animation (to make it not so boring). Commonly, it is very easy to apply multiple backgrounds – we just need to list them (separated by commas) in the object properties.
Read More
Middle column
Where you can add any another your custom content
Last comments
Nice template, isn`t it?
Posted by admin on May 31, 2011
Another one comment
Posted by admin on May 31, 2011
Third comment
Posted by admin on May 31, 2011
3. [代码]第3步：js/main.js
$(document).ready(function() {
$('ul.sf-menu').superfish({
delay: 250,
animation: {opacity:'show',height:'show'},
speed: 'fast',
autoArrows: false
});
});
$(window).load(function() {
$('#slider').nivoSlider({
effect:'boxRain',
slices:10,
boxCols: 10,
boxRows: 6,
animSpeed:500,
pauseTime:5000,
controlNav:false
});
});
4. [代码]第4步：css/style.css
body{background:url(../images/bg.jpg) center 0 no-repeat #000;color:#444;font-family:Arial, Helvetica, sans-serif;font-size:100%;min-width:1000px}
a{color:#4fab2f;outline:none}
.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;visibility:hidden;width:0}
.wrapper{overflow:hidden;width:100%}
.container{margin:0 auto;position:relative;width:940px}
p{margin-bottom:18px}
.p0{margin-bottom:4px}
.p1{margin-bottom:8px}
.p2{margin-bottom:15px}
.p3{margin-bottom:30px}
.p4{margin-bottom:40px}
.p5{margin-bottom:45px}
.p6{margin-bottom:60px}
.p7{margin-bottom:70px}
.title{margin-bottom:19px}
.it{font-style:italic}
.letter{letter-spacing:-1px}
.indent{padding-left:25px}
header{height:280px;margin:0 0 6px;position:relative;width:100%;z-index:2}
.logo{background:url(../images/logo.png) 51px 1px no-repeat;color:#fff;display:inline-block;font-size:30px;left:23px;line-height:1.2em;padding-top:83px;position:absolute;text-transform:uppercase;top:104px}
h2 strong{color:#fff;display:inline-block;font-size:34px;font-weight:400;line-height:1.2em;position:absolute;right:13px;text-align:right;top:184px}
h2 strong strong{color:#68bd45;display:block;font-size:48px;font-weight:700;line-height:1.2em;position:absolute;right:0;top:-47px}
.sf-menu{font-size:16px;padding:0 0 10px;position:absolute;right:0;text-align:center;top:70px;z-index:100}
.sf-menu li{-moz-border-radius:10px;-webkit-border-radius:10px;background:none;border-radius:10px;float:left;line-height:38px;margin-right:2px;position:relative}
.sf-menu li a{color:#fff;padding:0 15px;text-transform:uppercase}
.sf-menu li.active,.sf-menu li:hover,.sf-menu li.sfHover{background:url(../images/menu-tail.gif) 0 0 repeat-x #1e691e}
.sf-menu ul{-moz-border-radius:10px;-webkit-border-radius:10px;background:#000;border-radius:10px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:11px;padding:10px 0;position:absolute;text-transform:uppercase;top:-999em;width:173px}
.sf-menu ul ul{-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
.sf-menu li:hover{visibility:inherit}
.sf-menu a{display:block;position:relative}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:41px;z-index:99}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:176px;top:-10px}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:176px;top:0}
.sf-menu li li{-moz-border-radius:0;-webkit-border-radius:0;background:#000;border-radius:0;float:none;line-height:36px;width:100%}
.sf-menu li li a{color:#fff;font-weight:400;padding:0 0 0 22px;text-align:left}
.sf-menu li li li a{color:#fff!important}
.sf-menu li li li a:hover{color:#000!important}
#content{padding:0 30px 0 0;width:100%}
h3{color:#151515;font-size:24px;line-height:1.2em;margin:0 0 23px}
.scroll{height:180px;overflow:auto;position:relative}
.scroll .padding-right{height:1%;padding-right:50px}
.box{-moz-border-radius:12px;-moz-box-shadow:0 0 0 6px rgba(0,0,0,0.16);-webkit-border-radius:12px;-webkit-box-shadow:0 0 0 6px rgba(0,0,0,0.16);background:#dae3d4;border-radius:12px;box-shadow:0 0 0 6px rgba(0,0,0,0.16);min-height:386px;padding:63px 0 0}
#main_page .box{background:#f5f8f5;padding:410px 0 0}
.main{font-size:.75em;line-height:1.5em;margin:0 auto;padding:0;width:1000px}
.box1{background:#dae3d4;padding:26px 0 60px}
.box2{-moz-border-radius:0 0 12px 12px;-webkit-border-radius:0 0 12px 12px;background:#c3d1b8;border-radius:0 0 12px 12px;padding:36px 0 60px}
.button{-moz-border-radius:15px;-webkit-border-radius:15px;background:url(../images/button-tail.gif) 0 0 repeat-x #399622;border-radius:15px;color:#fff;cursor:pointer;display:inline-block!important;filter:Shadow(Color=#9e9c9c,Direction=135,Strength=1);font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:15px;padding:9px 15px 12px;text-shadow:1px 1px 0 #9e9c9c}
.list li{background:url(../images/marker.png) 0 9px no-repeat;line-height:26px;padding-left:18px}
.list li a{color:#444;display:inline-block;text-decoration:none}
p span{color:#4fab2f;display:inline-block}
figure{-moz-box-shadow:0 0 4px #cfd7c8;-webkit-box-shadow:0 0 4px #cfd7c8;box-shadow:0 0 4px #cfd7c8;width:250px}
footer{color:#fff;padding:50px 0 25px;text-align:center;width:100%}
.main_container{margin-left:auto;margin-right:auto;width:960px}
.grid_1,.grid_2{display:inline;float:left;margin-left:10px;margin-right:10px;position:relative}
.alpha{margin-left:0}
.main_container .grid_1{width:290px}
.main_container .grid_2{width:940px}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;height:0;line-height:0;visibility:hidden;width:0}
* html .clearfix{height:1%}
article,aside,audio,canvas,command,datalist,details,embed,figcaption,figure,footer,header,hgroup,keygen,meter,nav,output,progress,section,source,video,.clearfix{display:block}
html,.wrap{width:100%}
a:hover,.sf-menu li a,.list-1 li a,.list-2 li a,.link,.logo,.button{text-decoration:none}
.sf-menu li a.current,.sf-menu li a:hover,.list-2 li a:hover,.link:hover{color:#fff}
.sf-menu li li a:hover,.sf-menu li li.sfHover a{color:#000}
.color-3,.list li a:hover,.link{color:#4fab2f}
h1,h2{padding:0;position:relative}
.sf-menu .last-item,.omega{margin-right:0}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul,ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em}
.sf-menu li.sfHover li:hover,.sf-menu li.sfHover li.sfHover,.sf-menu li.sfHover li.sfHover li:hover{background:#68bd45}
.box .padding{padding:0 5px 60px 15px}
.button:hover{background:#4e4e4e}
