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>

查看全文

相关阅读:
为什么使用GitHub
java学习笔记
 mysql 内置功能存储过程创建有参存储过程
 mysql 字符串类型 char varchar
前端 HTML 注释
 mysql 内置功能存储过程删除存储过程
 前端开发目录
 mysql 内置功能存储过程创建无参存储过程
 mysql 内置功能存储过程目录
 mysql 内置功能存储过程介绍

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