缺少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 (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 ...
随机推荐
- Nigix快速上手注意事项
linux下,主要关于配置,包括主从,待续......
- 查看文章 mysql:表注释和字段注释[转]
1 创建表的时候写注释 create table test1 ( field_name int comment '字段的注释' )comment='表的注释'; 2 修改表的注释 alter tabl ...
- Python 命令行参数解析
方法1: Python有一个类可以专门处理命令行参数,先看代码: #!/usr/bin/env python # encoding: utf-8 from optparse import Option ...
- vs2012生成的项目,如何在只装有VS2010的电脑上打开
步骤: 1.用记事本打开Vs2012生成的项目解决方案文件(.sln文件)文件 2.修改前两行 Microsoft Visual Studio Solution File, Format Versio ...
- STM32内存映射
一.概述 STM32内存映射是STM32的架构的重要组成部分,不可或缺. 二.STM32内存映射图 1.内存映射图--摘自<CM3权威指南> 2.内存映射图--摘自<STM32F10 ...
- 【转】mybatis 获取自增id
转自:http://www.cnblogs.com/rhythmK/p/4047142.html 1.环境: mybatis : 3.2.3 spring-mybatis: 1.2.1 mysql: ...
- tabbar - 取消系统渲染
/** 1. 取消自动渲染 - 图片***/ viewCon1.tabBarItem.selectedImage = [[UIImage imageNamed:@"tabbar_home_ ...
- AppDelegate解析
当我们创建一个iOS项目,默认会有main.m类,这是一个程序的主入口.main.m方法体如下: #import <UIKit/UIKit.h> #import "AppDele ...
- c++ 函数的函数声明
c++ 函数的函数声明 只要在被调用函数的首部的末尾加一个分号,就成为对该函数的函数声明.函数声明的位置应当在函数调用之前. #include <iostream> using names ...
- jQuery实现iframe的自适应高度
假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...