缺少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>

缺少HTML Doctype造成的样式问题的更多相关文章

关于<!DOCTYPE html>的学习（转）
DOCTYPE是对Document type的缩写,说明用XHTML或者HTML是什么版本的.必须出现在<html>标签的前面,不需要关闭标签. <!DOCTYPE>声明不是标 ...
DOCTYPE的详细图解
之前有一次写代码的时候忘记写了<!DOCTYPE html> 导致样式的效果一直有点问题,查了很久才发现时候这个的锅.之后自己详细的来查找了DOCTYPE的作用. 在目前,基本上都是采用浏 ...
Word样式教程
目录写在前面样式可以解决什么问题? 本文适合于快速入门一切皆样式样式与格式的关系如何修改样式建立新的样式样式的匹配和更新根据样式更新所选段落根据所选段落更新样式小结进一步了解 ...
BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
CSS入门使用
声明标签 HTML <!DOCTYPE> 内链样式表 <body style="background-color:green;margin:0;padding:0;&quo ...
今天被 <!doctype html> 搞了两个小时，两个页面同样的样式，chosen右边的小箭头，一个上下居中对齐一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
【odoo】【知识点】生成pdf文件时缺少样式的问题
欢迎转载,但需标注出处,谢谢! 背景近期在客户的项目中发现在自定义报表样式的时候,存在渲染为html正常,但是在生成pdf的时候,缺少样式的情况. 分析涉及到的odoo源码中的ir_actions ...
DOCTYPE声明作用及用法详解
一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工 ...
有关doctype!!!
浏览器呈现模式现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网页,也支持为老式浏览器而设计的网页.其中, Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...

随机推荐

apache .htaccess 伪静态重定向，防盗链限制下载...
301全站跳转 RewriteEngine OnRewriteCond %{HTTP_HOST} ^www\.old\.net$ [NC]RewriteRule ^(.*)$ http://www.n ...
【转】PFILE和SPFILE介绍
原文:http://blog.sina.com.cn/s/blog_77bba23901017xcl.html 一.PFILE Pfile(Parameter File,参数文件)是基于文本格式的参数 ...
CPU/寄存器/内存
因为要了解多线程,自然少不了一些硬件知识的科普,我没有系统学习过硬件知识,仅仅是从书上以及网络上看来的,如果有错误请指出来. CPU,全名Central Processing Unit(中央处理器). ...
Java String.contains()方法（转载）
Java String.contains()方法 Java String.contains()方法用法实例教程, 返回true,当且仅当此字符串包含指定的char值序列描述 java.lang.St ...
cocos2d-x笔记2：编译到安卓的步骤与注意事项
博客地址: www.cnblogs.com/wolfred7464/ 不得不说,真心复杂,本篇博客总结的基本是最简最直接的步骤了,不用Cygwin和Ant的,当然用也可以... 以下用 %PROJEC ...
iOS - instancetype
OC是一门正在迅速发展的语言,ARC,object literals ,subscripting ,blocks,Auto Synthesis,让我们看到它惊人的改变.instancetype是cla ...
安装plsql
sqlplus能登录,服务器.网络.tns配置应该都是好的,应该就是plsql本身的问题问下安装路径在哪? 注意安装路径中不能有括号,不要安装在C:\Program Files (x86)目录下面
Hbase案例分析（二）
情景1:
E.164 Format
From http://en.wikipedia.org/wiki/E.164 E.164 is an ITU-T recommendation, titled The international p ...
Python join()方法
描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法: str.join(sequence) 参数 sequence -- 要连接的 ...

缺少HTML Doctype造成的样式问题

缺少HTML Doctype造成的样式问题的更多相关文章

随机推荐

热门专题