Commentaire: Notes collantes, je crois que tout le monde connaît ce mot. Il existe un bon exemple ci-dessous qui peut réaliser les effets spéciaux des notes collantes via HTML5. Des amis qui l'aiment peuvent en apprendre à ce sujet.
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Post Note </Title>
<style type = "text / css">
* {
marge: 0;
rembourrage: 0;
}
corps{
Font-Family: Arial, Sans-Serif;
taille de police: 100%;
marge: 3em;
Contexte: # 666;
Couleur: #ffff;
}
H2, P {
taille de police: 100%;
Police-poids: normal;
}
ul, li {
Style de liste: aucun;
}
ul {
débordement: caché;
rembourrage: 3em;
}
ul li a {
Décoration du texte: aucune;
Couleur: # 000;
Contexte: #FFC;
Affichage: bloc;
hauteur: 10em;
Largeur: 10EM;
rembourrage: 1em;
}
ul li {
marge: 1em;
flottant: à gauche;
}
ul li h2
{
taille de police: 140%;
Police-poids: Bold;
Padding-Bottom: 10px;
}
ul li p
{
Font-Family: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
taille de police: 110%;
}
ul li a
{
Décoration du texte: aucune;
Couleur: # 000;
Contexte: #FFC;
Affichage: bloc;
hauteur: 10em;
Largeur: 10EM;
rembourrage: 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); / * Opéra * /
Box-Shadow: 5px 5px 7px RGBA (33,33,33, .7);
}
ul li a {
-Webkit-Transform: Rotate (-6deg);
-o-transform: rotation (-6deg);
-moz-transform: Rotation (-6deg);
}
ul li: nth-child (même) a {
-o-transform: rotation (4DEG);
-Webkit-Transform: Rotate (4Deg);
-Moz-transform: Rotation (4deg);
Position: relative;
En haut: 5px;
}
ul li: nth-child (3n) a {
-o-transform: rotation (-3deg);
-Webkit-transform: Rotate (-3deg);
-moz-transform: Rotate (-3deg);
Position: relative;
en haut: -5px;
}
ul li: nth-child (5n) a {
-o-transform: rotation (5deg);
-Webkit-Transform: Rotate (5Deg);
-Moz-transform: Rotation (5deg);
Position: relative;
en haut: -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: échelle (1,25);
-Moz-transform: échelle (1,25);
-o-transform: échelle (1,25);
Position: relative;
Z-Index: 5;
}
ul li: nth-child (même) a {
-o-transform: rotation (4DEG);
-Webkit-Transform: Rotate (4Deg);
-Moz-transform: Rotation (4deg);
Position: relative;
En haut: 5px;
Contexte: #cfc;
}
ul li: nth-child (3n) a {
-o-transform: rotation (-3deg);
-Webkit-transform: Rotate (-3deg);
-moz-transform: Rotate (-3deg);
Position: relative;
en haut: -5px;
Contexte: #ccf;
}
</ style>
<link href =? Family = Reenie + beanie: régulier rel = style de feuille de style = texte / css>
</ head>
<body>
<ul>
<li> <a href = #>
<h2> dudu: </h2>
<p> Pourquoi n'y a-t-il pas eu de beaux messages récemment? Je vais certainement donner une recommandation de titre, recommander! Recommander! </p>
</a> </li>
<li> <a href = #>
<h2> Oncle Tom: </h2>
<p> Un membre de l'équipe est allé à Microsoft pour faire SDE3, et il a dû embaucher un nouveau membre </p>
</a> </li>
<li> <a href = #>
<h2> frère technique: </h2>
<p> O2DS est le même que le livre que j'ai traduit. Je dois le traduire plus vite que lui. Travaillez les heures supplémentaires la nuit, vite! rapide! rapide! </p>
</a> </li>
<li> <a href = #>
<h2> artech: </h2>
<p> Il y a si peu de messages dans WCF. Il semble que je dois publier plus de messages pour que tout le monde puisse apprendre </p>
</a> </li>
<li> <a href = #>
<h2> jirigala: </h2>
<p> Pour faire la gestion de la permission et la gestion du flux de travail à l'extrême de mes capacités, une personne ne peut faire que peu de choses </p>
</a> </li>
<li> <a href = #>
<h2> un maître des arts martiaux: </h2>
<p> Je n'irai jamais à l'interview pour moins de 25 000 yuans, c'est grand-mère </p>
</a> </li>
</ul>
</docy>
</html>