使用html+css3实现QQ登录界面

最新推荐文章于 2022-11-30 15:52:08 发布

墨竹之味

最新推荐文章于 2022-11-30 15:52:08 发布

阅读量6k

点赞数 9

分类专栏：前端初学文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/black_bamboo/article/details/119462545

版权

前端初学专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20210806exm_QQlogin</title>
    <style>
        /*初始化样式*/
        html,body,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{margin:0;padding:0;}
        body,button,input,textarea,select{font-size:12px;font-co:fff;}
        table{border-collapse:collapse;border-spacing:0;}
        ol,ul{list-style:none;}
        a{text-decoration:none;}
        img{border:none;vertical-align:top;}
        /*最外面的大盒子*/
        #mydiv{
            width: 430px;
            height: 332px;
            margin: 10% 40%;
        }
        /*下部分盒子*/
        #bodydiv{
            background-color: #ebf2fa;
            padding-bottom: 10px;
        }
        /*头像以及输入框*/
        #touxiangdiv,#mesgdiv{
            display: inline-block;
            height: 10px;
        }
        #touxiangdiv img{
            margin-top: -70px;
        }
        #mesgdiv{
            margin-top: 30px;
        }
        /*登录按钮*/
        #logindiv button,#logindiv input{
            width: 170px;
            height: 30px;
            margin-left: 85px;
            margin-top: -20px;
            color: white;
            background-color: deepskyblue;
            border: 0px;
            border-radius: 5px;
        }
        #logindiv{
            margin-top: 20px;
        }
        /*输入框*/
        #userinput,#userselect,#wordinput{
            width: 170px;
            height: 20px;
            border: 1px lightgray solid;
        }
        #userinput,#userselect{
            width: 172px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        #wordinput{
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        #autologin{
            margin-left: 135px;
        }
        .box1{
            margin-left: 50px;
        }
        .left{
            float: left;
        }
    </style>
</head>
<body>
<!--大盒子-->
<div id="mydiv">
<!--    上部分盒子-->
    <div>
        <img src="../img/20210806exam02.png"/>
    </div>
<!--    下部分盒子即主体盒子-->
    <div id="bodydiv">
<!--        form表单-->
        <form name="login"  method="post" action="#">
<!--            除开登录按钮以外的盒子-->
            <div class="box1">
<!--                头像盒子-->
                <div id="touxiangdiv">
                    <img  src="../img/20210806exam01.png"/>
                </div>
<!--                输入框盒子-->
                <div id="mesgdiv">
                    <div>

<!--                        下方的select标签和input标签使用其中一个就行，区别为select有下拉框，但没有提示且不能输入，input有提示且可以输入，但没有下拉框，属性placeholder的值即为提示-->
                        <select id="userselect" type="text" name="username">
                            <option value="">
                                2365241246
                            </option>
                            <option value="0">
                                1729381727
                            </option>
                        </select>&nbsp;&nbsp;<a href="#">注册账号</a>
<!--                        <input id="userinput" type="text" name="username" placeholder="账号">&nbsp;&nbsp;<a href="#">注册账号</a>-->

                        <br>
                        <input id="wordinput" type="password" name="pwd" placeholder="密码">&nbsp;&nbsp;<a href="#">找回密码</a>
                    </div>
                    <br>
                    <div>
                        <div class="left">
                            <input type="checkbox" name="rempwd">&nbsp;记住密码
                        </div>
                        <div id="autologin">
                            <input type="checkbox" name="autologin">&nbsp;自动登录
                        </div>
                    </div>
                </div>
            </div>
        </form>
<!--        登录按钮那一行的盒子-->
        <div id="logindiv">
            <img style="margin-left: 20px;" src="../img/20210806exam03.png"/>

<!--            下方的button标签和input标签使用其中一个就行，二者在展现上没有太大区别-->
<!--            <button type="submit">登&nbsp;录</button>-->
            <input type="submit" value="登&nbsp;录">

            <img style="margin-left: 70px" src="../img/20210806exam04.png"/>
        </div>
    </div>
</div>
</body>
</html>

2.图片资源

3.最终效果图

墨竹之味

关注

9
点赞
踩
64

收藏

觉得还不错? 一键收藏
1
评论
使用html+css3实现QQ登录界面

1.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>20210806exm_QQlogin</title> <style> /*初始化样式*/ html,body,dl,dd,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
复制链接

扫一扫