缺少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 (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...
随机推荐
- session 保存在指定的数据表,cookie设置
首先建立数据表,可在ThinkPHP/Extend/Driver/Session/SessionDb.class.php中copy代码 在配置文件中配置: 'SESSION_TYPE' => ' ...
- php中CURL技术模拟登陆抓取数据实战，抓取某校教务处学生成绩。
这两天有基友要php中curl抓取教务处成绩的源码,用于微信公众平台的开发.下面笔者只好忍痛割爱了.php中CURL技术模拟登陆抓取数据实战,抓取沈阳工学院教务处学生成绩. 首先,教务处登录需要验证码 ...
- WPF中的字体改善
WPF4对字体渲染做了很大的改善,增加了TextOptions属性,该属性可以设置TextFormattingMode,TextRenderingMode,TextHintingMode 1.Text ...
- sublime部署开发环境
安装nodejs 去官网下载安装,暂时不建议安装5.0以上版本. 命令行运行以下命令查看是否安装成功: 全局安装gulp $ npm install -g gulp 全局安装requirejs 压缩资 ...
- Codeforces Round #198 (Div. 2) —— B
B题是一个计算几何的题,虽然以前看过计算几何的ppt,但一直都没有写过: 昨晚比赛的时候本来想写的,但是怕不熟练浪费时间,太可惜了! 其实没必要选出一个最大的矩形: 以矩形的一条对角线为轴,向上或者向 ...
- spring 属性配置细节
1.使用构造器注入属性值可以指定参数的位置和参数的类型!以区分重载的构造器.例如:<constructor-arg value="" type="java.lang ...
- 因为中国队赢了，再撸一下DJANGO的官方文档吧
对比一下,CBVS和FBVS,哪个方便? from django.shortcuts import render from django.http import Http404 from django ...
- 【网络流24题】No.21 （最长 k 可重区间集问题 最长不相交路径 最大费用流）
[] 输入文件示例input.txt4 21 76 87 109 13 输出文件示例output.txt15 [分析] 直接co题解好了,写得挺全.. [建模方法] 方法1 按左端点排序所有区间,把每 ...
- hadoop伪分布安装
解压 将安装包hadoop-2.2.0.tar.gz存放到/home/haozhulin/install/目录下,并解压 #将hadoop解压到/home/haozhulin/install路径下,定 ...
- statspack系列8
原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-8/ 作者:Jonathan Lewis 在前面的关于stat ...