Heim
Web-Frontend
H5-Tutorial
Hinweise zu in HTML5 implementierten Spezialeffekten (praktische Weitergabe)_HTML5-Tutorialfähigkeiten



Hinweise zu in HTML5 implementierten Spezialeffekten (praktische Weitergabe)_HTML5-Tutorialfähigkeiten
May 16, 2016 pm 03:48 PM
html5
Notizen
Code kopieren
Der Code lautet wie folgt:<!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">
*{
margin:0;
padding:0;
}
body{
font-family:arial,sans-serif;
Schriftgröße:100%;
Marge:3em;
Hintergrund:#666 ;
Farbe:#fff ;
}
h2,p{
font-size:100%;
Schriftstärke:normal;
}
ul,li{
list-style:none;
}
ul{
overflow:hidden;
Polsterung:3em;
}
ul li a{
text-decoration:none;
Farbe:#000 ;
Hintergrund:#ffc ;
display:block;
Höhe:10em;
Breite:10em;
Polsterung:1em;
}
ul li{
margin:1em;
float:left;
}
ul li h2
{
font-size: 140%;
Schriftstärke: fett;
padding-bottom: 10px;
}
ul li p
{
Schriftfamilie: „Reenie Beanie“, Arial, Sans-Serif, 微软雅黑;
Schriftgröße: 110 %;
}
ul li a
{
text-decoration: none;
Farbe: #000 ;
Hintergrund: #ffc ;
Anzeige: Block;
Höhe: 10em;
Breite: 10em;
Polsterung: 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 a{
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
Position:relativ;
top:5px;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
Position:relativ;
oben:-5px;
}
ul li:nth-child(5n) a{
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
Position:relativ;
oben:-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-transform: scale(1.25);
Position:relativ;
z-index:5;
}
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
Position:relativ;
top:5px;
Hintergrund:#cfc ;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
Position:relativ;
oben:-5px;
Hintergrund:#ccf ;
}
</style>
<link href=“http://fonts.googleapis.com/css?family=Reenie Beanie:regular“ rel=“stylesheet“ type=“text/css“>
</head>
<body>
<ul>
<li><a href=“#“>
<h2>Dudu:</h2>
<p>最近咋没有美女发帖呢?我一定给个头条推荐,empfehlen!empfehlen!</p>
</a></li>
<li><a href=“#“>
<h2>汤姆大叔:</h2>
<p>Team的一个成员去了Microsoft做SDE3,又得neues Mitglied einstellen了</p>
</a></li>
<li><a href=“#“>
<h2>技术弟弟:</h2>
<p>O2DS和我翻译的书是一样, 我一定要比他翻得快, 晚上加班翻, schnell! schnell! schnell!</p>
</a></li>
<li><a href=“#“>
<h2>Artech:</h2>
<p>WCF的帖子真是少,看来我得多发点帖子让大家学习呢</p>
</a></li>
<li><a href=“#“>
<h2>吉日嘎拉:</h2>
<p> p>
</a></li>
<li><a href=“#“>
<h2>某武林高手:</h2>
<p>Ich werde nie wieder für weniger als 25.000 Yuan zu einem Vorstellungsgespräch gehen, es ist Oma</p></li></ul> /body>
</html>
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌

Hot-Tools-Tags

Heißer Artikel
Wie lange dauert es, um Split Fiction zu schlagen?
3 Wochen vor
By DDD
Repo: Wie man Teamkollegen wiederbelebt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
