1.css部分
body{
font-size: 14px;
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
ul li{
list-style: none;
}
a{
text-decoration: none;
color: #666666;
}
#bigbox{
width: 1920px;
}
#banner{
width: 1920px;
height: 40px;
}
#content{
width: 1920px;
height: 470px;
background:url(../img/bg_1.jpg);
}
#remind{
width: 1250px;
height: 560px;
margin: 0px auto;
display: flex;
justify-content: center;
align-items: center;
}
#call{
width: 1920px;
height: 550px;
background: url(../img/bg_2.jpg);
display: flex;
align-items: center;
}
#reminders{
width: 980px;
height: 560px;
background:url(../img/bg_3.jpg);
margin: 0px auto;
}
#Location{
width: 1920px;
height: 550px;
background: url(../img/bg_4.jpg);
}
#Antilossfunction{
width: 1250px;
height: 411px;
border: 1px solid black;
margin: 0px auto;
}
#Antilossfunction1{
margin-top:100px;
}
#footer{
width: 1920px;
height: 170px;
background: #333333;
}
.smallbanner{
width: 1250px;
height: 40px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.losing{
width: 155px;
height: 29px;
background: url(../img/iconlist_1.png) -870px -100px;
margin-top: 5px;
}
.headling{
height: 38px;
}
.headling ul li{
padding-left: 15px;
float: left;
padding-right: 15px;
font-size: 16px;
}
.headling ul li a:hover{
border-bottom: 1px solid red;
}
.Android{
width: 80px;
height: 28px;
background: url(../img/iconlist_2.png) -1650px -508px;
margin-top: -9px;
}
.Apple{
width: 80px;
height: 28px;
background: url(../img/iconlist_2.png) -1650px -535px;
margin-top: -9px;
}
.smallcontent{
width: 770px;
height: 201px;
margin: 0px auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
float: right;
}
.Prevent{
width: 461px;
height: 60px;
background: url(../img/iconlist_1.png) -865px -0px;
}
.Guard{
width: 420px;
height: 30px;
background: url(../img/iconlist_1.png)-885px -70px;
}
.code{
width: 180px;
height: 200px;
background: url(../img/iconlist_2.png) -1655px -300px;
margin-right: 15px;
}
.content1{
width: 1250px;
margin: 0px auto;
}
#fivecircles{
width: 865px;
height: 173px;
display: flex;
justify-content: flex-start;
}
.firstcircle{
width: 173px;
height: 173px;
background: url(../img/iconlist_1.png);
position: absolute;
left: 680px;
top: 250px;
animation: movefirstCircle 2s linear;
}
@keyframes movefirstCircle{
from{
transform:translateX(-680px);
}
to{
transform: translateX(0px);
}
}
.secondcircle{
width: 173px;
height: 173px;
background: url(../img/iconlist_1.png) -173px;
position: absolute;
left: 830px;
top: 250px;
animation: movesecondCircle 2.44s linear;
}
@keyframes movesecondCircle{
from{
transform:translateX(-830px);
}
to{
transform: translateX(0px);
}
}
.thirdcircle{
width: 173px;
height: 173px;
background: url(../img/iconlist_1.png) -348px;
position: absolute;
left: 980px;
top: 250px;
animation: movethirdCircle 2.88s linear;
}
@keyframes movethirdCircle{
from{
transform:translateX(-980px);
}
to{
transform: translateX(0px);
}
}
.fourthcircle{
width: 173px;
height: 173px;
background: url(../img/iconlist_1.png) -522px;
position: absolute;
left:1130px;
top: 250px;
animation: movefourthCircle 3.32s linear;
}
@keyframes movefourthCircle{
from{
transform:translateX(-1130px);
}
to{
transform: translateX(0px);
}
}
.Fifthcircle{
width: 173px;
height: 173px;
background: url(../img/iconlist_1.png) -696px;
position: absolute;
left: 1280px;
top: 250px;
animation: movefifthCircle 3.76s linear;
}
@keyframes movefifthCircle{
from{
transform:translateX(-1280px) rotate(0deg);
}
to{
transform: translateX(0px) rotate(360deg);
}
}
.memory{
font-family: "[FZLTXHK]";
font-size:30px;
color: #666666;
}
.smallremind{
width: 740px;
}
.guardwz{
width: 900px;
height: 60px;
background: url(../img/iconlist_2.png) -1445px -592px;
}
.Nineyuan div{
width: 155px;
height: 145px;
}
.Nineyuan{
width:620px ;
height: 300px;
}
.oneyuan{
background: url(../img/iconlist_2.png) -1650px -0px;
float: left;
}
.oneyuan:hover, .twoyuan:hover,.threeyuan:hover,.fouryuan:hover,.fiveyuan:hover,.sixyuan:hover,.sevenyuan:hover{animation: Nineyuan 2s linear infinite;}
.twoyuan{
background: url(../img/iconlist_2.png) -1815px -0px;
float: left;
}
.threeyuan{
background: url(../img/iconlist_2.png) -1980px -0px;
float: left;
}
.fouryuan{
background: url(../img/iconlist_2.png) -2140px -0px;
float: left;
}
.fiveyuan{
background: url(../img/iconlist_2.png) -1740px -150px;
float: left;
margin-left: 60px;
}
.sixyuan{
background: url(../img/iconlist_2.png) -1900px -150px;
float: left;
margin-left: 15px;
}
.sevenyuan{
background: url(../img/iconlist_2.png) -2070px -150px;
float: left;
margin-left: 20px;
}
.phonecall{
width: 1250px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: center;
}
.phonecallwz{
font-size: 30px;
color: #ffcc33;
}
.CallIcon{
width: 120px;
height: 82px;
background: url(../img/iconlist_2.png) -420px -120px;
}
.yellowphone{
width: 253px;
height: 530px;
background: url(../img/iconlist_2.png) -572px -0px;
}
.yellowphone:hover{
animation: yellowphone 2s linear infinite;
}
@keyframes yellowphone{
from{
transform: rotate(0deg);
}
to{
transform: rotate(30deg);
}
}
.yellowphonewz{
width: 530px;
height: 180px;
background: url(../img/iconlist_2.png) 0px -220px;
margin-right: 50px;
}
.wzcall{
width: 550px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.location1{
width: 750px;
height: 527px;
background: url(../img/iconlist_2.png) -900px -0px;
margin: 0px auto;
}
.Antiloss{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png);
}
.colorAntiloss h2{
color: #FFCC33;
}
#Antilossfunction ul li{
float: left;
}
.Antiloss1{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png) -83px 0px;
}
.colorAntiloss1 h2{
color: #FF0000;
}
p{
color: #666666;
margin-top: -10px;
}
.Antiloss2{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png) -166px 0px;
}
.colorAntiloss2 h2{
color: #33ccff;
}
.Antiloss3{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png) 0px -83px;
}
.colorAntiloss3{
color:#99cc66 ;
}
.aa{
width: 900px;
margin-top: 30px;
}
.Antiloss4{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png)-83px -83px;
}
.colorAntiloss4 h2{
color: #ff9966;
}
.Antiloss5{
width: 83px;
height: 83px;
background: url(../img/iconlist_3.png) -166px -83px;
}
.colorAntiloss5 h2{
color: #9999cc;
}
#smallfooter{
width: 1250px;
height: 150px;
margin: 0px auto;
display: flex;
justify-content: space-around;
align-items: center;
}
#smallfooter a:hover{
color: #FF0000;
}
#smallfooter h2{
color: #666666;
}
.weibo{
width: 430px;
height: 123px;
background: url(../img/iconlist_2.png) 0px -600px;
margin-top: 50px;
}
.footerbanner1{
text-align: center;
color: #666;
}
@-webkit-keyframes Nineyuan{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.Antiloss:hover,.Antiloss1:hover,.Antiloss2:hover,.Antiloss3:hover,.Antiloss4:hover,.Antiloss5:hover{
animation: Antilossfunctionopacity 2s linear infinite;
}
@keyframes Antilossfunctionopacity{
from{
transform: rotate(0deg);
opacity: 0;
}
to{
transform: rotate(45deg);
opacity: 1;
}
}
.firstcircleshadow{
width: 150px;
height: 20px;
background: url(../img/iconlist_1.png) -865px -129px;
position: absolute;
top: 170px;
z-index: 2;
}
.Fifthcircleshadow{
width: 150px;
height: 20px;
background: url(../img/iconlist_1.png) -865px -129px;
z-index:1000;
position: absolute;
top: 430px;
left: 1280px;
animation: Fifthcircleshadow 3.76s linear;
}
@keyframes Fifthcircleshadow{
from{
transform: translateX(-1280px);
}
to{
transform: translateX(0px);
}
}
二.html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360防丢卫士</title>
<link rel="stylesheet" type="text/css" href="css/360.css"/>
</head>
<body>
<div id="bigbox">
<div id="banner">
<div class="smallbanner">
<div class="losing"></div>
<div class="headling">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">支持机架</a></li>
<li><a href="#">官方微博</a></li>
<li class="lt"><a href="#">官方论坛</a></li>
<li class="Android"></li>
<li class="Apple"></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="content1">
<div class="smallcontent">
<div class="contentfont">
<div class="Prevent"></div>
<div class="Guard"></div>
</div>
<div class="code"></div>
</div>
</div>
</br>
</br>
<div id="fivecircles">
<div class="firstcircle">
<div class="firstcircleshadow">
</div>
</div>
<div class="secondcircle">
<div class="firstcircleshadow">
</div>
</div>
<div class="thirdcircle">
<div class="firstcircleshadow">
</div>
</div>
<div class="fourthcircle">
<div class="firstcircleshadow">
</div>
</div>
<div class="Fifthcircle">
</div>
<div class="Fifthcircleshadow">
</div>
</div>
</div>
<div id="remind">
<div class="smallremind">
<div align="center" class="memory">好记性 不如好提醒</div>
</br>
<div class="guardwz"></div>
<div class="Nineyuan">
<div class="oneyuan"></div>
<div class="twoyuan"></div>
<div class="threeyuan"></div>
<div class="fouryuan"></div>
<div class="fiveyuan"></div>
<div class="sixyuan"></div>
<div class="sevenyuan"></div>
</div>
</div>
</div>
<div id="call">
<div class="phonecall">
<div class="phonecall1">
<div class="wzcall">
<div class="phonecallwz">一键呼叫</div>
<div class="CallIcon"></div>
</div>
<div class="yellowphonewz"></div>
</div>
<div class="yellowphone">
</div>
</div>
</div>
<div id="reminders">
</div>
<div id="Location">
<div class="location1">
</div>
</div>
<div id="Antilossfunction">
<div id="Antilossfunction1">
<ul>
<li class="Antiloss"></li>
<li class="colorAntiloss">
<h2>一键呼叫</h2>
<p>找不到周围物品时,点击"呼</br>叫"按钮,便可以通过声音找到它</p>
</li>
<li class="Antiloss1"></li>
<li class="colorAntiloss1">
<h2>智能提醒</h2>
<p>当物品和手机距离较远时,手机会</br>收到警报,提醒你不忘带物品</p>
</li>
<li class="Antiloss2"></li>
<li class="colorAntiloss2">
<h2>定位记录</h2>
<p>防丢卫士会记录物品丢失前的最后</br>位置和时间方便快速寻找</p>
</li>
</ul>
<ul class="aa">
<li class="Antiloss3"></li>
<li class="colorAntiloss3">
<h2>双向防丢</h2>
<p>当手机距离较远时,防丢卫士会发</br>出声音,提醒你声音不在身边</p>
</li>
<li class="Antiloss4"></li>
<li class="colorAntiloss4">
<h2>超低功耗</h2>
<p>最新蓝牙4.9技术,超低功耗,一枚</br>电池可用3个月以上</p>
</li>
<li class="Antiloss5"></li>
<li class="colorAntiloss5">
<h2>小巧易戴</h2>
<p>仅一元硬币大小,可轻松粘贴或</br>佩挂在物品上</p>
</li>
</ul>
</div>
</div>
<div id="footer">
<div id="smallfooter">
<div class="footerbanner">
<ul>
<li><h2>关注我们</h2></li>
<li><a href="#">官方论坛</a></li>
<li><a href="#">新浪微博</a></li>
</ul>
</div>
<div class="footerbanner1">
<br>
<ul>
<li><h2>相关网站</h2></li>
<li><a href="#">360硬件专区</a></li>
<li><a href="#">360安全路由</a></li>
<li><a href="#">360儿童卫士</a></li>
</ul>
</div>
<div class="weibo">
</div>
</div>
<div class="footerbanner1">
Copyright©2005-2014 360.cn All Rights Reserved.360安全中心
</div>
</div>
</div>
</body>
</html>