htm练习2 登陆页面

  学习html的第二天,学习了一下css样式表,通过使用css练习实现一个简单的登陆页面,刚开始学习很多地方都不是很完善,在使用css来控制标签的样式也是多番调试,去查询各种属性。代码也不是很完美。对于模块的布局也做得不是很好,因为还没学习到布局的内容,所以这里就用了表格来实现,希望之后学习更多之后能够完成的更好!


登陆页面.png

html部分

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登陆页面</title>
        <link rel="stylesheet" href="css/登陆页面练习.css">
    </head>
    <body>
        <div>
            <!--背景图片-->
            <div id="web_bg" style="background-image: url(img/111.jpg);"></div>

        </div>
        <div>
            <div>
                <table class="tb1"   border="1" >
                    <tr class="tr1">
                        <td>后台管理系统<br>BACKGROUND MANAGEMENT SYSTEM</td>
                    </tr>
                    <form>
                    <tr>
                        <td>
                            <div>
                            <font>用户名:</font> <input type="text" name="用户名" >
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div>
                            <font>密 码:</font>&emsp;<input type="password" name="密码">
                                </div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            &emsp;&emsp;&emsp;&emsp;<input class="radio" type="radio" >记住密码 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 忘记密码?
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div >&emsp;&emsp;&emsp;&emsp;<input class="dl" type="submit" value="登录" >
                            </div>
                        </td>
                    </tr>
                    </form>

                    <tr>
                        <td>
                            <font>还没有此账号?<a target="_blank" href="https:www.baidu.com">立即注册</a></font><br><br>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </body>
</html>

css部分


.tr1{
    height: 20%;
    text-align: center;
    background-color: #A4D3EE;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.tb1{
    width:500px;
    height:350px;
    position:absolute;
    top: 30%;
    left: 58%;
    bottom: 0px;

}

.dl{
    color: white;
    background-color: #A4D3EE;
    font-size: 20px;
    font-weight: bold;
}

.radio{
    height: 16px;
    width: 16px;
}

input {
    width: 300px;
    height: 40px;
    font-size:25px;

}


div{
    text-align: center;
}
tr{
    border-color: rgba(0,0,0,0);
}

#web_bg{
    position:fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    min-width: 1000px;
    z-index:-10;
    zoom: 1;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;

}



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容