Day6 --制作简易百度登录

day6 制作简易百度登录

知识内容
1.

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>logintitle>
    <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">xa>
    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展示

* 图片展示:*

Day6 --制作简易百度登录_第1张图片

你可能感兴趣的:(IMweb小白营,百度登录,html)