Design My Virtual Home之留言板-前端效果

来源：互联网发布：速达软件功能编辑：程序博客网时间：2024/06/06 04:07

今天看了一篇有关HTML5的文章，将如何设计利用HTML5和CSS3来设计便签，比较详细，以后以备拿来做留言板模块，先贴上去，免得忘记了

原英文网址：http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/

原译文网址：http://www.cnblogs.com/TomXu/archive/2011/12/13/2285755.html

效果图

源代码

<!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>    <title>留言板-便签效果</title>    <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet"        type="text/css">    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            font-family: 微软雅黑,arial,sans-serif;            font-size: 100%;            margin: 3em;            background: #666;            color: #fff;        }        h2, p        {            font-size: 100%;            font-weight: normal;        }        ul, li        {            list-style: none;        }        ul        {            overflow: hidden;            padding: 3em;        }        ul li a        {            text-decoration: none;            color: #000;            background: #ffc;            display: block;            height: 10em;            width: 10em;            padding: 1em;        }        ul li        {            margin: 1em;            float: left;        }        ul li h2        {            font-size: 140%;            font-weight: bold;            padding-bottom: 10px;        }        ul li p        {            font-family: "Reenie Beanie" ,arial,sans-serif,微软雅黑;            font-size: 110%;        }        ul li a        {            text-decoration: none;            color: #000;            background: #ffc;            display: block;            height: 10em;            width: 10em;            padding: 1em; /* Firefox */            -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1); /* Safari+Chrome */            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /* Opera */            box-shadow: 5px 5px 7px rgba(33,33,33,.7); /*第五步添加*/            -moz-transition: -moz-transform .15s linear;            -o-transition: -o-transform .15s linear;            -webkit-transition: -webkit-transform .15s linear;        }        ul li:nth-child(even) a        {            -o-transform: rotate(4deg);            -webkit-transform: rotate(4deg);            -moz-transform: rotate(4deg);            position: relative;            top: 5px;        }        ul li:nth-child(3n) a        {            -o-transform: rotate(-3deg);            -webkit-transform: rotate(-3deg);            -moz-transform: rotate(-3deg);            position: relative;            top: -5px;        }        ul li:nth-child(5n) a        {            -o-transform: rotate(5deg);            -webkit-transform: rotate(5deg);            -moz-transform: rotate(5deg);            position: relative;            top: -10px;        }        ul li a:hover, ul li a:focus        {            -moz-box-shadow: 10px 10px 7px rgba(0,0,0,.7);            -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);            box-shadow: 10px 10px 7px rgba(0,0,0,.7);            -webkit-transform: scale(1.25);            -moz-transform: scale(1.25);            -o-transform: scale(1.25);            position: relative;            z-index: 5;        }        ul li:nth-child(even) a        {            -o-transform: rotate(4deg);            -webkit-transform: rotate(4deg);            -moz-transform: rotate(4deg);            position: relative;            top: 5px;            background: #cfc;        }        ul li:nth-child(3n) a        {            -o-transform: rotate(-3deg);            -webkit-transform: rotate(-3deg);            -moz-transform: rotate(-3deg);            position: relative;            top: -5px;            background: #ccf;        }    </style></head><body>    <ul>        <li><a href="#">            <h2>                DZJ：</h2>            <p>                最近咋没有美女发帖呢？我一定给个头条推荐,recommend!recommend!</p>        </a></li>        <li><a href="#">            <h2>                DZJ：</h2>            <p>                Team的一个成员去了Microsoft做SDE3，又得hire new member了</p>        </a></li>        <li><a href="#">            <h2>                DZJ：</h2>            <p>                O2DS和我翻译的书是一样，我一定要比他翻得快, 晚上加班翻,fast! fast! fast!</p>        </a></li>        <li><a href="#">            <h2>                DZJ：</h2>            <p>                WCF的帖子真是少，看来我得多发点帖子让大家学习呢</p>        </a></li>        <li><a href="#">            <h2>                DZJ：</h2>            <p>                将权限管理、工作流管理做到我能力的极致，一个人只能做好那么很少的几件事情</p>        </a></li>        <li><a href="#">            <h2>                某武林高手：</h2>            <p>                低于25000块的面试再也不去了，它grandma的</p>        </a></li>    </ul></body></html>