缺少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 (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...
随机推荐
- express的基本配置项
express自动生成的app.js中有一段代码用app.set和app.use对express进行配置,但这些配置都是什么意思,以及都能做哪些配置并没有展开.这一节就专门来讲express的配置.上 ...
- php中引用符号(&)的使用详解
php的引用就是在变量或者函数.对象等前面加上&符号,在PHP 中引用的意思是:不同的名字访问同一个变量内容,下面介绍如何使用PHP的引用 与C语言中的指针是有差别的．C语言中的指针里面存储的 ...
- php设计模式笔记：单例模式
php设计模式笔记:单例模式 意图: 保证一个类仅有一个实例,并且提供一个全局访问点 单例模式有三个特点: 1.一个类只有一个实例2.它必须自行创建这个实例3.必须自行向整个系统提供这个实例 主要实现 ...
- c#自动更新+安装程序的制作 （转）
c#自动更新+安装程序的制作 (转) http://blog.csdn.net/myhuli120/article/details/6927588 一.自动更新的实现 让客户端实现自动更新,通常做法 ...
- 如何得到django中form表单里的复选框（多选框）的值（ MultipleChoiceField ）
直接写代码吧 CHECKBOX_CHOICES = ( ('Value1','Value1'), ('Value2','Value2'), ) class EditProfileForm(ModelF ...
- Keil的c语言编译器
我曾经通过查看反汇编代码对KEILC编译器进行了测试,大概有这么一下内容,也得出一些结论. (1)全局变量:如果程序中定义了全局变量,而且初始值不是0.此时,在程序调到main()函数执行前,除了要进 ...
- WF工作流与管理类应用系统工作流需求实现的一些误区
如今实现各种应用系统大家都知道工作流是一个非常重要的环节,不同的业务系统的工作流需求是需要找相应的工作流产品去实现的,因为不同工作流产品的架构细节也许会成为某类需求实现的瓶颈. WF ...
- 贴板子系列_1-km算法，匈牙利算法
KM算法 #include <bits/stdc++.h> #define N 1500 #define inf 999999999 using namespace std; ,ny=,k ...
- Memcached(三)Memcached配置参数初解
一.基本参数在我们第一次安装Memcached时,一般都是用过这个命令: memcached -m 512 -u root -d -l 127.0.0.1 -p 11211 我们先来解释这几个参数的含 ...
- [转]HTTP Error 400. The request hostname is invalid.
一般看到网站提示Bad Request(Invalid Hostname)错误我们都会说是iis,apache出问题了,iis出现这种问题解决办法大概是:IIS> 默认网站> > 属 ...