`
nianshi
  • 浏览: 416401 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

网站样式之Base.CSS(已含Reset.Css)

 
阅读更多

@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;}

分享到:
评论

相关推荐

    base.css/css reset

    自己总结的css reset, 参考了雅虎和书本上的. 希望对html开发者有点用.

    WEB标准之CSS 打造自己的reset.css

    在讨论如何打造自己的reset.css时,首先需要理解reset.css的作用。...在此基础上,项目的设计和布局可以通过添加额外的CSS样式文件来完成,从而确保网站的样式既符合设计规范,又能保持良好的浏览器兼容性和用户体验。

    CSS基础代码库NiceUE.zip

    base.css [基础样式库文件,包含了重置与定义以及常用class] reset.css [精简与高效的重置方案,推荐尽可能使用normal.css] normal.css [与reset不同,注重的是各浏览器表现、W3C标准、用户体验以及减小开发难度] ...

    341914057873938清除网页原始样式CSS.zip

    最后是"base.min.css",与"reset.min.css"类似,这是"base.css"的压缩版本,适用于部署到实际网站,可以提高页面加载效率。 在实际开发中,开发者可以选择使用像"normalize.css"这样的现代替代方案,它不仅重置样式...

    编写适合所有项目的通用的reset.css

    此外,基础样式(base.css)可以合并这些文件,为每个项目提供统一的起点。 4. **后续设置** 完成reset.css后,项目特定的设置是必要的。这可能包括但不限于:调整字体家族、大小和行高,定义边距和填充,处理列表...

    base.css:它并不庞大且肿。 没有规范化或重置,只是使现代浏览器运行的一组基本规则

    对于诸如base.css,归一化和重置之类的项目,其共同目标是实现跨浏览器的一致性。 规范化是通过考虑给定元素的标准“外观和行为”并将浏览器固定在行为不同的位置来实现的。 它诞生于reset.css的替代方法,后者只是...

    reset.css引入以及1px边框问题的解决方法

    你可以通过网站如<https://cssreset.com/> 下载`reset.css`文件,这个网站还提供了其他类似`normalize.css`的选择,它们在重置样式的同时,保留了一些基本的可访问性和语义化样式。 二、关于1px边框问题 随着...

    Mac苹果CSS用户登录模板是一款设计效果不错的用户前台后台登录模板下载。.zip

    2. css/ - CSS样式文件夹,包括reset.css、base.css和login.css。 3. js/ - JavaScript脚本文件夹,可能包含login.js用于表单验证和提交逻辑。 4. img/ - 图片资源文件夹,存放登录界面所需的图标和其他图像。 5. ...

    CSS命名规范.doc

    - `base.css`:基础样式,如reset或通用样式。 - `layout.css`:布局相关的样式。 - `themes.css`:主题或配色方案。 - `columns.css`:与列布局相关的样式。 - `font.css`:字体和文字样式。 - `forms.css`:...

    css规范文档

    - CSS文件也使用英文命名,后缀为.css,基础样式使用base.css,首页用index.css,其他页面按模块命名。 - Js文件同样遵循英文命名,后缀为.js,通用脚本为common.js,其他按需命名。 2. **HTML书写规范**: - ...

    网站前端网页源码模板 (1182).zip

    1. `reset.css`:清除浏览器默认样式,确保各浏览器间的一致性。 2. `base.css`:定义基本样式,如字体、颜色、间距等。 3. `components.css`:针对网页组件(如按钮、导航条、表格等)的样式。 4. `layout.css`:...

    css模板2,用于网页开发和w

    例如,可能会有通用的reset.css用于消除浏览器默认样式,base.css用于设定全局样式,以及module.css用于特定模块的样式定义。 如果“ftpm_154”是一个目录,那么它可能包含以下内容: 1. CSS文件:如上述所述,...

    优雅大气帝国cms博客模板是一款简单优雅大气的个人博客模板.rar

    9. `base.css`:基础样式表,用于设定一些基本的样式规则,如reset CSS,确保浏览器的样式一致性。 10. `about.css`:关于作者或网站介绍页面的样式,可能包括个人照片、简介、联系信息等元素的布局和样式。 在...

    WEB前端开发规范文档.docx

    共用的base.css包含reset和头部底部样式,每个页面必须引入。 3. CSS书写遵循一定的规则和结构,保持代码整洁,方便维护和扩展。 这些规范旨在确保前端开发的一致性和高效性,同时也为团队协作提供了一套明确的标准...

    APP开发公司响应式前端模板MY4.zip

    “base.css”可能包含了基本的全局样式,如reset.css,用于清除浏览器默认样式,保持跨浏览器的一致性。“micons.css”可能是一个自定义图标集的样式表,用于提供与Font Awesome不同的图标选择,比如“icomoon.eot”...

    雅虎css标准包

    5. **cssreset-context** 和 **cssreset-context-deprecated**:这两个文件类似于cssnormalize,都是用于重置浏览器样式,但可能包含了特定的上下文或已过时的方法。"deprecated"可能意味着其中某些规则已经被更新的...

    规范定制(网页设计).docx

    `base.css`包含reset和头部底部样式,每个页面都需要引入,不得随意修改。 3. ID唯一且用于大模块,Class可重复并用于子级。ID一般由框架文件分配,为JavaScript预留的除外。 4. 为JavaScript预留的钩子,以`js_`...

    blueprint-css

    4. **重置样式(Reset Styles)**:蓝图CSS包含了一个CSS重置,用于消除浏览器默认样式的影响,确保跨浏览器的一致性。这使得开发者可以更专注于自己的设计,而不必担心浏览器差异带来的问题。 5. **工具类...

Global site tag (gtag.js) - Google Analytics