360安全衛士靜態頁面(html+css)
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>
相關文章
- 360安全衛士的替代軟體
- 360安全衛士阻止SQL Server安裝SQLServer
- 分析周鴻禕的安全衛士360[轉]
- 360安全衛士如何設定自定義安全防護
- HTML+CSS編寫靜態網站-31 新增About頁面HTMLCSS網站
- 360安全衛士與win10衝突怎麼辦_360安全衛士與win10衝突如何處理Win10
- HTML+CSS編寫靜態網站-33 建立Contact頁面HTMLCSS網站
- HTML+CSS編寫靜態網站-39 調整About頁面HTMLCSS網站
- 怎麼突破安全狗和360網站衛士的網站
- 奇虎360安全衛士推出木馬程式查殺功能
- Nginx 部署靜態頁面Nginx
- php 生成靜態頁面PHP
- PHP生成靜態頁面PHP
- 360安全衛士快速入口新增常用軟體圖示的方法
- 360安全衛士檢視被拒絕安裝軟體教程
- 利用360安全衛士升級win10系統的方法Win10
- 360安全衛士怎麼設定電腦定時關機
- Asp.Net中動態頁面轉靜態頁面ASP.NET
- HTML+CSS編寫靜態網站-32 為關於頁面新增樣式HTMLCSS網站
- HTML+CSS編寫靜態網站-34 為Contact頁面新增樣式HTMLCSS網站
- 伺服器安全衛士伺服器
- 挖礦木馬猖獗，360安全衛士破解“黑礦工”之困
- 不要安裝360安全衛士和騰訊電腦管家：為什麼？
- 使用360安全衛士設定軟體優先順序的方法
- Laravel diary_靜態頁面Laravel
- 用typescript寫靜態頁面TypeScript
- java 做頁面靜態化Java
- HTML+CSS編寫靜態網站-38 Vedio頁面適配桌面佈局HTMLCSS網站
- 怎麼使用360安全衛士快速升級到win10系統Win10
- 一鍵自動檢修CPU漏洞 360安全衛士首發免疫工具
- 靜態網頁高仿正方教育系統網頁（HTML+CSS）網頁HTMLCSS
- 360安全衛士網管版：讓網管輕鬆管理內網電腦安全配置內網
- PHP 實現頁面靜態化PHP
- 靜態頁面佈局例項
- 如何關閉360安全衛士win10漏洞修復的操作步驟Win10
- 奇虎擬釋出新安全軟體 與360衛士形成產品互補
- 【靜態頁面架構】CSS之列表架構CSS
- 【靜態頁面架構】CSS之表格架構CSS