Komentar: Catatan lengket, saya percaya semua orang akrab dengan kata ini. Ada contoh yang baik di bawah ini yang dapat mencapai efek khusus dari Sticky Notes melalui HTML5. Teman -teman yang menyukainya bisa mempelajarinya.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Posting Catatan </iteme>
<type style = "text/css">
*{
Margin: 0;
Padding: 0;
}
tubuh{
Font-Family: Arial, Sans-Serif;
Ukuran font: 100%;
margin: 3em;
Latar Belakang:#666;
Warna: #FFFF;
}
h2, p {
Ukuran font: 100%;
Font-Weight: Normal;
}
ul, li {
List-style: tidak ada;
}
ul {
meluap: tersembunyi;
padding: 3em;
}
ul li a {
Dekorasi Teks: Tidak Ada;
Warna:#000;
Latar Belakang: #FFC;
Tampilan: Blok;
Tinggi: 10em;
Lebar: 10em;
padding: 1em;
}
ul li {
margin: 1em;
float: kiri;
}
ul li h2
{
Ukuran font: 140%;
font-weight: tebal;
padding-bottom: 10px;
}
ul li p
{
Font-Family: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
Ukuran font: 110%;
}
ul li a
{
Dekorasi Teks: Tidak Ada;
Warna: #000;
Latar Belakang: #FFC;
Tampilan: Blok;
Tinggi: 10em;
Lebar: 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 */
Kotak-Shadow: 5px 5px 7px RGBA (33,33,33, .7);
}
ul li a {
-webkit-transform: rotate (-6deg);
-o-transform: rotate (-6deg);
-Moz-Transform: rotate (-6deg);
}
ul li: nth-child (even) a {
-o-transform: rotate (4deg);
-webkit-transform: rotate (4deg);
-Moz-Transform: rotate (4deg);
Posisi: kerabat;
Atas: 5px;
}
ul li: nth-child (3n) a {
-o-transform: rotate (-3deg);
-webkit-transform: rotate (-3deg);
-Moz-Transform: rotate (-3deg);
Posisi: kerabat;
Atas: -5px;
}
ul li: nth-child (5n) a {
-o-transform: rotate (5deg);
-webkit-transform: rotate (5deg);
-Moz-Transform: rotate (5deg);
Posisi: kerabat;
Atas: -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);
Kotak-Shadow: 10px 10px 7px RGBA (0,0,0, .7);
-webkit-transform: skala (1.25);
-Moz-Transform: skala (1.25);
-o-transform: skala (1.25);
Posisi: kerabat;
z-index: 5;
}
ul li: nth-child (even) a {
-o-transform: rotate (4deg);
-webkit-transform: rotate (4deg);
-Moz-Transform: rotate (4deg);
Posisi: kerabat;
Atas: 5px;
Latar Belakang: #CFC;
}
ul li: nth-child (3n) a {
-o-transform: rotate (-3deg);
-webkit-transform: rotate (-3deg);
-Moz-Transform: rotate (-3deg);
Posisi: kerabat;
Atas: -5px;
Latar Belakang: #CCF;
}
</tyle>
<tautan href =? family = reenie+beanie: rel reguler = stylesheet type = text/css>
</head>
<body>
<ul>
<li> <a href =#>
<h2> dudu: </h2>
<p> Mengapa belum ada posting yang indah baru -baru ini? Saya pasti akan memberikan rekomendasi headline, rekomendasikan! Rekomendasikan! </p>
</a> </li>
<li> <a href =#>
<h2> Paman Tom: </h2>
<p> Seorang anggota tim pergi ke Microsoft untuk melakukan SDE3, dan dia harus mempekerjakan anggota baru lagi </p>
</a> </li>
<li> <a href =#>
<H2> Saudara Teknis: </h2>
<p> O2DS sama dengan buku yang saya terjemahkan. Saya harus menerjemahkannya lebih cepat darinya. Bekerja lembur di malam hari, cepat! cepat! cepat! </p>
</a> </li>
<li> <a href =#>
<h2> Artech: </h2>
<p> Ada begitu sedikit posting di WCF. Tampaknya saya harus memposting lebih banyak posting untuk semua orang untuk belajar </p>
</a> </li>
<li> <a href =#>
<h2> jirigala: </h2>
<p> Untuk membuat manajemen izin dan manajemen alur kerja dengan kemampuan saya ekstrem, seseorang hanya dapat melakukan begitu sedikit hal dengan baik </p>
</a> </li>
<li> <a href =#>
<h2> master seni bela diri: </h2>
<p> Saya tidak akan pernah pergi ke wawancara dengan harga kurang dari 25.000 yuan, itu nenek </p>
</a> </li>
</ul>
</body>
</html>