此项目由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
效果图