コメント：粘着性のメモ、私は誰もがこの言葉に精通していると信じています。以下には、HTML5を介して粘着性メモの特殊効果を達成できる良い例があります。それが好きな友達はそれについて学ぶことができます。
<！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>投稿ノート</title>
<style type = "text/css">
*{
マージン：0;
パディング：0;
}
体{
フォントファミリー：arial、sans-serif;
フォントサイズ：100％;
マージン：3em;
背景：＃666;
色：#ffff;
}
H2、p {
フォントサイズ：100％;
font-weight：正常;
}
ul、li {
リストスタイル：なし;
}
ul {
オーバーフロー：隠し;
パディング：3em;
}
ul li a {
テキスト装置：なし;
色：＃000;
背景：#ffc;
表示：ブロック;
高さ：10em;
幅：10em;
パディング：1EM;
}
ul li {
マージン：1EM;
フロート：左;
}
ul li H2
{
フォントサイズ：140％;
font-weight：bold;
パディングボトム：10px;
}
ul li p
{
フォントファミリー：Reenie Beanie、Arial、Sans-Serif、Microsoft Yahei;
フォントサイズ：110％;
}
ul li a
{
テキスト装置：なし;
色：＃000;
背景：#ffc;
表示：ブロック;
高さ：10em;
幅：10em;
パディング：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）;
}
ul li a {
-webkit-transform：回転（-6deg）;
-o-transform：rotate（-6deg）;
-moz-transform：回転（-6deg）;
}
ul li：nth-child（偶数）a {
-o-transform：Rotate（4DEG）;
-webkit-transform：回転（4DEG）;
-moz-transform：Rotate（4DEG）;
位置：相対;
トップ：5px;
}
ul li：nth-child（3n）a {
-o-transform：Rotate（-3deg）;
-webkit-transform：回転（-3deg）;
-moz-transform：Rotate（-3deg）;
位置：相対;
上：-5px;
}
ul li：nth-child（5n）a {
-o-transform：回転（5deg）;
-webkit-transform：Rotate（5Deg）;
-moz-transform：Rotate（5Deg）;
位置：相対;
トップ：-10px;
}
ul li A：ホバー、ul li A：フォーカス{
-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：スケール（1.25）;
-moz-transform：スケール（1.25）;
-o-transform：スケール（1.25）;
位置：相対;
z-index：5;
}
ul li：nth-child（偶数）a {
-o-transform：Rotate（4DEG）;
-webkit-transform：回転（4DEG）;
-moz-transform：Rotate（4DEG）;
位置：相対;
トップ：5px;
背景：#cfc;
}
ul li：nth-child（3n）a {
-o-transform：Rotate（-3deg）;
-webkit-transform：回転（-3deg）;
-moz-transform：Rotate（-3deg）;
位置：相対;
上：-5px;
背景：#ccf;
}
</style>
<link href =？family = reenie+beanie：レギュラーrel = styleSheet type = text/css>
</head>
<body>
<ul>
<li> <a href =＃>
<h2> dudu：</h2>
<p>最近美しい投稿がなかったのはなぜですか？私は間違いなく見出しの推奨事項を与えます、お勧めです！</p>
</a> </li>
<li> <a href =＃>
<h2>アンクルトム：</h2>
<p>チームのメンバーはSDE3を行うためにマイクロソフトに行きました、そして、彼は再び新しいメンバーを雇わなければなりませんでした</p>
</a> </li>
<li> <a href =＃>
<h2>技術兄弟：</h2>
<p> o2dsは、私が翻訳した本と同じです。私は彼よりも速く翻訳する必要があります。夜の時間は速く働きます！速い！速い！</p>
</a> </li>
<li> <a href =＃>
<h2> artech：</h2>
<p> WCFには非常に少ない投稿があります。誰もが学習するためにもっと投稿を投稿しなければならないようです</p>
</a> </li>
<li> <a href =＃>
<h2> Jirigala：</h2>
<p>許可管理とワークフロー管理を私の能力の極端にするために、人はそれほど少数のことしかうまくできません</p>
</a> </li>
<li> <a href =＃>
<h2>格闘技の達人：</h2>
<p>私は25,000元未満でインタビューに行くことはありません、それはおばあちゃんです</p>
</a> </li>
</ul>
</body>
</html>