<!DOCTYPE html>
<html>
<head>
<title> 360防丢卫士 </title>
<meta charset="utf-8" />
<link rel="stylesheet" href="index01.css" type="text/css" />
<link rel="stylesheet" href="header.css" type="text/css" />
<link rel="stylesheet" href="banner.css" type="text/css" />
<link rel="stylesheet" href="description.css" type="text/css" /><pre name="code" class="css">@charset "utf-8"
*{
margin:0;padding:0;
}
ul{ list-style-type:none;}
/************ 总体设置 **************/
body{
font-size:12pt;
color:#666;
font-family:"microsoft yahei",Arial;
}
header,footer,section{width:100%;}
#description,#tixing,#icons{width:80%;margin:0 auto;}
header{height:50px;}
#banner{height:550px;}
#description,#hujiao,#tixing,#dingwei{height:650px;}
footer{height:170px;clear:both;}
@charset "utf-8";
/************描述部分************/
#description{
text-align:center;
}
#description>h3,#description>p{
padding-top:30px;
}
#description>h3{
font-size:28pt;
font-weight:normal;
color:#424242;
font-family:"华文细黑";
}
#description>p{
font-size:13pt;
line-height:30px;
color:#949494;
}
#description>div{
width:638px;height:298px;
background-image:url(images/iconlist_2.png);
background-position:-1655px 0;
margin:45px auto 0;
}
@charset "utf-8";
section#banner{
background-image:url(images/bg_1.jpg);
/*bg_size让背景图片填满整个区域，旧浏览器不支持*/
background-size:100% 100%;
background-color:#dedede;
/*问题：无边框或无padding内部元素的margin-top和margin-bottom会越界，和父元素合并
解决：在父元素上定义overflow：hidden；
*/
overflow:hidden;
}
div.title{
width:456px;
height:60px;
background-image:url(images/iconlist_1.png);
background-position:-869px 0;
margin:0 auto;
margin-top:120px;
}
div.title+p{
text-align:center;
font-size:14pt;
color:#7e7e7e;
}
/*5个小球*/
#banner ul{
width:780px;
margin:50px auto;
}
#banner ul li{
position:relative;width:174px;
}
#banner ul i,#banner ul b{
background-image:url(images/iconlist_1.png);
position:absolute;
}
#banner ul i{
width:174px;height:173px;z-index:2;
}
#banner ul #intro_2 i{
background-position:-173px 0px; z-index:2;
}
#banner ul #intro_2{left:150px;
z-index:2;
}
#banner ul #intro_3 i{
background-position:-347px 0px; z-index:2;
}
#banner ul #intro_3{left:300px;
z-index:2;
}
#banner ul #intro_4 i{
background-position:-521px 0px; z-index:2;
}
#banner ul #intro_4{left:450px;
z-index:2;
}
#banner ul #intro_5 i{
background-position:-695px 0px; z-index:2;
}
#banner ul #intro_5{left:600px;
z-index:2;
}
#banner ul b{
width:173px;height:24px;
background-position:-868px -128px;
top:160px;
z-index:1;
}
/************intro_5移动旋转**********/
@-webkit-keyframes move5{
from{
left:-492.72px;
}
to{
left:600px;
}
}
#banner ul #intro_5{
-webkit-animation:move5 4s linear 0s;
}
@-webkit-keyframes move5_ravovle{
from{
transform:rotate(0deg);
}
to{
transform:rotate(720deg);
}
}
#banner ul #intro_5 i{
-webkit-animation:move5_ravovle 4s linear 0s;
}
/****************intro_1~4的移动*****************/
@-webkit-keyframes move3{
from{left:-492.72px;}
to{left:300px;}
}
#banner ul #intro_3{-webkit-animation:move3 2.9s linear 0s;
}
@-webkit-keyframes move3_ravovle{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
#banner ul #intro_3 i{
-webkit-animation:move3_ravovle 2.9s linear 0s;
}
@-webkit-keyframes move1{
from{left:-492.72px;}
to{left:0px;}
}
#banner ul #intro_1{-webkit-animation:move1 1.8s linear 0s;
}
@-webkit-keyframes move1_ravovle{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
#banner ul #intro_1 i{
-webkit-animation:move1_ravovle 1.8s linear 0s;
}
@-webkit-keyframes move2{
from{left:-492.72px;}
to{left:150px;}
}
#banner ul #intro_2{-webkit-animation:move2 2.35s linear 0s;
}
@-webkit-keyframes move2_ravovle{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
#banner ul #intro_2 i{
-webkit-animation:move2_ravovle 2.35s linear 0s;
}
@-webkit-keyframes move4{
from{left:-492.72px;}
to{left:450px;}
}
#banner ul #intro_4{-webkit-animation:move4 3.45s linear 0s;
}
@-webkit-keyframes move4_ravovle{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
#banner ul #intro_4 i{
-webkit-animation:move4_ravovle 3.45s linear 0s;
}
@charset "utf-8";
#dingwei{
background-image:url(images/bg_4.jpg);
background-position:50% 80%;
background-size:120% 120%;
}
#dingwei>div h3{
font-size:30pt;
font-weight:normal;
height:90px;
line-height:90px;
color:#17CAF6;
margin:40px 0;
}
#dingwei>div> h3 b{
float:left;
width:80px;
height:86px;
background-image:url(images/iconlist_3.png);
background-position:-170px 0;
}
#dingwei>div p{
font-size:14pt;
line-height:30px;
color:#8b7f73;
}
#dingwei>div{
width:50%;
height:500px;
float:right;
margin-top:100px;
padding-left:80px;
text-align:left;
}
#dingwei>b{
float:right;
width:255px;
height:530px;
background-image:url(images/iconlist_2.png);
background-position:-905px 0;
margin-top:70px;
}@charset "utf-8";
#icons ul{
margin:0;
padding-top:100px;padding-left:50px;
}
#icons ul li{
float:left;
width:300px;
height:175px;
margin-left:5px;
}
#icons ul li>b{
float:left;
margin-right:10px;
width:80px;
height:85px;
background-image:url(images/iconlist_3.png);
}
#icons ul div{
float:right;
width:200px;
line-height:20px;
font-size:11pt;
color:#a3a3a3;
font-weight:bold;
font-family:"microsoft yahei";
}
#icons ul li div h3{
color:#ffe325;
font-size:16pt;
margin:10px auto;
}
@-webkit-keyframes jump{
0%{ transform:rotate(0deg); /***opacity:透明度***/
opacity:1;
}
25%{transform:rotate(-10deg);
opacity:0.5;}
50%{transform:rotate(0deg);
opacity:1;}
75%{transform:rotate(10deg);
opacity:0.5;}
100%{transform:rotate(0deg);
opacity:1;}
}
#icons ul li>b:hover{ /* 没加s 是 重复次数*/
-webkit-animation:jump 0.3s linear 2;
}
#icons ul li.tixing>b{
background-position:-85px 0;
}
#icons ul li.dingwei>b{
background-position:-170px 0;
}
#icons ul li.fangdiu>b{
background-position:0px -80px;
}
#icons ul li.gonghao>b{
background-position:-85px -80px;
}
#icons ul li.xiaoqiao>b{
background-position:-170px -80px;
}
#icons ul li.tixing h3{
color:#F05156;
}
#icons ul li.dingwei h3{
color:#17CAF5;
}
#icons ul li.fangdiu h3{
color:#8BD856;
}
#icons ul li.gonghao h3{
color:#FE964F;
}
#icons ul li.xiaoqiao h3{
color:#AF99FD;
}
@charset "utf-8";
#hujiao{
background-image:url(images/bg_2.jpg);
background-position:50% 80%;
background-size:120% 120%; /*背景图片占满前景的百分比*/
}
#hujiao>div{
width:50%;
height:500px;
float:left;
margin-top:100px;
padding-right:80px;
text-align:right;
}
#hujiao>div h3{
font-size:30pt;
font-weight:normal;
height:90px;
line-height:90px;
color:#ffe325;
margin:40px 0;
}
#hujiao>div> h3 b{
float:right;
width:80px;
height:86px;
background-image:url(images/iconlist_3.png);
}
#hujiao>div p{
font-size:14pt;
line-height:30px;
color:#8b7f73;
}
#hujiao>b{
float:left;
width:255px;
height:530px;
background-image:url(images/iconlist_2.png);
background-position:-570px 0;
margin-top:70px;
transition:transform 1s linear 0s;
}
#hujiao>b:hover{
transform:rotate(25deg);
}
@charset "utf-8";
div.content{
width:1000px;margin:0 auto;}
/*header部分样式*/
header{
border:0;}
div.logo{float:left;width:152px;height:27px;
background-image:url(images/iconlist_1.png);
background-repeat:no-repeat;
background-position:-868px -100px;
margin-top:10px;
}
header ul{
float:right;margin:0;
}
header ul li{
float:left;
position:relative;
}
header ul a{
display:block;text-decoration:none;
height:47px;line-height:47px;
padding:0 15px;
color:#5c5c5c;
transition:border 1s; /******** ul选项下划线渐变效果 *********/
}
a.android,a.ios{
height:26px;width:66px;
background-image:url(images/iconlist_2.png);
margin-top:12px;
}
a.android{
background-position:-430px -671px;
}
a.ios{
background-position:-1655px -536px;
}
header ul a:not([class]):hover,header ul a.current{
border-bottom:3px solid #f1595f;
}
#android_code{
width:180px; height:210px;
background-image:url(images/iconlist_2.png);
background-position:-1654px -297px;
position:absolute;
top:48px;
display:none;
}
#android:hover div{
display:block;
}
/*οnmοuseοver="this.querySelector('div').style.display='block'"
οnmοuseοut="this.querySelector('div').style.display='none'"*/
@charset "utf-8";
ul{
margin:0;
padding:0;
list-style:none;
}
footer{
background-color:#363636;
overflow:hidden;
}
footer>div{
width:70%;
margin:20px auto 0;
overflow:hidden;
}
footer>div div{
float:left;
margin-right:50px;
}
footer div h3{
margin-top:0;
}
footer div.guanzhu{
width:200px;
}
footer p{
margin:0;
text-align:center;
}
footer div.code1,footer div.code2{
float:right;
}
footer div.code1{
width:214px;
height:120px;
background-image:url(images/iconlist_2.png);
background-position:0 -588px;
}
footer div.code2{
width:214px;
height:120px;
background-image:url(images/iconlist_2.png);
background-position:-214px -588px;
} @charset "utf-8";
#tixing{
background-image:url(images/bg_3.jpg);
background-size:100% 100%;
}<link rel="stylesheet" href="hujiao.css" type="text/css" /><link rel="stylesheet" href="tixing.css" type="text/css" /><link rel="stylesheet" href="dingwei.css" type="text/css" /><link rel="stylesheet" href="icons.css" type="text/css" /><link rel="stylesheet" href="footer.css" type="text/css" /></head><body><header ><div class="content"><div class="logo"></div><ul><li><a href="#" class="current">首页</a></li><li><a href="#">常见问题</a></li><li><a href="#">支持机型</a></li><li><a href="#">官方微博</a></li><li><a href="#">官方论坛</a></li><li id="android"><a href="#" class="android"></a><div id="android_code"></div></li><li><a href="#" class="ios"></a></li></ul></div></header><!--banner部分--><section id="banner"><div class="content"><div class="title"></div><p>时尚小巧的智能防丢配件 * 提醒您不忘带重要物品</p><ul><li id="intro_1"><i></i><b></b></li><li id="intro_2"><i></i><b></b></li><li id="intro_3"><i></i><b></b></li><li id="intro_4"><i></i><b></b></li><li id="intro_5"><i></i><b></b></li></ul></div></section><!--描述部分--><section id="description"><h3>好记性 不如好提醒</h3><p>360防丢卫士仅一元硬币大小，可轻松悬挂或粘贴在您的随身物品上。配合手机客户端使用，当您离开物品较远时，手机便收到报警提示。另外，找不到附近的物品时，可以通过手机上的防丢卫士发出声音，从而听声辩位找到它</p><div></div></section><!--一键呼叫--><section id="hujiao"><div><h3>一键呼叫<b></b></h3><p>在忙碌而杂乱的办公室，<br />有事明知道U盘就在桌上某处，可返来找去就是找不到。</p><p>通过手机客户端向佩戴在U盘上的防丢卫士发出“呼叫”指令，<br />防丢卫士即会发出声音，帮你轻松找到U盘。</p></div><b></b></section><!--智能提醒--><section id="tixing"><!--一张背景图--></section><!--定位记录--><section id="dingwei"><div><h3><b></b>定位记录</h3><p>回家路上发现钥匙不在身边，<br />究竟是落在公司，还是忘在家里，或者在路上某处？</p><p>防丢卫士会记录钥匙最后一次在身边的位置以及时间，<br />帮你最短时间找回钥匙。</p></div><b></b></section><!--功能与图标--><section id="icons"><ul><li><b></b><div><h3>一键呼叫</h3><p>找不到周围物品时，点击“呼叫”按钮，便可以通过声音找到它</p></div></li><li class="tixing"><b></b><div><h3>智能提醒</h3><p>当物品和手机距离较远时，手机会收到警报，提醒您不忘带物品</p></div></li><li class="dingwei"><b></b><div><h3>定位记录</h3><p>防丢卫士会记录物品丢失前的最后位置和时间，方便快速寻找</p></div></li><li class="fangdiu"><b></b><div><h3>双向防丢</h3><p>当手机距离较远时，防丢卫士会发出声音，提醒您手机不在身边</p></div></li><li class="gonghao"><b></b><div><h3>超低功耗</h3><p>最新蓝牙4.9技术，超低功耗，一枚电池可用3个月以上</p></div></li><li class="xiaoqiao"><b></b><div><h3>小巧易戴</h3><p>仅一元钱硬币大小，可轻松粘贴或佩挂在物品上</p></div></li></ul></section><footer><div><div id="guanzhu"><h3>关注我们</h3><ul><li>官方论坛</li><li>新浪微博</li></ul></div><div id="xiangguan"><h3>相关网站</h3><ul><li>360硬件专区</li><li>360安全路由</li><li>360儿童卫士</li></ul></div><div class="code1"></div><div class="code2"></div></div><p>Copyright ©2005-2014 360.cn All Rights Reserved. 360安全中心</p></footer></body></html>
扫一扫
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
