很简单的一个登陆界面:

代码：

<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造成的样式问题的更多相关文章

  1. 关于<!DOCTYPE html>的学习（转）

    DOCTYPE是对Document type的缩写,说明用XHTML或者HTML是什么版本的.必须出现在<html>标签的前面,不需要关闭标签. <!DOCTYPE>声明不是标 ...

  2. DOCTYPE的详细图解

    之前有一次写代码的时候忘记写了<!DOCTYPE html> 导致样式的效果一直有点问题,查了很久才发现时候这个的锅.之后自己详细的来查找了DOCTYPE的作用. 在目前,基本上都是采用浏 ...

  3. Word样式教程

    目录 写在前面 样式可以解决什么问题? 本文适合于 快速入门 一切皆样式 样式与格式的关系 如何修改样式 建立新的样式 样式的匹配和更新 根据样式更新所选段落 根据所选段落更新样式 小结 进一步了解 ...

  4. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  5. CSS入门使用

    声明标签 HTML <!DOCTYPE> 内链样式表 <body style="background-color:green;margin:0;padding:0;&quo ...

  6. 今天被 <!doctype html> 搞了两个小时，两个页面同样的样式，chosen右边的小箭头，一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype

    今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头

  7. 【odoo】【知识点】生成pdf文件时缺少样式的问题

    欢迎转载,但需标注出处,谢谢! 背景 近期在客户的项目中发现在自定义报表样式的时候,存在渲染为html正常,但是在生成pdf的时候,缺少样式的情况. 分析 涉及到的odoo源码中的ir_actions ...

  8. DOCTYPE声明作用及用法详解

    一.浏览器呈现模式和doctype 有的网页是遵循标准而创作的,但也有很多不是.即使你不能创建遵循标准的网页,也希望浏览器根据标准来正确显示那些页.目前,大量网页充斥着大量非标准代码,它们仍能正常地工 ...

  9. 有关doctype!!!

    浏览器呈现模式 现代浏览器包括不同的呈现模式,目的是既支持遵循标准的网页,也支持为老式浏览器而设计的网页.其中, Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...

随机推荐

  1. JQuery上传插件Uploadify

    一:官网 http://www.uploadify.com/ 二:引用 <link href="plug-in/uploadify3.2.1/uploadify.css" r ...

  2. Python3 字符编码

    编码 字符串是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节 ...

  3. 移动web经验积累

    1.从最小宽度时候开发,调试到iphone4来开发 2.宽度百分比,高度由具体内容决定, 3.文字需要设置最大高度,溢出隐藏 white-space: nowrap; text-overflow: e ...

  4. textarea出现多余的空格

    今天使用textarea标签,调用数据的时候,出现一些多余的空格,如何改变属性都不能够经过某属性将空格去掉,经过查询,看了zuyi532的专栏(http://blog.csdn.net/zuyi532 ...

  5. 常见排序算法（PHP实现）

    function InsertSort($arr){ $num = count($arr); for($i = 1; $i < $num; $i++){ $key = $arr[$i]; for ...

  6. 全面理解.htaccess语法中RewriteCond和RewriteRule意义

    RewriteCond的语法 RewriteCond TestString CondPattern [Flags]其中的TestString是指一个文本格式的条件,例子中用的是环境变量名HTTP_HO ...

  7. Day9 网络编程

    OSI(Open System Interconnect),即开放式系统互联. ISO(International Standards Organization)国际标准化组织 OSI七层模型: TC ...

  8. Maven构建灵活配置文件

    本文解决以下问题: Maven下面启动Main函数: 配置JDK版本 如何配置文件,在开发部署测试各个不同版本间无缝切换配置文件: 启动Main函数 Maven默认是不支持Main函数程序,需要在po ...

  9. BZOJ3190[JLOI2013]赛车

    Description 这里有一辆赛车比赛正在进行,赛场上一共有N辆车,分别称为个g1,g2--gn.赛道是一条无限长的直线.最初,gi位于距离起跑线前进ki的位置.比赛开始后,车辆gi将会以vi单位 ...

  10. Cocos2d-X 2.2嵌入MFC的子窗口

    1.在cocos2dx目录下创建基于对话框的MFC工程,对话框中间放一个Picture控件 2.添加cocos2dx的相关头文件包含路径.库包含路径和依赖项,可以参考其他cocos工程设置 3.选中P ...