一个简单的登录页面

最新推荐文章于 2021-04-11 10:05:29 发布

小奔跳跳

最新推荐文章于 2021-04-11 10:05:29 发布

阅读量146

点赞数

分类专栏： PC端页面

本文链接：https://blog.csdn.net/qq_35367566/article/details/102781005

版权

PC端页面专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       body{
           background-color: #FAFAD2;
       }
       .font1{
           font-size: 40px;
           font-family: 黑体;
           text-align: center;
       }
       .font2{
           font-size: 20px;
           font-family: 黑体;
           text-align: center;
       }
        .bg{
            border: 10px solid 	#C0C0C0;
            width: 400px;
            height: 200px;
            position: relative;
            margin: 0 auto;
            top: 150px;
        }
        a{
            text-decoration: none;
        }
        .btn{
            width: 66px;
            height: 35px;
            display: block;
            background-color: green;
            margin: 0 auto;
        }
        input {
            margin: 0;
            padding: 0;
            height: 30px;
            width: 220px;
        }

        .td{
            width: 120px;
            height: 30px;
        }
    </style>
</head>
<body>
    <p class="font1">欢迎来到日记网！</p>
    <p class="font2">日记网登录界面</p>
    <div class="bg">
        <form>
            <table>
                <tr>
                    <td class="td">用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text" name="word"></td>
                </tr>
                <br>
                <tr>
                    <td colspan="2"><button  class="btn">登录</button></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

效果如下：

在这里插入图片描述

小奔跳跳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的登录页面

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background-color: #FAFAD2; }...
复制链接

扫一扫

专栏目录