html 5 每日代码

最新推荐文章于 2021-06-30 18:57:40 发布

yukun123123

最新推荐文章于 2021-06-30 18:57:40 发布

阅读量514

点赞数 2

分类专栏： html5 android 文章标签：登录

本文链接：https://blog.csdn.net/yukun123123/article/details/51367496

版权

html5 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

android

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<link rel="stylesheet" href="../css/openAccent/login.css">
<script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script>
<title>登录</title>
</head>

<body>
    <script type="text/javascript" src="../js/WapRoot.js" ></script>
    <header class="more_header header">
       <a href="" class="left"><img src="../img/images/home_return@2x.png" alt="" /></a>
            登录
        <a href="###" class="exit"></a>
    </header>
    <section>
       <div><img src="../img/index_img/touxiang@2x.png" alt="" /></div>
       <div><span><img src="../img/images/login_mima@2x.png" alt="" /></span><span><input type="text" placeholder="请输入登录密码"/></span></div>
    </section>
    <footer><a href="">登&nbsp;录</a></footer>
    <a href="phone_test.html"><p>切换账号</p></a><p class="t_right">忘记登录密码?</p>
    <div class="logo"><img src="../img/public_img/logo.png" alt="" /></div>
</body>
</html>
基础的header在css中进行设置
header {
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;

}

.left {
    float: left;
}

.right {
    float: right;
}

a.left {
    font-size: 18px;
    text-align: left;
    color: #999;
    font-weight: bold;
    position: absolute;
    left: 15px;
}

a.left img {
    height: 18px;
    vertical-align: middle;

}

img.right {
    width: 20px;
    margin-top: 14px;
    cursor: pointer;
    padding-right: 15px;
}

a.right {
    font-size: 12px;
    color: #666;
    position: absolute;
    right: 15px;
    top: 3px;
    padding-right: 15px;
}

.main {
    position: absolute;
    top: 45px;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    width: 100%;
}