HTML+CSS 登录页面

最新推荐文章于 2024-04-11 22:02:08 发布

MrLc666

最新推荐文章于 2024-04-11 22:02:08 发布

阅读量10w+

点赞数 90

分类专栏： HTML 文章标签： html css

本文章博主原创，希望对你有所帮助。

本文链接：https://blog.csdn.net/sakenc/article/details/91465144

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

登陆界面设计：

这篇文章主要介绍了HTML+CSS实现登录页面的相关资料,需要的朋友可以参考下

展示效果：

源代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        /*统一页面字体和大小*/
        body {
            font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        /*清除常用元素的边界、补白、边框默认样式*/
        p, h1, form, button {
            border: 0;
            margin: 0;
            padding: 0;
        }
        /*定义一个强制换行显示类*/
        .spacer {
            clear: both;
            height: 1px;
        }
        /*定义表单外框样式*/
        .myform {
            margin: 0 auto;
            width: 400px;
            padding: 14px;
        }
        /*定制当前表单样式*/
        #stylized {
            border: solid 2px #b7ddf2;
            background: #ebf4fb;
        }
            /*设计表单内div和p通用样式效果*/
            #stylized h1 {
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 8px;
            }

            #stylized p {
                font-size: 11px;
                color: #666666;
                margin-bottom: 20px;
                border-bottom: solid 1px #b7ddf2;
                padding-bottom: 10px;
            }

            #stylized label { /*定义表单标签样式*/
                display: block;
                font-weight: bold;
                text-align: right;
                width: 140px;
                float: left;
            }
            /*定义小字体样式类*/
            #stylized .small {
                color: #666666;
                display: block;
                font-size: 11px;
                font-weight: normal;
                text-align: right;
                width: 140px;
            }
            /*统一输入文本框样式*/
            #stylized input {
                float: left;
                font-size: 12px;
                padding: 4px 2px;
                border: solid 1px #aacfe4;
                width: 200px;
                margin: 2px 0 20px 10px;
            }
            /*定义图形化按钮样式*/
            #stylized button {
                clear: both;
                margin-left: 150px;
                width: 125px;
                height: 31px;
                background: #666666 url(images/button.png) no-repeat;
                text-align: center;
                line-height: 31px;
                color: #FFFFFF;
                font-size: 11px;
                font-weight: bold;
            }
        /*设计表单内文本框和按钮在被激活和获取焦点状态下时，轮廓线的宽、样式和颜色*/
        input:focus, button:focus {
            outline: thick solid #b7ddf2;
        }

        input:active, button:active {
            outline: thick solid #aaa;
        }
        /*通过outlineoffset属性放大轮廓线*/
        input:active, button:active {
            outline-offset: 4px;
        }

        input:focus, button:focus {
            outline-offset: 4px;
        }
    </style>
</head>
<body>
    <div id="stylized" class="myform">
        <form id="form1" name="form1" method="post" action="">
            <h1>登录</h1>
            <p>请准确填写个人信息...</p>
            <label>Name <span class="small">姓名</span> </label>
            <input type="text" name="textfield" id="textfield">
            <label>Email <span class="small">电子邮箱</span> </label>
            <input type="text" name="textfield" id="textfield">
            <label>Password <span class="small">密码</span> </label>
            <input type="text" name="textfield" id="textfield">
            <button type="submit">登 录</button>
            <div class="spacer"></div>
        </form>
    </div>
</body>
</html>

MrLc666

关注

90
点赞
踩
253

收藏

觉得还不错? 一键收藏
8
评论
HTML+CSS 登录页面

<!doctype html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*统一页面字体和大小*/ body { f...
复制链接

扫一扫