H5+C3---手机页面

最新推荐文章于 2022-08-01 20:48:56 发布

左希希

最新推荐文章于 2022-08-01 20:48:56 发布

阅读量359

点赞数

分类专栏： H5+C3

本文链接：https://blog.csdn.net/Rococoberry/article/details/103282379

版权

H5+C3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一移动端手机页面的代码示例

（1）H5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 浏览器适应-->
    <title>马贝商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 手机页面要写  （尺度不变）-->
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/person.css"/>
    <link rel="stylesheet" href="css/fonts/iconfont.css"/>
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header>
    <a href="#"><span class="iconfont iconsaomiao fl"></span></a>
    <span>我的</span>
    <a href="#"><span class="iconfont iconfuwuerji fr"></span></a>
</header>
<div class="user">
    <img src="images/userImg.jpg" alt=""/>
    <p>夏小语</p>
    <p>15366667777</p>
    <p>Wxddfing</p>
</div>
<div class="list">
    <p>
        <span><i class="iconfont iconshouji"></i></span>我的订单
        <span>></span>
    </p>
    <p>
        <span><i class="iconfont iconshouji"></i></span>申请成为分销员
        <span>></span>
    </p>
    <p>
        <span><i class="iconfont iconyouxiang"></i></span>我的消息
        <span>></span>
    </p>
    <p>
        <span><i class="iconfont iconmima"></i></span>我的收藏
        <span>></span>
    </p>
    <p>
        <span><i class="iconfont icondizhi"></i></span>收货地址
        <span>></span>
    </p>
    <p>
        <span><i class="iconfont iconsaomiao"></i></span>客服中心
        <span>></span>
    </p>
    <input type="button" value="退出登录"/>

</div>
<footer>
    <div>
        <a href=""><i class="iconfont iconshouye"></i><br/>首页</a>
    </div>
    <div>
        <a href=""><i class="iconfont iconleimupinleifenleileibie"></i><br/>分类</a>
    </div>
    <div>
        <a href="" class="active"><i class="iconfont icongouwuche"></i><br/>购物车</a>
    </div>
    <div>
        <a href=""><i class="iconfont iconxingmingyonghumingnicheng"></i><br/>我的</a>
    </div>
</footer>
</body>
</html>

（2）C3

.user{
    width: 100%;
    height: 8rem;
    margin-top: 2.34rem;
}
.user>img{
    width: 4rem;
    height: 4rem;
    float:left;
    margin-top:2.5rem ;
    margin-left: 2rem;
    margin-right: 1rem;
    border-radius: 50%;
}
.user>p:first-of-type{
    padding-top:2.5rem;
}
.user>p{
    line-height: 1.3rem;
    color:blue;
    /*font-weight: bold;*/
}
.list>p{
    width: 100%;
    height: 3rem;
    background: #fff;
    line-height: 3rem;
    color:#46b0fe;
    border-bottom: solid 1px #ddd;
}
.list>p:nth-of-type(2){
    margin-bottom: 1rem;
}
.list>p>span>i{
    height: 2rem;
    text-align: center;
    float:left;
    padding-left: .8rem;
    padding-right: .3rem;
}
.list>p>span:last-of-type{
    float:right;
    padding-right: .8rem;
}
.list>input{
    width: 95%;
    margin-left: 2.5%;
    border: none;
    background:#46b0fe ;
    color:#fff;
    height: 2rem;
    line-height: 2rem;
    border-radius: 3px;
    margin-bottom: 4rem;
}
.list>p:last-of-type{
    margin-bottom: 2rem;
}

（3）执行结果如下

注意，移动端手机页面的设计，字体大小、页面距离、框大小都要有祖先元素：rem，这样能保证页面不论切换到任何分辨率的手机时，都可以完整的展现出来。

左希希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5+C3---手机页面

一移动端手机页面的代码示例（1）H5<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta charset="UTF-8"> <meta http-e...
复制链接

扫一扫