软件官网页面模板
此項目由Html+css結構搭建而成 里面自適應移動端而做出調整 上代碼:
使用了該模板的請將出處表明
項目結構
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/flex.css"><link rel="stylesheet" href="./css/main.css"><link rel="stylesheet" href="./css/responsive.css"> </head> <body><div class="container"><div class="header"><div class="nav"><div class="warrper "><div class="leftNav"><div class="logo">ZT</div><div class="slog"><span>Z T云流量</span></div><div class="menu"><a class="menuBtn" href="#"><img class="menuT" src="./images/menu.png" alt=""><img class="cancel" src="./images/cancel.png" alt=""><div class="menuBox"><ul><li > <a href="#" >網站首頁</a></li><li><a href="#">產品介紹</a></li><li><a href="#">軟件安裝</a></li><li><a href="#">常見問題</a></li><li><a href="#">云免服務器</a></li><li style="padding-top: 15px; text-align: center;"><input class="btn" type="button" value="登錄"><input class="btn" type="button" value="注冊"></li></ul></div></a></div></div><div class="rightNav"><ul><li > <a href="#" style="color: white; border-bottom: 1px solid #6173f4;">網站首頁</a></li><li><a href="#">產品介紹</a></li><li><a href="#">軟件安裝</a></li><li><a href="#">常見問題</a></li><li><a href="#">云免服務器</a></li><li><input class="btn" type="button" value="登錄"><input class="btn" type="button" value="注冊"></li></ul></div><div class="clear"></div><div class="title"><h1>支持IOS6-IOS10系統</h1><p>一次安裝永久支持續費，VPN連接200M服務器連接</p><input type="button" value="查看安裝流程"></div><div class="appTitle"><div><h1>安裝系統完美支持</h1><div>操作人性化，流量軟件上手很簡單，使用僅需簡單操作幾步</div><input type="button" value="查看安裝流程"></div></div></div></div></div><div class="clear"></div><div class="middle"><div class="warrper middleTitle" style="text-align: center; "><div class="detailTitle" style="margin-bottom: 15px;"><h1 style="color: #454545;">產品介紹</h1></div><div class="line" style="width: 50px; border-bottom: 1px solid #6173f4; margin: 0 auto;"></div><div style="margin-top: 20px; margin-bottom: 50px;"><h4 style=" margin-top: 50px; color: #9a9a9a; margin: 0 auto; width: 600px;">XXX是一個讓用戶體驗超低價格，高品質的流量服務，堅決讓運營商讓利惠民，我們將以實力贏得大家的青睞！</h4></div><div class="clear"></div><div class="row"><div><div class="col-4 grid"><img src="./images/小圖標_13.png" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">網速提升</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" > 移動聯通4G網絡輕松提升，無束縛，輕松上5M/s</div></div><div class="col-4 grid"><img src="./images/小圖標_14.png" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">安卓/蘋果</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" >支持目前最流行的機型，蘋果IOS/安卓全機型機型兼容，我們堅持領先一步</div></div><div class="col-4 grid"><img src="./images/小圖標_15.png" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">操作簡單</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" >提供會員中心查詢，在線充值流量服務，隨時了解使用情況</div></div></div><div style="height: 80px;"></div><div ><div class="col-4 grid"><img src="./images/小圖標_06.png" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">無需設置</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" > 只需要輸入您注冊的賬號和密碼，輕松登錄即可</div></div><div class="col-4 grid"><img src="./images/小圖標_12.png" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">輕松連接</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" >有信號的地方即可使用，連接速度極快，只需要消耗幾kb流量即可完成</div></div><div class="col-4 grid"><img src="./images/小圖標_04.png" style="width: 90px;" class="minLogo"><p style="text-align: center; margin-top: 50px; font-size: 18px;">海量資源</p><div style="color: #9d9d9d; margin-top: 15px; margin-left: 30px; width: 300px;" >無論是差旅，商務，休閑，去到那里隨便看，再也不擔心寶寶追不了</div></div></div></div></div></div><div class="footer"><div class="warrper" style="text-align: center; padding-top: 100px;"><div style="margin-bottom: 20px;"><h1>軟件安裝</h1></div><div class="line" style="width: 50px; border-bottom: 1px solid #6173f4; margin: 0 auto;"></div><div style="margin-top: 20px; margin-bottom: 50px;"><h4 style=" margin-top: 50px; color: #9a9a9a; margin: 0 auto; width: 600px;">云流量無需等待，秒連接！全面兼容，安卓/IOS系統零風險！</h4></div><div class="row"><div class="col-6" ><img style="margin-left: 30px;" width="300" src="./images/小圖標_11.gif" alt=""><div style="margin-bottom: 10px;"><h3>IOS系統</h3></div><p style="color: #9a9a9a;">切換ID安裝即可快速使用</p></div><div class="col-6"><img style="margin-left: 30px;" src="./images//小圖標_02.png" width="300" alt=""><div style="margin-bottom: 10px;"><h3>安卓系統</h3></div><p style="color: #9a9a9a;"> 一鍵下載即可使用</p></div></div></div><div style="margin-top: 100px;"><div id="QA" style="padding: 5px; color: white; width: 30px; height: 95px; background-color: #123c89;">咨詢客服</div></div></div></div> </body> </html>main.css
*{margin: 0;padding: 0;list-style: none;text-decoration: none; } ul li{float: left; } .clear{clear: both;float: none; }.container{min-height: 3000px;width: 1903px;margin: 0 auto; } .warrper{width: 1300px;margin: 0 auto; } .nav{margin: 0;padding: 0;background-image:url('../images/29uhkr.jpg') ;height: 800px;width: 100%;background-repeat: no-repeat;padding-top: 15px; } .leftNav{float: left; }.logo{height: 50px;width: 50px;line-height: 50px;color: black;background-color: white;font-size: 20px;font-weight: bold;text-align: center;font-family: '微軟雅黑';float: left; } .slog{margin-left: 10px;float: left;line-height: 50px;font-size: 18px;font-weight: bold;text-align: center;font-family: '微軟雅黑';color: white; } .menu{display: none; } .rightNav {float: right;line-height: 50px;}.rightNav ul li{margin-right: 35px; } .rightNav ul li input{margin-right: 15px;width: 80px;height: 30px;color: white;background-color: #6173f4;border: 1px solid #6173f4;border-radius: 15px;z-index: 2; }.rightNav a{text-decoration: none;color: gray; }.title{color: white;margin-top: 200px; }.title h1{margin-bottom: 15px; }.title p{margin-bottom: 20px; }.title input{width: 150px;height: 35px;color: white;font-size: 16px;letter-spacing: 2px;border: 1px solid #6173f4;border-radius: 5px;background-color: #6173f4; }/* 中間部分 */ .middle{height: 1100px;background-color: #f4f4f4;padding-top: 100px; }.middleTitle .line{margin-top: 30px; } .grid{height: 260px;background-color: white;margin-right: 30px;text-align: center; } .minLogo{text-align: center;position: absolute;margin-top: -60px;margin-left: -50px;border-radius: 50px;width: 110px;} .appTitle{display: none; }flex.css
* {box-sizing: border-box; }.row:after {content: "";clear: both;display: block; } [class*="col-"] {float: left;padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 30%; margin-top: 65px;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}responsive.css
@media all and (max-width:768px){.row{display: block;}.col-4{display: block;width: 100%;margin-top: 50px;}.col-6{display: block;width: 100%;margin-top: 50px;}.container{width: 768px;}.nav{padding: 0px;}.leftNav{width: 100%;height: 60px;background-color: white;}.leftNav .logo{font-size: 35px;margin-left: 50px;}.leftNav .slog{font-size: 35px;color: #6173f4;margin-left: 35px;}.leftNav .menu{display: block;margin-top: 15px;line-height: 20px;margin-left: 690px;}.rightNav{display: none;}.title{display: none;}.appTitle{display: block;padding-left: 15px;}.appTitle{color: white;margin-top: 200px;}.appTitle h1{margin-bottom: 15px;color: #9b9ea0;}.appTitle div{margin-bottom: 20px;width: 600px;font-size: 30px;color: #c3bcbb;}.appTitle input{width: 150px;height: 35px;color: white;font-size: 16px;letter-spacing: 2px;border: 1px solid #6173f4;border-radius: 5px;background-color: #6173f4;}.middle{height: 2300px;}.warrper{width: 768px;}.grid p {font-size: 30px !important;}.grid div {margin-left: 200px !important;font-size: 20px !important;}.minLogo{margin-left: -55px;}#QA{display: none !important;}.menu .menuBox{display: none;height: 760px;width: 768px;position: absolute;background-color: white;margin-left: -700px;}.menu ul li{margin-right: 700px;font-size: 30px;width: 800px;padding: 35px;padding-top: 45px;padding-left: 75px;border-bottom: 1px solid #e5e5e5;}.menu ul li input{margin-right: 15px;width: 550px;height: 65px;color: white;background-color: #6173f4;border: 1px solid #6173f4;border-radius: 35px;z-index: 2;margin-top: 25px;}.menu a{text-decoration: none;color: gray;}.cancel{display: none;}.menu:hover .menuT{display: none !important;}.menu:hover .cancel{display: block !important;}.menu:hover .menuBox{display: block !important;}.menu:active .menu{display: none;}}images圖片組
放在網盤 鏈接：https://pan.baidu.com/s/1UecM4OhGpqyF9RaKFPMifw?pwd=wo0g
提取碼：wo0g
效果圖
總結
- 上一篇： win2008启动计算机应用配置,[计算
- 下一篇： 破坏计算机系统既遂的标准,破坏计算机信息