缺少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 (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...
随机推荐
- struts2请求过程源码分析(转)
Struts2是Struts社区和WebWork社区的共同成果,我们甚至 可以说,Struts2是WebWork的升级版,他采用的正是WebWork的核心,所以,Struts2并不是一个不成熟的产品, ...
- SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...
- js事件流、事件处理程序/事件侦听器
1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...
- ySQL for mac使用记录
一.登录 打开终端,输入/usr/local/mysql/bin/mysql -u root -p 初次进入mysql,密码为空.当出现mysql>提示符时,表示你已经进入mysql中.键入ex ...
- 两台主机打通ssh
ssh打通基本概念:如果需要通过SSH进行远程登录,我们一般是需要手动输入密码,但如果将SSH之间的权限打通的话,就可以实现无密码登录.这对shell脚本的定时执行有很大的帮助. (一),生成秘钥,先 ...
- virtualBox ubuntu 文件共享
如何将主机中的文件共享到虚拟机中: 1. 查看/dev中的文件 命令:ls /dev 2. 找到 cdrom1 ,直接挂载到/mnt 命令:sudo mount /dev/cdrom1 /mnt ...
- discuz 门户栏目URL跳转异常的问题
“SEO设置-URL静态化”的问题.
- Mysql table ful
http://ourmysql.com/archives/1327 http://blog.csdn.net/kevon_sun/article/details/7967728 http://my.o ...
- 最全的微软msdn原版windows系统镜像和office下载地址集锦
随着windows的发展,越来越多的人都热衷于微软的原版系统下载了,相比之前的版本比如winxp版本,windows vista/win7/win8/win8.1/win10后来的版本在安装方面也比较 ...
- 详解如何用AD 生成Gerber文件
以上gerber文件就出完了; 下面步骤是:进行导出" 钻孔文件 ". 以上钻孔文件就出完了; 到此就全部完成输出了. 下面的操作,也可以不用导的 .下面步骤是:进行导出&qu ...