КОММЕНТАРИЙ: Примечания, я считаю, что все знакомы с этим словом. Ниже приведен хороший пример, который может достичь специальных эффектов липких заметок через 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> post note </title>
<стиль типа = "text/css">
*{
поля: 0;
Заполнение: 0;
}
тело{
Семейство шрифта: ариал, без зарисования;
размер шрифта: 100%;
поля: 3ем;
Фон:#666;
Цвет: #ffff;
}
H2, p {
размер шрифта: 100%;
шрифт-вес: нормальный;
}
ul, li {
Список стиля: нет;
}
уль {
переполнение: скрыто;
Заполнение: 3EM;
}
уль li a {
Текстовое декорация: нет;
Цвет:#000;
Фон: #FFC;
дисплей: блок;
Высота: 10EM;
Ширина: 10EM;
Заполнение: 1ем;
}
уль li {
поля: 1ем;
Плавание: осталось;
}
Ul li H2
{
размер шрифта: 140%;
шрифт-вес: жирный шрифт;
надоеволос: 10px;
}
уль ли р
{
Семейство Font: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
размер шрифта: 110%;
}
уль ли а
{
Текстовое декорация: нет;
Цвет: #000;
Фон: #FFC;
дисплей: блок;
Высота: 10EM;
Ширина: 10EM;
Заполнение: 1ем; / * Firefox */
-Мозо-бокс-тень: 5px 5px 7px rgba (33,33,33,1); / * Safari+Chrome */
-Вебкит-бокс-шахта: 5px 5px 7px rgba (33,33,33, 0,7); / * Opera */
Box-Shadow: 5px 5px 7px rgba (33,33,33, 0,7);
}
уль li a {
-Вебкит-трансформ: вращение (-6deg);
-o-transform: utate (-6deg);
-Моз-трансформ: вращение (-6deg);
}
UL LI: Nth-Child (даже) a {
-О-трансформирование: вращение (4deg);
-Вебкит-трансформ: вращение (4deg);
-Моз-трансформ: вращение (4deg);
позиция: относительно;
Верх: 5px;
}
ul li: Nth-Child (3n) a {
-o-transform: utate (-3deg);
-Webkit-transform: rotate (-3deg);
-Моз-трансформ: вращение (-3deg);
позиция: относительно;
Верх: -5px;
}
ul li: Nth-Child (5n) a {
-О-трансформирование: вращение (5deg);
-Webkit-Transform: rotate (5Deg);
-Моз-трансформ: вращение (5deg);
позиция: относительно;
Верх: -10px;
}
Ul Li A: Hover, Ul Li A: Focus {
-Мозо-бокс-тень: 10px 10px 7px rgba (0,0,0, 0,7);
-Webkit-box-shadow: 10px 10px 7px rgba (0,0,0, 0,7);
Box-Shadow: 10px 10px 7px rgba (0,0,0, 0,7);
-Вебкит-трансформация: масштаб (1,25);
-Моз-трансформ: масштаб (1,25);
-О-трансформация: масштаб (1,25);
позиция: относительно;
z-index: 5;
}
UL LI: Nth-Child (даже) a {
-О-трансформирование: вращение (4deg);
-Вебкит-трансформ: вращение (4deg);
-Моз-трансформ: вращение (4deg);
позиция: относительно;
Верх: 5px;
Фон: #CFC;
}
ul li: Nth-Child (3n) a {
-o-transform: utate (-3deg);
-Webkit-transform: rotate (-3deg);
-Моз-трансформ: вращение (-3deg);
позиция: относительно;
Верх: -5px;
Фон: #CCF;
}
</style>
<link href =? Family = reenie+Beanie: обычный rel = stylesheet type = text/css>
</head>
<тело>
<ul>
<li> <a href =#>
<h2> dudu: </h2>
<p> Почему в последнее время не было красивых постов? Я обязательно дам рекомендацию заголовка, рекомендую! Рекомендую! </P>
</a> </li>
<li> <a href =#>
<h2> дядя Том: </h2>
<p> Член команды отправился в Microsoft, чтобы сделать 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>