登陆页面的html设置

最新推荐文章于 2024-10-07 16:38:08 发布

一只懒得睁眼的猫

最新推荐文章于 2024-10-07 16:38:08 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： html 登陆页面

本文链接：https://blog.csdn.net/a2011480169/article/details/76100670

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

博客核心内容：

1、页面设计1

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lele</title>
    <style>
        [name="meilele"]{
            margin-left: 323px;
            margin-top: 120px;
        }
        [name="wai1"]{
            width: 677px;
            height: 300px;
            border: solid 2px wheat;
            margin-left: 333px;
        }
        [name="fayangcai"]{
            float: left;
            margin-left: 30px;
            margin-top: 55px;

        }

        [name="wai1_right"]{
            width: 280px;
            height:200px ;
            border: solid 1px;
            float: left;
            margin-top: 45px;
            margin-left: 100px;

        }
        .item1{
            margin-left: 10px;
        }
        .item2{
            margin-left: 25px;
        }
        .item3{
            font-size: 15px;
        }
        [name="log_auto"]{
            margin-left: 79px;
            float: left;
        }
        [name="auto_log"]{
            font-size: 12px;
            float: left;
        }

        .item4_1{
            font-size: 12px;
            float: left;
            color: blue;
            margin-left: 10px;
        }

        [item="log"]{
            border: solid;
        }

        [item="log_button"]{
            width: 143px;
            height: 22px;
            background-color: red;
            margin-top: 10px;
            margin-left: 77px;
            margin-right: 61px;
            text-align: center;
            line-height: 22px;
            font-size: 14px;
            color:white;
        }

        [name="free_log"]{
            margin-top: 273px;
        }

        [item="free_log_1"]{
            height: 25px;
            background-color: red;
            border: solid 1px red;
            margin-left:550px ;
            text-align: center;
            line-height: 25px;
            color:white;

        }

        [name="banquan"]{
            margin-top: 20px;
            font-size: 10px;
            text-align: center;
        }

    </style>
</head>

<body>
    <div name="meilele">
        <img src="11.png"  alt="meilele">
    </div>
    <div name="wai1">
        <div name="fayangcai"><img src="22.png" alt="fayangcai"></div>
        <div name="wai1_right">

            <p class="item1">
                <label class="item3" for="username">*用户名: &nbsp </label>
                <input type="text" name="username" id="username">
            </p>
            <p class="item2">
                <label class="item3" for="passwd">*密码: &nbsp </label>
                <input type="password" name="passwd" id="passwd">
            </p>

            <p class="item1">
                <label class="item3" for="yanzhengma">*验证码: &nbsp </label>
                <input type="text" name="yanzhengma" id="yanzhengma">
            </p>

            <div class="item4">
                <input type="radio" name="log_auto" value="自动登陆"><span name="auto_log">自动登录</span>
                <div class="item4_1">忘记密码？</div>
            </div><br>

            <div item="log_button">登陆</div>

        </div>
        <div name="free_log">
            <div item="free_log_1">免费注册>></div>
        </div>
    </div>
    <div name="banquan">©2014-2015 www.autohome.com.c All Rights Reserved.xxxxx版权所有</div>
</body>

</html>