ความคิดเห็น: บันทึกย่อฉันเชื่อว่าทุกคนคุ้นเคยกับคำนี้ มีตัวอย่างที่ดีด้านล่างที่สามารถบรรลุเอฟเฟกต์พิเศษของโน้ตเหนียวผ่าน 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> โพสต์หมายเหตุ </title>
<style type = "text/css">
-
มาร์จิ้น: 0;
Padding: 0;
-
ร่างกาย{
Font-Family: Arial, Sans-Serif;
ขนาดตัวอักษร: 100%;
มาร์จิ้น: 3em;
ความเป็นมา:#666;
สี: #FFFF;
-
H2, P {
ขนาดตัวอักษร: 100%;
Font-Weight: ปกติ;
-
ul, li {
รายการสไตล์: ไม่มี;
-
ul {
ล้น: ซ่อน;
Padding: 3em;
-
ul li a {
การตกแต่งข้อความ: ไม่มี;
สี:#000;
ความเป็นมา: #FFC;
แสดง: บล็อก;
ความสูง: 10em;
ความกว้าง: 10em;
Padding: 1EM;
-
ul li {
มาร์จิ้น: 1em;
ลอย: ซ้าย;
-
ul li h2
-
ขนาดตัวอักษร: 140%;
Font-Weight: ตัวหนา;
Padding-bottom: 10px;
-
ul li p
-
Font-Family: Reenie Beanie, Arial, Sans-Serif, Microsoft Yahei;
ขนาดตัวอักษร: 110%;
-
ul li a
-
การตกแต่งข้อความ: ไม่มี;
สี: #000;
ความเป็นมา: #FFC;
แสดง: บล็อก;
ความสูง: 10em;
ความกว้าง: 10em;
Padding: 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-transform: หมุน (-6DEG);
-moz-transform: หมุน (-6deg);
-
ul li: nth-child (แม้) a {
-O-transform: หมุน (4DEG);
-webkit-transform: หมุน (4DEG);
-moz-transform: หมุน (4deg);
ตำแหน่ง: ญาติ;
ด้านบน: 5px;
-
ul li: nth-child (3n) a {
-O-transform: หมุน (-3Deg);
-webkit-transform: หมุน (-3deg);
-moz-transform: หมุน (-3deg);
ตำแหน่ง: ญาติ;
ด้านบน: -5px;
-
ul li: nth-child (5n) a {
-O-Transform: หมุน (5DEG);
-webkit-transform: หมุน (5deg);
-moz-transform: หมุน (5deg);
ตำแหน่ง: ญาติ;
ด้านบน: -10px;
-
ul li a: โฮเวอร์, ul li a: โฟกัส {
-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: สเกล (1.25);
-moz-transform: สเกล (1.25);
-O-transform: สเกล (1.25);
ตำแหน่ง: ญาติ;
z-index: 5;
-
ul li: nth-child (แม้) a {
-O-transform: หมุน (4DEG);
-webkit-transform: หมุน (4DEG);
-moz-transform: หมุน (4deg);
ตำแหน่ง: ญาติ;
ด้านบน: 5px;
ความเป็นมา: #CFC;
-
ul li: nth-child (3n) a {
-O-transform: หมุน (-3Deg);
-webkit-transform: หมุน (-3deg);
-moz-transform: หมุน (-3deg);
ตำแหน่ง: ญาติ;
ด้านบน: -5px;
ความเป็นมา: #ccf;
-
</style>
<link href =? family = reenie+beanie: rel ปกติ = stylesheet 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> เพื่อให้การจัดการการอนุญาตและการจัดการเวิร์กโฟลว์เพื่อความสามารถสูงสุดของฉันบุคคลสามารถทำได้เพียงเล็กน้อย </p>
</a> </li>
<li> <a href =#>
<H2> อาจารย์ศิลปะการต่อสู้: </h2>
<p> ฉันจะไม่ไปสัมภาษณ์น้อยกว่า 25,000 หยวนมันเป็นยาย </p>
</a> </li>
</ul>
</body>
</html>