%h2= "第六章 移动Web界面样式 CSS3"
%section
%p= "选择器"
%p
%article
%lable= "属性选择器"
%lable.zrticle= "完全 [class=article]"
%lable.ddzrticless= "包含 [class*=article]"
%lable.abbddd= "首字母 [class=a]"
%lable.aaaaae= "为字母 [class=e]"
%article
%lable= "伪类选择器"
%div.before= "%div.before content:文字"
%lable.after= "%lable.after content:文字"
%lable.first-child= "%lable.first-child content:文字"
%lable.last-child= "%lable.last-child content:文字"
%lable.nth-child= "%lable.nth-child content:文字"
%lable.nth-last-child= "%lable.nth-last-child content:文字"
%p= "阴影"
%p
%article.shadow
%lable.box-shadow= "这是阴影效果 box-shadow: 3px 4px 2px #000;"
%lable.text-shadow= "这是文本阴影效果 text-shadow: 3px 4px 2px #000;"
%p= "背景"
%p
%article.background
%lable.background-size= "background-size 背景大小"
%lable.background-clip= "background-clip 背景裁剪区域"
%lable.background-origin= "background-origin 参考起始位置"
%lable.background= "background "
%p= "圆角"
%p
%article.radius-art
%lable.lab-radius= "radius 圆角"
%p= "Media Queries 移动设备样式"
%p
%article.radius-art
%lable.lab-radius= "radius 圆角"
%link{rel= "stylesheet", :media => "screen and(max-width:600px)" :href = > "small.css"}
----------------------------------------------------------------------------------------------------------------
.page-frontpage-index{
background-color: #fff;
[class=zrticle]{
background-color: red;
}
[class*=zrticle]{
background-color: #abc;
}
[class^=a]{
background-color: #def;
}
[class$=e]{
background-color: #543;
}
div.before{
content: 'before 添加';
}
.shadow{
.box-shadow{
box-shadow: 3px 4px 2px #000;
-webkit-box-shadow:3px 4px 2px #000;
-moz-box-shadow:3px 4px 2px #000;
padding: 5px 4px;
}
.text-shadow{
text-shadow: 3px 4px 2px #000;
color: #666;
font-size: 16px;
}
}
.background{
height: 80px;
.background-size{
background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
background-size: 50px 40px;
padding: 10px;
}
.background-clip{
background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
background-clip: content-box; /*| padding-box | border-box | no-clip;*/
padding: 10px;
}
.background-origin{
background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
background-origin: content;
padding: 10px;
}
.background{
background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
}
}
.radius-art{
.lab-radius{
background:url(auth/auth-bg.jpg) no-repeat 0px 0px ;
border-radius: 10px 5px;
margin: 40px;
}
}
.Media{
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
搜索的实例动画：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes tada{
0%{-moz-transform:scale(1)}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
100%{-moz-transform:scale(1) rotate(0)}
}
@keyframes tada{
0%{transform:scale(1)}
10%,20%{transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
100%{transform:scale(1) rotate(0)}
}
.logo{width:163px;height:65px;-webkit-animation-duration:1s;-moz-animation-duration:1s;animation-duration: 1s;}
.logo:hover{-webkit-animation-name:tada;-moz-animation-name:tada;-ms-animation-name:tada;animation-name:tada}
</style>
</head>
<body>
<img class="logo" src="http://www.baidu.com/img/bdlogo.gif">
</body>
</html>
