前端小白Day6-仿照百度制作登录界面

最新推荐文章于 2024-06-24 09:51:10 发布

Ivy_ZW

最新推荐文章于 2024-06-24 09:51:10 发布

阅读量1.3k

点赞数 1

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/Ivy_ZW/article/details/70332399

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

由于昨天事情有点多迟了一天，昨天的任务是：仿照电脑端百度登录框制作一个登录界面。
HTML部分代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="06.css">
</head>
<body>
    <div class="login">
        <div class="title">
            <div class="title_img">
                <img src="baidulogo.jpg">
            </div>
            <div class="title_content">
                登录百度账号
            </div>                      
        </div>
        <div class="content">
            <div class="sms_login">
                <a href="">短信快捷登录</a>
            </div>
            <form method="get">
                <input type="text" name="UserName" placeholder="用户名或邮箱" class="usrname">
                <input type="password" name="UserPassword" placeholder="密码" class="pass">
                <div class="remember">
                    <input type="checkbox" name="Check"><span>下次自动登录</span>
                </div>
                <div class="problem_login">
                    <a href="">登录遇到问题</a>
                </div>
                <input type="submit" name="SubmitButton" value="登录" class="submitBtn">
            </form>
            <div class="register">
                <a href="">立即注册</a>
            </div>
        </div>  
        <hr />
        <div class="other_login">
            <div class="other_title">
                可以使用以下方式登录
            </div>
            <div class="other_icon">
                    <img src="qq.jpg" alt="QQ图标">
                    <img src="weibo.jpg" alt="微博图标">
            </div>                  
        </div>
    </div>
</body>
</html>

CSS部分代码如下：

.login{
    border-style: solid;
    border-width: 1px;
    border-color: black;
    width: 400px;
    /*使用绝对布局
    position: absolute;
    margin-top:100px;
    margin-left: 200px;*/
    margin:0 auto;
}
.title{
    font-weight: bold;
    font-size: 20px;
    font-family: courier,serif;
    background-color: #E8E8E8;
    padding: 8px;
    height: 35px;
}
.title img{
    width: 30px;
    height: 30px;
}
.title_content, .title_img{
    float:left;

}
.title_content{
    margin:3px auto 3px 3px;
}
.content, .other_login{
    margin:20px;
}
.sms_login{
    text-align: right;
    font-size: 14px;
}
.usrname, .pass, .submitBtn{
    width: 100%;
    font-size: 16px;
    padding: 8px 0px 8px 0px;
}
.sms_login, .usrname, .pass, .remember, .submitBtn{
    margin-bottom: 5px;
}
.usrname, .pass, .remember, .submitBtn, .register{
    margin-top: 6px;
}
.remember{
    font-size: 12px;
}
.problem_login{
    text-align: right;
    font-size: 12px;
}
.submitBtn{
    color: white;
    border-radius: 5px;
    background-color: #2066C5;
}
.register{
    text-align: right;
    font-size: 12px;
}
a:link, a:visited{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
hr{
    /*color: #E8E8E8;*/
    color: #D8D8D8;
}
.other_icon img{
    width: 25px;
    height: 25px;
    margin:5px;
}
.other_title{
    color: #606060;
    font-size: 12px;
    margin-bottom: 5px;
}