html5写一个简单的手机app的设置界面

迷南。 2021-09-15 13:28 299阅读 0赞

![70][]

<!DOCTYPE html>
    
    <html lang="zh">
    
    <head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>Document</title>
    
    <style>
    
    html{
    
    font-size:100px;
    
    }
    
    body{
    
    background: rgb(239,239,239);
    
    }
    
    body,a,h3,span{
    
    padding:0;
    
    margin:0;
    
    text-decoration: none;
    
    }
    
    .header{
    
    background: #26A69A ;
    
    height: 0.44rem;
    
    font-size:0.14rem;
    
    color: white;
    
    padding-left:0.17rem;
    
    padding-right: 0.25rem;
    
    text-align: center;
    
    line-height: 0.44rem;
    
    
    }
    
    .header>a{
    
    color: white;
    
    float: left;
    
    }
    
        .header>.btn{
    
        float: right;
    
        padding-top:0.1rem;
    
        }
    
    .btn>span{
    
    border-radius: 100%;
    
    display: block;
    
    width: 0.04rem;
    
    height: 0.04rem;
    
    background: white;
    
    margin-top: 0.03rem;
    
    }
    
    .username{
    
    height: 0.72rem;
    
    background: white;
    
    border-bottom: 1px solid #E0E0E0 ;
    
    padding-left: 0.17rem;
    
    padding-right: 0.12rem;
    
    padding-top: .12rem;
    
    }
    
    .username>img{
    
    width: 0.48rem;
    
    height: 0.48rem;
    
    object-fit: cover;
    
    margin-right: 0.12rem;
    
    float: left;
    
    border-radius: 0.1rem;
    
    }
    
    .username>.text{
    
    height: 0.48rem;
    
    float: left;
    
    
    }
    
    .username .name{
    
    font-size: 0.15rem;
    
    margin-bottom: 0.08rem;
    
    
    }
    
    
    .username .haha{
    
    font-size: 0.12rem;
    
    color: #5D5D5D;
    
    }
    
    .right{
    
    font-size:0.12rem;
    
    float: right;
    
    margin-top: 0.12rem;
    
    
    
    }
    
    .right>a{
    
    font-size: 0.12rem;
    
    }
    
    .right>.img,.right>.back{
    
    display: inline-block;
    
    vertical-align: middle;
    
    }
    
    .address,.safe,.shezhi,.secrt,.view,.other{
    
    font-size: 0.14rem;
    
    padding-left: 0.17rem;
    
    border-bottom: 1px solid #E0E0E0 ;
    
    height: 0.65rem;
    
    line-height: 0.65rem;
    
    padding-right: 0.12rem;
    
    background: white;
    
    }
    
    .safe{
    
    margin-top:0.13rem;
    
    margin-bottom: 0.13rem;
    
    }
    
    .view{
    
    margin-bottom: 0.13rem;
    
    }
    
    .address>a,.safe>a,.shezhi>a,.secrt>a,.view>a,.other>a{
    
    float: right;
    
    }
    
    .footer{
    
    margin-top: 0.2rem;
    
    height: 0.5rem;
    
    font-size: 0.16rem;
    
    border:1px solid red;
    
    border-radius: 0.05rem;
    
    width: 2.99rem;
    
    text-align: center;
    
    line-height: 0.5rem;
    
    margin-left: 0.35rem;
    
    }
    
    
    
    </style>
    
    
    </head>
    
    <body>
    
    <div class="header">
    
    <a href=""> < </a>
    
    设置
    
    <div class="btn">
    
    <span></span>
    
    <span></span>
    
    <span></span>
    
    </div>
    
    </div>
    
    <div class="content">
    
    <div class="username">
    
    
    <img src="./timg.jpeg" alt="" />
    
    <div class="text">
    
    <div class="name">你好你好</div>
    
    <div class="haha">会员名：哈哈哈哈</div>
    
    </div>
    
    <div class="right">
    
    <div class="img"><img src="./ewm.jpeg" alt="" /></div>
    
    <div class="back"><a href=""> > </a></div>
    
    </div>
    
    
    </div>
    
    </div>
    
    <div class="address">
    
    我的收获地址
    
    <a href=""> > </a>
    
    </div>
    
    <div class="safe">
    
    账户与安全
    
    <a href=""> > </a>
    
    </div>
    
    <div class="shezhi">
    
    地区设置
    
    <a href=""> > </a>
    
    </div>
    
    <div class="secrt">
    
    隐私
    
    <a href=""> > </a>
    
    </div>
    
    <div class="view">
    
    通知
    
    <a href=""> > </a>
    
    </div>
    
    
    <div class="other">
    
    关于平台
    
    <a href=""> > </a>
    
    </div>
    
    <div class="footer">
    
    退出当前账号
    
    </div>
    
    
    
    
    </body>
    
    </html>

![20201202133616605.png][]

**整理了一些书籍分享给大家，可关注公众号菜单栏点击推荐书籍获取链接**

**JavaScript高级程序设计(红宝书)     你不知道的JavaScript（上卷）  你不知道的JavaScript（中卷）  你不知道的JavaScript（下卷）.pdf**

**js权威指南.pdf    深入理解ES6.pdf    es6标准入门(第三版).pdf    HTML与CSS入门经典   Javascript高级程序设计**

**JavaScript设计模式    性能网站建设进阶指南   精通正则表达式   HTML5程序设计  CSS权威指南  JavaScript权威指南**

**JavaScript面向对象编程指南   HTTP权威指南.pdf   计算的本质：深入剖析程序和计算机.pdf**

[70]: /images/20210813/608701bdf6f4496a82de05fb17d722d4.png
[20201202133616605.png]: /images/20210813/9a50301d3ccb4b0781fade56a8f447fa.png