软件官网页面模板

此项目由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;}}