تعليق: ملاحظات لزجة ، أعتقد أن الجميع على دراية بهذه الكلمة. هناك مثال جيد أدناه يمكنه تحقيق المؤثرات الخاصة للملاحظات اللاصقة من خلال HTML5. يمكن للأصدقاء الذين يحبون ذلك التعرف على ذلك.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> ملاحظة النشر </title>
<type type = "text/css">
*{
الهامش: 0 ؛
الحشو: 0 ؛
}
جسم{
Font-Family: Arial ، Sans-Serif ؛
حجم الخط: 100 ٪ ؛
الهامش: 3EM ؛
الخلفية:#666 ؛
اللون: #ffff ؛
}
H2 ، P {
حجم الخط: 100 ٪ ؛
خط الوزن: طبيعي ؛
}
ul ، li {
على غرار القائمة: لا شيء ؛
}
ul {
الفائض: مخفي.
الحشو: 3EM ؛
}
ul li a {
تدمير النص: لا شيء ؛
اللون:#000 ؛
الخلفية: #FFC ؛
العرض: كتلة ؛
الارتفاع: 10EM ؛
العرض: 10EM ؛
الحشو: 1EM ؛
}
ul li {
الهامش: 1EM ؛
تعويم: اليسار.
}
ul li H2
{
حجم الخط: 140 ٪ ؛
خط الرصيف: جريئة ؛
حشوة القاع: 10 بكسل ؛
}
ul li p
{
Font-Family: Reenie Beanie ، Arial ، Sans-Serif ، Microsoft Yahei ؛
حجم الخط: 110 ٪ ؛
}
ul li a
{
تدمير النص: لا شيء ؛
اللون: #000 ؛
الخلفية: #FFC ؛
العرض: كتلة ؛
الارتفاع: 10EM ؛
العرض: 10EM ؛
الحشو: 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) ؛ / * أوبرا */
box-shadow: 5px 5px 7px RGBA (33،33،33 ، .7) ؛
}
ul li a {
-webkit-transform: تدوير (-6deg) ؛
-O التحول: تدوير (-6deg) ؛
-moz-transform: تدوير (-6deg) ؛
}
ul li: nth-child (حتى) أ {
-O التحول: تدوير (4DEG) ؛
-webkit-transform: تدوير (4DEG) ؛
-Moz-transform: تدوير (4DEG) ؛
الموقف: قريب
أعلى: 5 بكسل ؛
}
ul li: nth-child (3n) a {
-O التحول: تدوير (-3deg) ؛
-webkit-transform: تدوير (-3deg) ؛
-moz-transform: تدوير (-3deg) ؛
الموقف: قريب
أعلى: -5px ؛
}
ul li: nth-child (5n) a {
-O التحول: تدوير (5DEG) ؛
-بكيت تحويل: تدوير (5DEG) ؛
-moz-transform: تدوير (5DEG) ؛
الموقف: قريب
أعلى: -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: Scale (1.25) ؛
-moz-transform: Scale (1.25) ؛
-O التحول: مقياس (1.25) ؛
الموقف: قريب
Z-index: 5 ؛
}
ul li: nth-child (حتى) أ {
-O التحول: تدوير (4DEG) ؛
-webkit-transform: تدوير (4DEG) ؛
-Moz-transform: تدوير (4DEG) ؛
الموقف: قريب
أعلى: 5 بكسل ؛
الخلفية: #cfc ؛
}
ul li: nth-child (3n) a {
-O التحول: تدوير (-3deg) ؛
-webkit-transform: تدوير (-3deg) ؛
-moz-transform: تدوير (-3deg) ؛
الموقف: قريب
أعلى: -5px ؛
الخلفية: #CCF ؛
}
</style>
<link href =؟ family = reenie+beanie: rel = typesheet type = text/css>
</head>
<body>
<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> لجعل إدارة الإذن وإدارة سير العمل إلى أقصى قدر
</a> </li>
<li> <a href =#>
<h2> سيد فنون القتال: </h2>
<p> لن أذهب إلى المقابلة لمدة تقل عن 25000 يوان ، إنها الجدة </p>
</a> </li>
</ul>
</body>
</html>