@charset "utf-8";
/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td
{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{font-size:100%;}
/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underlline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:0;margin-right:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:rigth;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.vm{verticle-align:middle;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0}
.zoom{zoom:1;}
.hidden{visiility:hidden;}
.none{display:none;}
/*长度高度*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w{width:100%}
.h50{width:50px;}
.h80{width:80px;}
.h100{width:100px;}
.h200{width:200px;}
.h{height:100%}
/*边距*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}
分享到:
相关推荐
自己总结的css reset, 参考了雅虎和书本上的. 希望对html开发者有点用.
在讨论如何打造自己的reset.css时,首先需要理解reset.css的作用。...在此基础上,项目的设计和布局可以通过添加额外的CSS样式文件来完成,从而确保网站的样式既符合设计规范,又能保持良好的浏览器兼容性和用户体验。
base.css [基础样式库文件,包含了重置与定义以及常用class] reset.css [精简与高效的重置方案,推荐尽可能使用normal.css] normal.css [与reset不同,注重的是各浏览器表现、W3C标准、用户体验以及减小开发难度] ...
最后是"base.min.css",与"reset.min.css"类似,这是"base.css"的压缩版本,适用于部署到实际网站,可以提高页面加载效率。 在实际开发中,开发者可以选择使用像"normalize.css"这样的现代替代方案,它不仅重置样式...
此外,基础样式(base.css)可以合并这些文件,为每个项目提供统一的起点。 4. **后续设置** 完成reset.css后,项目特定的设置是必要的。这可能包括但不限于:调整字体家族、大小和行高,定义边距和填充,处理列表...
对于诸如base.css,归一化和重置之类的项目,其共同目标是实现跨浏览器的一致性。 规范化是通过考虑给定元素的标准“外观和行为”并将浏览器固定在行为不同的位置来实现的。 它诞生于reset.css的替代方法,后者只是...
你可以通过网站如<https://cssreset.com/> 下载`reset.css`文件,这个网站还提供了其他类似`normalize.css`的选择,它们在重置样式的同时,保留了一些基本的可访问性和语义化样式。 二、关于1px边框问题 随着...
2. css/ - CSS样式文件夹,包括reset.css、base.css和login.css。 3. js/ - JavaScript脚本文件夹,可能包含login.js用于表单验证和提交逻辑。 4. img/ - 图片资源文件夹,存放登录界面所需的图标和其他图像。 5. ...
- `base.css`:基础样式,如reset或通用样式。 - `layout.css`:布局相关的样式。 - `themes.css`:主题或配色方案。 - `columns.css`:与列布局相关的样式。 - `font.css`:字体和文字样式。 - `forms.css`:...
- CSS文件也使用英文命名,后缀为.css,基础样式使用base.css,首页用index.css,其他页面按模块命名。 - Js文件同样遵循英文命名,后缀为.js,通用脚本为common.js,其他按需命名。 2. **HTML书写规范**: - ...
1. `reset.css`:清除浏览器默认样式,确保各浏览器间的一致性。 2. `base.css`:定义基本样式,如字体、颜色、间距等。 3. `components.css`:针对网页组件(如按钮、导航条、表格等)的样式。 4. `layout.css`:...
例如,可能会有通用的reset.css用于消除浏览器默认样式,base.css用于设定全局样式,以及module.css用于特定模块的样式定义。 如果“ftpm_154”是一个目录,那么它可能包含以下内容: 1. CSS文件:如上述所述,...
9. `base.css`:基础样式表,用于设定一些基本的样式规则,如reset CSS,确保浏览器的样式一致性。 10. `about.css`:关于作者或网站介绍页面的样式,可能包括个人照片、简介、联系信息等元素的布局和样式。 在...
共用的base.css包含reset和头部底部样式,每个页面必须引入。 3. CSS书写遵循一定的规则和结构,保持代码整洁,方便维护和扩展。 这些规范旨在确保前端开发的一致性和高效性,同时也为团队协作提供了一套明确的标准...
“base.css”可能包含了基本的全局样式,如reset.css,用于清除浏览器默认样式,保持跨浏览器的一致性。“micons.css”可能是一个自定义图标集的样式表,用于提供与Font Awesome不同的图标选择,比如“icomoon.eot”...
5. **cssreset-context** 和 **cssreset-context-deprecated**:这两个文件类似于cssnormalize,都是用于重置浏览器样式,但可能包含了特定的上下文或已过时的方法。"deprecated"可能意味着其中某些规则已经被更新的...
`base.css`包含reset和头部底部样式,每个页面都需要引入,不得随意修改。 3. ID唯一且用于大模块,Class可重复并用于子级。ID一般由框架文件分配,为JavaScript预留的除外。 4. 为JavaScript预留的钩子,以`js_`...
4. **重置样式(Reset Styles)**:蓝图CSS包含了一个CSS重置,用于消除浏览器默认样式的影响,确保跨浏览器的一致性。这使得开发者可以更专注于自己的设计,而不必担心浏览器差异带来的问题。 5. **工具类...