zoukankan      html  css  js  c++  java

  • 缺少HTML Doctype造成的样式问题

    很简单的一个登陆界面:

    代码：

    <html>
<head>
    <style type="text/css">
    form span {
    display: block;
    font-size: 1em;
    color: #787878;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
        body{
            background-color: #86B4CC;
        }
        .main{
            margin: 7em auto 0;
            width: 30%;
            position: relative;
        }
        .user{
            text-align: right;
            margin-right: 5.2em;
        }
        .login{
            background-color: #fff;
            position: relative;
            padding: 2em 2em;
        }
        form span{
            display: block;
            color: #787878;    
            padding-bottom: 5px;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;

        }
        input[type="text"],input[type="Password"]{
            padding:9px;
            width: 90%;
            border:2px solid #609EC3;
            margin-left: 5px;
        }
        .sign{
            padding: 10px 0;
        }
        .submit{
            padding: 2px 2px;
            float: left;
            margin-right: 11px;
        }
        .forget-pass{
            float: right;
        }
        .submit input[type="submit"]{
            background: #F06B37;
            border:none;
            padding: 0.55em 1.3em 0.6em;
            cursor: pointer;
            color: #FFF;
            border-radius: 1.3em;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="user">
            <img src="user.png">
        </div>
        <div class="login">
            <div class="inset">
                <form>
                    <div>
                        <span>
                            <label>Username</label>
                        </span>
                        <span> 
                            <input type="text" class="textbox" id="active">
                        </span>
                    </div>
                    <div>
                        <span>
                            <label>Password</label>
                        </span>
                        <span>
                            <input type="password" class="textbox" id="active">
                        </span>                        
                    </div>
                    <div class="sign">
                        <div class="submit">
                            <input type="submit" value="LOGIN">
                        </div>
                        <div class="forget-pass">
                            <a href="#">Forget Password</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

    如果加上<!DOCTYPE html>

    什么代码都没有改，就是加上了<!DOCTYPE html>

    <!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    form span {
    display: block;
    font-size: 1em;
    color: #787878;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
        body{
            background-color: #86B4CC;
        }
        .main{
            margin: 7em auto 0;
            width: 30%;
            position: relative;
        }
        .user{
            text-align: right;
            margin-right: 5.2em;
        }
        .login{
            background-color: #fff;
            position: relative;
            padding: 2em 2em;
        }
        form span{
            display: block;
            color: #787878;    
            padding-bottom: 5px;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;

        }
        input[type="text"],input[type="Password"]{
            padding:9px;
            width: 90%;
            border:2px solid #609EC3;
            margin-left: 5px;
        }
        .sign{
            padding: 10px 0;
        }
        .submit{
            padding: 2px 2px;
            float: left;
            margin-right: 11px;
        }
        .forget-pass{
            float: right;
        }
        .submit input[type="submit"]{
            background: #F06B37;
            border:none;
            padding: 0.55em 1.3em 0.6em;
            cursor: pointer;
            color: #FFF;
            border-radius: 1.3em;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="user">
            <img src="user.png">
        </div>
        <div class="login">
            <div class="inset">
                <form>
                    <div>
                        <span>
                            <label>Username</label>
                        </span>
                        <span> 
                            <input type="text" class="textbox" id="active">
                        </span>
                    </div>
                    <div>
                        <span>
                            <label>Password</label>
                        </span>
                        <span>
                            <input type="password" class="textbox" id="active">
                        </span>                        
                    </div>
                    <div class="sign">
                        <div class="submit">
                            <input type="submit" value="LOGIN">
                        </div>
                        <div class="forget-pass">
                            <a href="#">Forget Password</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
  • 相关阅读:
    利用CSS计数函数counter()实现计数
    弹跳加载动画特效Bouncing loader
    HTML页面中解决内容元素随窗口变化布局变乱问题
    CSS中列表项list样式
    框模型中设置内容区域元素占地尺寸box-sizing属性
    PHP100视频教程-->视频下载
    HTML页面中5种超酷的伪类选择器:hover效果
    HTML中获取input中单选按钮radio数据(性别例子)
    HTML中 DOM操作的Document 对象详解(收藏)
    14、输入一个链表，从尾到头打印链表每个节点的值。
  • 原文地址：https://www.cnblogs.com/ghgyj/p/4038950.html
Copyright © 2011-2022 走看看