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>

查看全文

相关阅读:
可视化理解卷积神经网络
 方差标准差区别
 SSIS中出现数据流数据源假死状态的解决办法
 IIS中ASP.NET虚拟目录不继承主站点web.config设置的办法（转载）
SSAS 度量值中的distinct count局聚合方式会数为null的值
 SSAS中CUBE的多对多关系既可以出现在中间事实表上也可以出现在中间维度表上
 SSAS中事实表中的数据如果因为一对多或多对多关系复制了多份，在维度上聚合的时候还是只算一份
 获取当前正在执行的Javascript脚本文件的路径
 C#中try catch中throw ex和throw方式抛出异常有何不同
 SqlServer 一个查询语句导致tempdb增大55G（转载）

原文地址：https://www.cnblogs.com/ghgyj/p/4038950.html