Day6 --制作简易百度登录

最新推荐文章于 2025-12-19 15:33:32 发布

原创最新推荐文章于 2025-12-19 15:33:32 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度登录 #html

IMweb小白营专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个简易的百度登录页面。包括布局设计、样式设置及响应式处理等内容，适合初学者练习网页开发技能。

day6 制作简易百度登录

知识内容
1. <div>块作用域，定义display:block可以通过调节width:100%充满整个一行，内部元素通过float可以实现左右定位
2. html语义化，按照标准规范可以使代码层次更清晰。
3. 可以先别写完基础的html结构，把所需内容写完，再从外到里逐步添加样式，条理清晰能够方便快速的调整完所有内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .login-item {
            display: block;
            position: relative;
            width: 300px;
            height: 340px;
            margin: 10% auto;
            padding: 5px 10px;
            border: 1px solid #ccc;
        }

        .login-head {
            display: block;
            position: absolute;
            width: 100%;
            height: 36px;
            top: 0;
            left: 0;
            line-height: 36px;
            background-color: #fff;
            border-bottom: 1px solid #cccccc;
            overflow: hidden;
        }

        .login-head img {
            display: block;
            float: left;
            margin-top: 8px;
            margin-left: 10px;
            line-height: 30px;
        }

        .login-head p {
            display: block;
            width: 100px;
            height: 20px;
            float: left;
            margin-left: 10px;
        }

        .login-head .close-login {
            display: block;
            float: right;
            width: 20px;
            height: 20px;
            font-size: 1.4em;
            margin-right: 10px;
        }

        .login-head  a {
            display: block;
            text-decoration: none;
            color: black;
            cursor: pointer
        }
        .login-box {
            margin-top: 40px;
            padding: 0 5px;
            height: 230px;
            width: 95%;

        }

        .login-input {
            display: block;
            width: 100%;
        }

        .login-input input {
            display: block;
            outline-style: none;
            padding: 0 15px;
            width: 90%;
            height: 30px;
            margin: 10px auto;
            font-size: 0.8em;
        }

        .login-methods {
            display: block;
            position: relative;
            width: 100%;
            height: 20px;
            text-align: right;
            overflow: hidden;
        }

        a {
            display: block;
            text-decoration: none;
            color: rgb(27, 102, 199);
            cursor: pointer
        }

        .login-tool {
            display: block;
            position: relative;
            width: 100%;
            margin: 5px auto;
            overflow: hidden;
        }

        .login-convenient {
            display: block;
            position: relative;
            float: left;
            font-size: 0.7em;
        }

        .login-problem {
            display: block;
            position: relative;
            float: right;
            font-size: 0.7em;
        }

        .login {
            display: block;
            position: relative;
            width: 100%;
            height: 40px;
        }

        .login input {
            display: block;
            position: relative;
            width: 100%;
            height: 30px;
            margin-top: 10px;
            font-size: 1.2em;
            line-height: 30px;
            background-color: #3f89ec;
            color: white;
            border: none;
        }

        .sign-up {
            display: block;
            position: relative;
            width: 100%;
            height: 30px;
            margin-top: 10px;
            text-align: right;
            font-size: 0.8em;
        }
    </style>
</head>
<body>
<div class="login-item">
    <header class="login-head">
        <img src="#" width="20" height="20">
        <p>登录百度账号</p>
        <a href="#" class="close-login">x</a>
    </header>
    <section class="login-box">
        <header class="login-methods">
            <a class="quick-login" href="#">快捷登录</a>
        </header>
        <section class="login-input">
            <form>
                <input type="text" name="username" placeholder="请输入用户名">
                <input type="password" name="password" placeholder="请输入密码">
            </form>
        </section>
        <footer>
            <div class="login-tool">
                <div class="login-convenient">
                    <input type="checkbox" name="login-checkbox">
                    <label>下次自动登录</label>
                </div>
                <p class="login-problem">
                    <a href="#">登录遇到问题</a>
                </p>
            </div>
            <div class="login">
                <input type="button" value="登录">
            </div>
            <div class="sign-up">
                <a href="#">立即注册</a>
            </div>
        </footer>
    </section>
    <footer class="">
        <p>可以用以下方式登录</p>
        <img src="#" width="20" height="20">
        <img src="#" width="20" height="20">
    </footer>
</div>
</body>
</html>

demo展示

* 图片展示：*

简易百度