댓글 : 스티커 노트, 나는 모든 사람들 이이 단어에 익숙하다고 생각합니다. 아래에는 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> 포스트 노트 </title>
<스타일 유형 = "텍스트/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%;
글꼴 중량 : 대담한;
패딩 바닥 : 10px;
}
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); / * 사파리+크롬 */
-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 변환 : 회전 (-6deg);
-o-transform : 회전 (-6deg);
-Moz 변환 : 회전 (-6deg);
}
ul li : nth-Child (심지어) a {
-o-transform : 회전 (4deg);
-webkit 변환 : 회전 (4deg);
-Moz 변환 : 회전 (4deg);
위치 : 상대;
상단 : 5px;
}
ul li : nth-Child (3n) a {
-o-transform : 회전 (-3deg);
-webkit-transform : 회전 (-3deg);
-Moz 변환 : 회전 (-3deg);
위치 : 상대;
상단 : -5px;
}
ul li : nth-Child (5n) a {
-o-transform : 회전 (5deg);
-webkit-transform : 회전 (5deg);
-Moz 변환 : 회전 (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 변환 : 스케일 (1.25);
-Moz 변환 : 스케일 (1.25);
-O- 변형 : 스케일 (1.25);
위치 : 상대;
Z- 인덱스 : 5;
}
ul li : nth-Child (심지어) a {
-o-transform : 회전 (4deg);
-webkit 변환 : 회전 (4deg);
-Moz 변환 : 회전 (4deg);
위치 : 상대;
상단 : 5px;
배경 : #CFC;
}
ul li : nth-Child (3n) a {
-o-transform : 회전 (-3deg);
-webkit-transform : 회전 (-3deg);
-Moz 변환 : 회전 (-3deg);
위치 : 상대;
상단 : -5px;
배경 : #CCF;
}
</스타일>
<link href =? family = Reenie+Beanie : 일반 rel = 스타일 시트 유형 = 텍스트/css>
</head>
<body>
<ul>
<li> <a href =#>
<H2> Dudu : </h2>
<p> 최근에 아름다운 게시물이 없었던 이유는 무엇입니까? 나는 확실히 헤드 라인 추천을 할 것입니다. 추천! 추천! </p>
</a> </li>
<li> <a href =#>
<H2> 톰 삼촌 : </h2>
<p> 팀원은 SDE3을하기 위해 Microsoft로 가서 새로운 멤버를 다시 고용해야했습니다 </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>