个人网站

最新推荐文章于 2024-10-10 10:49:27 发布
Tiny1211
最新推荐文章于 2024-10-10 10:49:27 发布
阅读量133
点赞数
文章标签： xhtml ui 开发工具
原文链接：http://www.cnblogs.com/-gap/archive/2012/06/05/2536954.html
版权
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My HTML5 Demo</title>
<style>
div, body, table, ul, li {
    margin:0px;
    padding:0px;
}
body {
    font-size:14px;
    color:#333;
    font-family:"Comic Sans MS";
}
ul, li, ol {
    list-style: none outside none;
}
li {
    float:left;
    display: inline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}
/*被选中时背景颜色*/
::selection {
background:rgb(115,201,87);
color:#555;
}
::-moz-selection {
background:rgb(115,201,87);
color:#555;
}
::-webkit-selection {
background:rgb(115,201,87);
color:#555;
}
.wrapper {
    width:990px;
    margin:0px auto;
}
#header_container {
    height:70px;
    width:100%;
    /*渐变背景颜色*/
    background-image: linear-gradient(bottom, rgb(163,227,43) 6%, rgb(115,201,87) 72%);
    background-image: -o-linear-gradient(bottom, rgb(163,227,43) 6%, rgb(115,201,87) 72%);
    background-image: -moz-linear-gradient(bottom, rgb(163,227,43) 6%, rgb(115,201,87) 72%);
    background-image: -webkit-linear-gradient(bottom, rgb(163,227,43) 6%, rgb(115,201,87) 72%);
    background-image: -ms-linear-gradient(bottom, rgb(163,227,43) 6%, rgb(115,201,87) 72%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.06, rgb(163,227,43)), color-stop(0.72, rgb(115,201,87)) );
    /*盒子阴影*/
    -webkit-box-shadow:  0px 4px 2px 2px rgba(200, 200, 200, 0.5);
    box-shadow:  0px 4px 2px 2px rgba(200, 200, 200, 0.5);
}
#footer_container {
    height:70px;
    width:100%;
    /*渐变背景颜色*/
    background-image: linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -o-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -moz-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -webkit-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -ms-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.06, rgb(115,201,87)),  color-stop(0.72, rgb(163,227,43)) );
    /*盒子阴影*/
    -webkit-box-shadow:  0px -4px 2px 2px rgba(200, 200, 200, 0.5);
    box-shadow:  0px -4px 2px 2px rgba(200, 200, 200, 0.5);
}
#header_Title {
    float:left;
    text-shadow:-2px 5px 5px #999;
}
nav {
    float:right;
    width:59%;
}
nav a {
    float: left;
    padding: 25px;
    width: 27%;
    cursor:pointer;
    text-align: center;
    text-decoration: none;
    /*设置动画,时间*/
    -webkit-transition:color 0.6s linear;
    -moz-transition:color 0.6s linear;
    -o-transition:color 0.6s linear;
    -ms-transition:color 0.6s linear;
    transition:color 0.6s linear;
}
nav a:hover {
    color:#6FF;
}
#main {
    padding: 30px 0;
}
#main article {
    float: left;
    width: 57%;
}
#main aside {
    float: right;
    width: 28%;
    padding: 0 5% 10px;
    /*渐变背景颜色*/
    background-image: linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -o-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -moz-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -webkit-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -ms-linear-gradient(bottom, rgb(115,201,87) 6%, rgb(163,227,43) 72%);
    background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0.06, rgb(115,201,87)),  color-stop(0.72, rgb(163,227,43)) );
    /*盒子阴影*/
    -webkit-box-shadow:  0px 4px 2px 2px rgba(200, 200, 200, 0.5);
    box-shadow:  0px 4px 2px 2px rgba(200, 200, 200, 0.5);
    margin-top:10px;
}
.clearfix {
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
</style>
</head>
<body>
<div id="header_container">
  <div class="wrapper clearfix">
    <h1 id="header_Title">Crow_时生</h1>
    <nav>
      <ul>
        <li><a>HTML5</a></li>
        <li><a>CSS3</a></li>
        <li><a>Java</a></li>
        <li><a>JavaScript</a></li>
        <li><a>JQuery</a></li>
      </ul>
    </nav>
  </div>
</div>
<div id="main_container">
  <div id="main" class="wrapper clearfix">
    <article>
      <section>
        <h2>article section h2</h2>
        <p>在CSS3来没出现的时候，要改变页面上选中文字的背景色以及文字颜色，是一件相当甚至无法做到的事情。但是，随着CSS3到来，越来越多的浏览器认可并支持，一切又显得那么自然而然。虽然有些顽固的糟老头（如IE浏览器）还不认可这个新生的CSS3，但是，丝毫不影响其在其他浏览器上对UI的又一次改进。
          
          目前Firefox、Safari、Chrome以及Opera浏览器都支持文本选择属性，如果浏览器不支持该属性，会直接忽略它，所以不会产生任何不良的影响。 </p>
      </section>
      <section>
        <h2>article section h2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
      </section>
      <section>
        <h2>article section h2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
      </section>
      <section>
        <h2>article section h2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
      </section>
      <section>
        <h2>article section h2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
      </section>
    </article>
    <aside>
      <h3>aside</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
    </aside>
    <aside>
      <h3>aside</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
    </aside>
  </div>
</div>
<div id="footer_container">
  <div id="footer" class="wrapper">
    <h3>Corw,时生...</h3>
  </div>
</div>
</body>
</html>