html5+css3页面 [复制链接]

zhangliblue

帖子: 455
体力: 1286
威望: 0

发表于 2011-11-1 16:58:05 |显示全部楼层

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>html5</title>
<style>
*{ margin:0; padding:0;}
header,footer,section,aside,nva,hgroup,article,figure,figcaption{display:block;}
body{ background:-webkit-gradient(linear,left top,left bottom,from(#030b0f),to(#355664));background:-moz-linear-gradient(top,#030b0f,#355664)}
body,ul,ul li,p{ margin:0; padding:0;}
::selection{background:#355664;}
a{text-decoration:none;}
.fl{float:left;}
ul li{ list-style-type:none;}
.clear:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
#wrap{width:980px; margin:0 auto;position:relative;}
h1,h2,h3{font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; color:#fcfcfc; text-shadow:2px 2px 3px #000;text-transform:uppercase;}
h1{font-size:45px; }
h2{font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; font-size:22px;}
h3{font-size:25px; color:#fcfcfc; text-indent:20px; padding:10px 0px; cursor:pointer}
nav{height:40px; line-height:40px;
background:#ededed;
position:absolute;
top:30px; right:0px;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 border:1px solid #FCFCFC;
 box-shadow:3px 3px 4px #000;
 box-transform:uppercase;
}
nav ul li{ float:left; }
nav ul li a{color:#565656; font-weight:bold; padding:10px 20px; font-size:16px;text-transform:uppercase;}
nav ul li a.a{color:#fff; -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px; background:#213e4a;}
nav ul li a:hover{ color:#fff; -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px; background:#213e4a;}
.line{height:2px; width:100%; background:url(img/line.jpg) repeat-x; margin:10px auto;}
.line1{height:2px; width:100%; background:url(img/line1.jpg) repeat-x; margin:10px auto; width:96%;}
.articles{background:#213e4a; margin:10px auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; float:left; width:980px; -webkit-transition:all 2s ease; padding-bottom:10px;}
.articles:hover{background:#85b1c4; }
.articles:hover p{color:#0d303e;}
article p{padding:0 0 0 20px; width:380px; line-height:22px; color:#fcfcfc;text-shadow:0px 0px 1px #000;font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;-webkit-transition:all 3s ease;}
figure{float:right; margin-right:20px;}
figure p{width:500px; height:300px; border:6px #142830 solid;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px; -webkit-transition:all 1s ease; cursor:pointer}
figure p:hover{border:6px #fff solid; -webkit-transform:rotate(360deg);}
figcaption{text-align:center;  line-height:40px; color:#fff; height:40px;text-shadow:2px 2px 2px #000;text-transform:uppercase;font-size:20px; }
footer{text-align:center; line-height:60px;}
footer p{color:#fff;font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; font-size:14px;}
aside{width:5%; overflow:hidden; height:150px; background-color:#83c240; position:fixed; top:180px; left:0px; z-index:99; -webkit-transition:all 2s ease; line-height:150px; color:#000;}
aside p{font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; font-size:50px;}
aside.aside2{top:350px;}
.aside1:hover{width:100%; background-color:#fea432;text-align:center; color:#fff; text-shadow:5px 5px 6px #000;}
.aside2:hover{width:100%; background-color:#fea432;text-align:center; color:#fff; text-shadow:5px 5px 6px #000;-webkit-transform:rotate(1080deg)}
.sc{float:right; display:block; height:30px; padding:0px 25px; background-color:#f94234; text-align:center; line-height:30px; color:#fff; margin:-40px 20px 0 0; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; box-shadow:2px 2px 3px #000;}
.linear1{background:-webkit-gradient(linear,left top,left bottom,from(#0c80cb),to(#33a4f4));
background:-moz-linear-gradient(top,#0c80cb,#33a4f4);}
.linear2{background:-webkit-gradient(linear,left top,left bottom,from(#5dad3c),to(#a1d243));background:-moz-linear-gradient(top,#5dad3c,#a1d243);}
.linear3{background:-webkit-gradient(linear,left top,left bottom,from(#ea1412),to(#fd503f));background:-moz-linear-gradient(top,#ea1412,#fd503f);}
.sc:hover{background:-webkit-gradient(linear,left top,left bottom,from(#9b5704),to(#fbd246));background:-moz-linear-gradient(top,#9b5704,#fbd246)}
</style>
</head>

<body>
<aside class="aside1">
 <p>HTML5+CSS3</p>
</aside>
<aside class="aside2">
 <p>HTML5+CSS3</p>
</aside>
<section id="wrap">
 <header>
   <hgroup>
     <h1>MY LOGO</h1>
     <h2>HTML5 SHOWTIME</h2>
   </hgroup>
  <nav>
   <ul>
    <li><a href="#">html5</a></li>
    <li><a href="#">css3</a></li>
    <li><a href="#">photoshop</a></li>
    <li><a href="#">canvas</a></li>
    <li><a href="#" class="a">web store</a></li>
   </ul>
  </nav>
 </header>
<div class="line"></div>
  <section class="articles">
      <h3>PHOTOSHOOT EFFECT</h3>
      <a href="#" class="sc linear1">收藏</a>
      <div class="line1"></div>
      <article class="fl">
        <p>
        In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio.</p>
      </article>
      <figure >
       <p><img src="http://tutorialzine.com/img/featured/641.jpg" width="500" height="300" /></p>
       <figcaption>PHOTOSHOOT EFFECT</figcaption>
      </figure>
  </section>
    <section class="articles">
      <h3>SWEET AJAX TABS</h3>
      <a href="#" class="sc linear2">收藏</a>
      <div class="line1"></div>
      <article class="fl">
        <p>
       Here we are making sweet AJAX-powered tabs with CSS3 and the newly released version 1.4 of jQuery.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio.</p>
      </article>
      <figure >
       <p><img src="http://tutorialzine.com/img/featured/633.jpg" width="500" height="300" /></p>
       <figcaption>SWEET AJAX TABS</figcaption>
      </figure>
  </section>
      <section class="articles">
      <h3>HALFTONE NAVIGATION MENU</h3>
      <a href="#" class="sc linear3">收藏</a>
      <div class="line1"></div>
      <article class="fl">
        <p>
       Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
        </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio.</p>
      </article>
      <figure >
       <p><img src="http://tutorialzine.com/img/featured/610.jpg" width="500" height="300" /></p>
       <figcaption>HALFTONE NAVIGATION MENU</figcaption>
      </figure>
  </section>
  <div class="clear"></div>
  <div class="line"></div>
  <footer>
  <p>Copyright 2010 - YourSite.com</p>
  </footer>
</section>

</body>
</html>

提示：您可以先修改部分代码再运行

最近学习html5 css3 然后自己写了一个页面.....感觉样式还是有点混乱、推荐用chrome和Safari浏览。

听说读写

		自动登录	找回密码
密码			注册

html5+css3页面 [复制链接]

浏览过的帖子

浏览过的版块