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安全衛士與win10衝突怎麼辦_360安全衛士與win10衝突如何處理Win10
- Nginx 部署靜態頁面Nginx
- 靜態頁面是啥
- GandCrab瘋狂斂財2千萬，已被360安全衛士就地正法！
- 挖礦木馬猖獗，360安全衛士破解“黑礦工”之困
- 靜態網頁高仿正方教育系統網頁（HTML+CSS）網頁HTMLCSS
- 用typescript寫靜態頁面TypeScript
- Laravel diary_靜態頁面Laravel
- 伺服器安全衛士伺服器
- 怎麼使用360安全衛士快速升級到win10系統Win10
- 如何關閉360安全衛士win10漏洞修復的操作步驟Win10
- 維護消費者合法權益 360安全衛士將推出極速版
- a維護消費者合法權益 360安全衛士將推出極速版
- 靜態頁面佈局例項
- 構建靜態頁面 之 [ 列表 ]
- 構建靜態頁面 之 [ 表格 ]
- PHP 實現頁面靜態化PHP
- “360安全衛士團隊版 · 青少年守護計劃”重磅釋出，守衛教育網路淨土
- 360衛士阻止程式建立，導致各種異常
- 構建靜態頁面 之 [ 表單 ]
- 1.9 靜態頁面佈局例項
- 【靜態頁面架構】CSS之列表架構CSS
- 【靜態頁面架構】CSS之表格架構CSS
- 前端靜態頁面快速迭代工具前端
- Spring Boot返回靜態錯誤頁面Spring Boot
- Laravel頁面靜態化最佳實踐Laravel
- 頁面靜態化技術演進
- 前端靜態頁面問題彙總前端
- win10系統中360安全衛士【設定中心】顯示空白怎麼辦Win10
- win10系統下如何利用360安全衛士設定開機啟動項Win10
- 用HTML+CSS編寫一個計科院網站首頁的靜態網頁HTMLCSS網站網頁
- 環境的部署和建立靜態頁面
- 編寫靜態頁面經驗總結
- Win10 2004版中360安全衛士網路安全防護無法開啟的解決教程Win10
- 偽裝成Telegram瘋狂傳播？360安全衛士撕下FakeTelegram的馬甲定向查殺
- Win10出現嚴重藍屏漏洞，360安全衛士率先實現自動免疫Win10
- win10系統解除安裝360安全衛士後cpu佔用99%怎麼解決Win10