Comments: Note: I'm sure you are not familiar with this word. Below is a good example to use html5 to implement note effects.
The Code is as follows:
<! 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> note </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
Body {
Font-family: arial, sans-serif;
Font-size: 100%;
Margin: 3em;
Background: #666;
Color: # fff;
}
H2, p {
Font-size: 100%;
Font-weight: normal;
}
Ul, li {
List-style: none;
}
Ul {
Overflow: hidden;
Padding: 3em;
}
Ul li {
Text-decoration: none;
Color: #000;
Background: # ffc;
Display: block;
Height: 10em;
Width: 10em;
Padding: 1em;
}
Ul li {
Margin: 1em;
Float: left;
}
Ul li h2
{
Font-size: 140%;
Font-weight: bold;
Padding-bottom: 10px;
}
Ul li p
{
Font-family: "Reenie beeni", arial, sans-serif,;
Font-size: 110%;
}
Ul li
{
Text-decoration: none;
Color: #000;
Background: # ffc;
Display: block;
Height: 10em;
Width: 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);/* Opera */
Box-shadow: 5px 5px 7px rgba (33,33, 33,. 7 );
}
Ul li {
-Webkit-transform: rotate (-6deg );
-O-transform: rotate (-6deg );
-Moz-transform: rotate (-6deg );
}
Ul li: nth-child (even) {
-O-transform: rotate (4deg );
-Webkit-transform: rotate (4deg );
-Moz-transform: rotate (4deg );
Position: relative;
Top: 5px;
}
Ul li: nth-child (3n) {
-O-transform: rotate (-3deg );
-Webkit-transform: rotate (-3deg );
-Moz-transform: rotate (-3deg );
Position: relative;
Top:-5px;
}
Ul li: nth-child (5n) {
-O-transform: rotate (5deg );
-Webkit-transform: rotate (5deg );
-Moz-transform: rotate (5deg );
Position: relative;
Top:-10px;
}
Ul li a: hover, ul li a: focus {
-Moz-box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
-Webkit-box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
Box-shadow: 10px 10px 7px rgba (0, 0,. 7 );
-Webkit-transform: scale (1.25 );
-Moz-transform: Scaling (1.25 );
-O-transform: scale (1, 1.25 );
Position: relative;
Z-index: 5;
}
Ul li: nth-child (even) {
-O-transform: rotate (4deg );
-Webkit-transform: rotate (4deg );
-Moz-transform: rotate (4deg );
Position: relative;
Top: 5px;
Background: # cfc;
}
Ul li: nth-child (3n) {
-O-transform: rotate (-3deg );
-Webkit-transform: rotate (-3deg );
-Moz-transform: rotate (-3deg );
Position: relative;
Top:-5px;
Background: # ccf;
}
</Style>
<Link href = "http://fonts.googleapis.com/css? Family = Reenie + beeni: regular "rel =" stylesheet "type =" text/css ">
</Head>
<Body>
<Ul>
<Li> <a href = "#">
<H2> Dudu: <P> Why haven't I posted beautiful posts recently? I must give a headline recommendation, recommend! Recommend! </P>
</A> </li>
<Li> <a href = "#">
<H2> Uncle Tom: <P> A member of the Team went to Microsoft for SDE3, and got hire new member again. </p>
</A> </li>
<Li> <a href = "#">
<H2> technical brother: <P> O2DS is the same as the book I translated. I must translate it faster than him. I work overtime at night. fast! Fast! Fast! </P>
</A> </li>
<Li> <a href = "#">
<H2> Artech: <P> there are really few posts in WCF. It seems that I have to send more posts for you to learn. </p>
</A> </li>
<Li> <a href = "#">
<H2> Jiri gala: <P> permission management and workflow management are the ultimate capabilities. A single person can do only a few things well. </p>
</A> </li>
<Li> <a href = "#">
<H2> a martial arts expert: <P> no more interviews for less than 25000 pieces, its grandma </p>
</A> </li>
</Ul>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
