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>
  • 相关阅读:
    php 构造函数支持不同个数参数的方法
    浅谈管理系统操作日志设计(附操作日志类)
    PHP 远程文件下载的进度条实现
    PHP处理大文件下载
    c语言线性表
    c语言题目:找出一个二维数组的“鞍点”,即该位置上的元素在该行上最大,在该列上最小。也可能没有鞍点
    c语言:从一组数据中选出可以组成三角形并且周长最长的三个数(简单)
    关于Staruml与powerdesigner启动使用中的问题
    Win7下安装Apache+PHP+MySQL
    <转>java编译问题:使用了未经检查或不安全的操作
  • 原文地址:https://www.cnblogs.com/ghgyj/p/4038950.html
Copyright © 2011-2022 走看看