软件官网页面模板

最新推荐文章于 2024-07-19 23:45:18 发布

Overlay762

最新推荐文章于 2024-07-19 23:45:18 发布

阅读量9.2k

点赞数 1

分类专栏：项目实战文章标签： ui html5 css 前端

本文链接：https://blog.csdn.net/overlay762/article/details/123673800

版权

实战同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

项目

2 篇文章 1 订阅

订阅专栏

此博客介绍了如何使用HTML、CSS和自适应样式为移动端创建一个响应式网站布局，包括导航菜单、图片展示和登录/注册功能。主要展示了flex.css和responsive.css在实现页面布局调整中的作用。

摘要由CSDN通过智能技术生成

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

效果图

在这里插入图片描述

Overlay762

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
软件官网页面模板

此项目由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&gt
复制链接

扫一扫

专栏目录