Comentário: Notas pegajosas, acredito que todos estão familiarizados com esta palavra. Há um bom exemplo abaixo que pode alcançar os efeitos especiais das notas pegajosas através do HTML5. Amigos que gostam pode aprender sobre isso.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Post Note </title>
<style type = "text/css">
*{
margem: 0;
preenchimento: 0;
}
corpo{
Fonte-família: Arial, sem serrif;
tamanho de fonte: 100%;
margem: 3em;
Antecedentes:#666;
Cor: #ffff;
}
H2, P {
tamanho de fonte: 100%;
peso-fonte: normal;
}
ul, li {
estilo de lista: nenhum;
}
ul {
estouro: oculto;
preenchimento: 3em;
}
ul li a {
Decoração de texto: Nenhum;
Cor:#000;
Antecedentes: #FFC;
exibição: bloco;
Altura: 10em;
largura: 10em;
preenchimento: 1em;
}
ul li {
margem: 1em;
flutuar: esquerda;
}
ul li h2
{
tamanho de fonte: 140%;
Peso da fonte: negrito;
Botting-Bottom: 10px;
}
ul li p
{
Font-Family: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
tamanho de fonte: 110%;
}
ul li a
{
Decoração de texto: Nenhum;
Cor: #000;
Antecedentes: #FFC;
exibição: bloco;
Altura: 10em;
largura: 10em;
preenchimento: 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 */
Shadow Box: 5px 5px 7px RGBA (33,33,33, .7);
}
ul li a {
-webkit-transform: girate (-6deg);
-o-transform: girate (-6deg);
-moz-transform: girate (-6deg);
}
ul li: nés-filho (uniforme) um {
-o-transform: girate (4deg);
-webkit-transform: girate (4deg);
-moz-transform: girate (4deg);
Posição: relativa;
topo: 5px;
}
ul li: nés-filho (3n) a {
-o-transform: girate (-3deg);
-webkit-transform: girate (-3deg);
-moz-transform: girate (-3deg);
Posição: relativa;
topo: -5px;
}
ul li: nés-filho (5n) a {
-o-transform: girate (5deg);
-Webkit-transform: girate (5deg);
-moz-transform: girate (5deg);
Posição: relativa;
topo: -10px;
}
Ul Li A: Passe o mouse, ul li a: foco {
-Moz-Box-Shadow: 10px 10px 7px RGBA (0,0,0, .7);
-Webkit-box-shadow: 10px 10px 7px rgba (0,0,0, .7);
Shadow de caixa: 10px 10px 7px RGBA (0,0,0, .7);
-Webkit-transform: escala (1,25);
-moz-transform: escala (1,25);
-O-transform: escala (1,25);
Posição: relativa;
Index z: 5;
}
ul li: nés-filho (uniforme) um {
-o-transform: girate (4deg);
-webkit-transform: girate (4deg);
-moz-transform: girate (4deg);
Posição: relativa;
topo: 5px;
Antecedentes: #cfc;
}
ul li: nés-filho (3n) a {
-o-transform: girate (-3deg);
-webkit-transform: girate (-3deg);
-moz-transform: girate (-3deg);
Posição: relativa;
topo: -5px;
Antecedentes: #ccf;
}
</style>
<link href =? Family = reenie+beanie: regular Rel = Stylesheet Type = Text/CSS>
</head>
<Body>
<ul>
<li> <a href =#>
<H2> dudu: </h2>
<p> Por que não houve postagens bonitas recentemente? Definitivamente vou dar uma recomendação de manchete, recomendo! Recomendar! </p>
</a> </li>
<li> <a href =#>
<H2> tio Tom: </h2>
<p> Um membro da equipe foi para a Microsoft para fazer SDE3, e ele teve que contratar um novo membro novamente </p>
</a> </li>
<li> <a href =#>
<H2> Irmão técnico: </h2>
<p> O2DS é o mesmo que o livro que traduzi. Devo traduzi -lo mais rápido que ele. Trabalhe horas extras à noite, rápido! rápido! rápido! </p>
</a> </li>
<li> <a href =#>
<H2> Artech: </h2>
<p> Existem tão poucas postagens no WCF. Parece que tenho que postar mais postagens para todos aprenderem </p>
</a> </li>
<li> <a href =#>
<H2> jirigala: </h2>
<p> Para fazer gerenciamento de permissão e gerenciamento de fluxo de trabalho ao extremo da minha capacidade, uma pessoa pode fazer apenas tão poucas coisas bem </p>
</a> </li>
<li> <a href =#>
<H2> Um mestre das artes marciais: </h2>
<p> Eu nunca irei à entrevista por menos de 25.000 yuan, é avó </p>
</a> </li>
</ul>
</body>
</html>