Kommentar: Sticky Notes, ich glaube, jeder kennt dieses Wort. Nachfolgend gibt es ein gutes Beispiel, mit dem die Spezialeffekte von Haftnotizen durch HTML5 erzielt werden können. Freunde, die es mögen, können davon lernen.
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> postnotiz </title>
<style type = "text/css">
*{{
Rand: 0;
Polsterung: 0;
}
Körper{
Schriftfamilie: Arial, Sans-Serif;
Schriftgröße: 100%;
Rand: 3em;
Hintergrund:#666;
Farbe: #ffff;
}
H2, p {
Schriftgröße: 100%;
Schriftgewicht: normal;
}
ul, li {
Listenstil: Keine;
}
ul {
Überlauf: versteckt;
Polsterung: 3em;
}
ul li a {
Textdekoration: Keine;
Farbe:#000;
Hintergrund: #ffc;
Anzeige: Block;
Höhe: 10em;
Breite: 10em;
Polsterung: 1em;
}
ul li {
Rand: 1EM;
float: links;
}
Ul Li H2
{
Schriftgröße: 140%;
Schriftgewicht: fett;
Padding-Bottom: 10px;
}
ul li p
{
Schriftfamilie: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
Schriftgröße: 110%;
}
ul li a
{
Textdekoration: Keine;
Farbe: #000;
Hintergrund: #ffc;
Anzeige: Block;
Höhe: 10em;
Breite: 10em;
Polsterung: 1em; / * Firefox */
-moz-box-shadow: 5px 5px 7px rgba (33,33,33,1); / * Safari+Chrom *//
-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: rotate (-6deg);
-O-transform: rotieren (-6 Grad);
-moz-transform: drehen (-6deg);
}
Ul li: n-Kind (sogar) a {{
-O-Transformation: Drehen (4DEG);
-Webkit-Transformation: Drehen (4DEG);
-moz-transform: drehen (4DEG);
Position: Relativ;
Top: 5px;
}
Ul li: n-Kind (3n) a {{
-O-transform: rotieren (-3deg);
-Webkit-transform: rotate (-3deg);
-moz-transform: rotieren (-3 Grad);
Position: Relativ;
Top: -5px;
}
Ul li: nth-Kind (5n) a {{
-O-Transformation: Drehen (5 Grad);
-Webkit-Transformation: Drehen (5DEG);
-moz-transform: drehen (5deg);
Position: Relativ;
Top: -10px;
}
ul li a: schwebe, ul li a: fokus {
-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-Transformation: Skala (1,25);
-moz-transform: Skala (1,25);
-O-Transformation: Skala (1,25);
Position: Relativ;
Z-Index: 5;
}
Ul li: n-Kind (sogar) a {{
-O-Transformation: Drehen (4DEG);
-Webkit-Transformation: Drehen (4DEG);
-moz-transform: drehen (4DEG);
Position: Relativ;
Top: 5px;
Hintergrund: #cfc;
}
Ul li: n-Kind (3n) a {{
-O-transform: rotieren (-3deg);
-Webkit-transform: rotate (-3deg);
-moz-transform: rotieren (-3 Grad);
Position: Relativ;
Top: -5px;
Hintergrund: #ccf;
}
</style>
<link href =? family = reenie+beanie: regules rel = styleSheet type = text/css>
</head>
<body>
<ul>
<li> <a href =#>
<h2> DUDU: </H2>
<p> Warum gab es in letzter Zeit keine schönen Beiträge? Ich werde auf jeden Fall eine Überschriftsempfehlung geben, empfehlen! </P>
</a> </li>
<li> <a href =#>
<h2> Onkel Tom: </h2>
<p> Ein Mitglied des Teams ging nach Microsoft, um SDE3 zu machen, und er musste erneut neues Mitglied einstellen </p>
</a> </li>
<li> <a href =#>
<h2> Technischer Bruder: </H2>
<p> o2ds ist das gleiche wie das Buch, das ich übersetzt habe. Ich muss es schneller übersetzen als er. Arbeiten Sie nachts Überstunden, schnell! schnell! Schnell! </p>
</a> </li>
<li> <a href =#>
<h2> artech: </h2>
<p> Es gibt so wenige Beiträge in WCF. Es scheint, dass ich mehr Beiträge für alle veröffentlichen muss, um </p> zu lernen
</a> </li>
<li> <a href =#>
<h2> jirigala: </h2>
<p> Um das Erlaubnismanagement und das Workflow -Management auf die extreme Fähigkeit zu machen, kann eine Person nur wenige Dinge gut tun </p>
</a> </li>
<li> <a href =#>
<h2> ein Kampfsportmeister: </h2>
<p> Ich werde nie für weniger als 25.000 Yuan zum Interview gehen, es ist Oma </p>
</a> </li>
</ul>
</body>
</html>