今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。

@charset "utf-8";/*!* @名称:base.css* @功能:1、重设浏览器默认样式*       2、设置通用原子类*/
/*防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体*/html{background:white;color:black;
}
/*内外边距通常让各个浏览器样式的表现位置不同*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;
}
/*要注意表单元素并不继承父级 font 的问题*/body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif;
}input,select,textarea{font-size:100%;
}
/*去掉 table cell 的边距并让其边重合*/table{border-collapse:collapse;border-spacing:0;
}
/*ie bug:th 不继承 text-align*/th{text-align:inherit;
}
/*去除默认边框*/fieldset,img{border:none;
}
/*ie6 7 8(q) bug 显示为行内表现*/iframe{display:block;
}
/*去掉 firefox 下此元素的边框*/abbr,acronym{border:none;font-variant:normal;
}
/*一致的 del 样式*/del{text-decoration:line-through;
}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;
}
/*去掉列表前的标识,li 会继承*/ol,ul{list-style:none;
}
/*对齐是排版最重要的因素,别让什么都居中*/caption,th{text-align:left;
}
/*来自yahoo,让标题都自定义,适应多个系统应用*/h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;
}q:before,q:after{content:'';
}
/*统一上标和下标*/sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;
}sup{top:-0.5em;
}sub{bottom:-0.25em;
}
/*让链接在 hover 状态下显示下划线*/a:hover{text-decoration:underline;
}
/*默认不显示下划线,保持页面简洁*/ins,a{text-decoration:none;
}
/*去除 ie6 & ie7 焦点点状线*/a:focus,*:focus{outline:none;
}
/*清除浮动*/.clearfix:before,.clearfix:after{content:"";display:table;
}.clearfix:after{clear:both;overflow:hidden;
}.clearfix{zoom:1; /*for ie6 & ie7*/
}.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;
}
/*设置显示和隐藏,通常用来与 js 配合*/.hide{display:none;
}.block{display:block;
}
/*设置浮动,减少浮动带来的 bug*/.fl,.fr{display:inline;
}.fl{float:left;
}.fr{float:right;
}

【css】我的 css 框架——base.css相关推荐

  1. 前端:CSS/09/行内框架,CSS简介,CSS选择器,组合选择器,CSS注释,CSS尺寸属性,CSS字体属性,CSS文本属性

    内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...

  2. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  3. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...

  4. css动画在线生成,在线制作css动画——cssanimate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能--cssanimate,这个最大的特色就是以图形界面方式 ...

  5. Web前端框架(JavaScript,CSS)、html组件、CSS规范与第三方库

    1.什么是前端框架 前端框架一般指用于简化网页设计的框架,使用广泛的前端开发套件,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件( ...

  6. 您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...

  7. yii引入php文件,Yii2框架中CSS、JS文件引入要领_PHP开发框架教程

    在yii2中,因为yii2版本升级致使了,许多yii2的用法跟yii1有着很大的区分,这几天一直在view层的视图界面徜徉着,碰到什么问题呢? (引荐进修:yii框架) 问题就是搞不清我该怎样去引入C ...

  8. 9 个基于JavaScript 和 CSS 的 Web 图表框架

    jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图, ...

  9. css之去除html标签默认的外边距margin和内边距padding,通用工具类 base.css

    @charset "utf-8";/*!* @名称:base.css* @功能:1.重设浏览器默认样式* 2.设置通用原子类*/ /*防止用户自定义背景颜色对网页的影响,添加让用户 ...

最新文章

  1. 【KVM系列04】KVM的I/O 设备直接分配和SR-IOV
  2. [转]Oracle 服务器名配置
  3. apache应用进阶
  4. linux2.6版及以后内核:支持实时、抢占
  5. 网络爬虫--22.【CrawlSpider实战】实现微信小程序社区爬虫
  6. 熬夜给这个C语言游戏项目找了几个bug
  7. QT每日一练day3:Qt的编译机制
  8. Kali Linux破解WiFi教程
  9. CSS3渐变——gradient
  10. 利用wordpress搭建自己的网站(百度云虚拟主机)
  11. Java使用jfreechart画饼图_JFreeChart饼图
  12. vue项目调用企业微信扫码权限skd,js-sdk
  13. java计算机毕业设计房屋租赁系统源码+数据库+系统+lw文档+部署
  14. 川土微电子 | 超小型封装隔离式半双工485收发器
  15. RabbitMQ在windows10环境下安装步骤
  16. 服务器系统安装优盘启动工具,u盘启动大师在Win10上安装和卸载远程服务器管理工具的方法...
  17. OBS点播电影电视剧添加场景
  18. 语义分割丨PSPNet源码解析「训练阶段」
  19. [CISCN2019 总决赛 Day2 Web1]Easyweb 1
  20. 【热门主题*热舞派对卡通xp主题*】

热门文章

  1. SQL注入的几种实用办法
  2. Golang 垃圾回收剖析
  3. sigaction函数使用实例
  4. [route]Add up route for deb rpm and windows / 为RPM系DEB系和Windows添加路由
  5. scrapy---Logging
  6. cordova插件开发
  7. editor多功能文本框在有些计算机上不能正常加载,解决方法,本人用的是把js调用方法放到body/body后面)...
  8. 《编程之美》读书笔记(十):“链表相交”扩展问题
  9. WEB前端 vue学习二 组件之间的数据传递
  10. java统计词频算法_java实现的统计字符算法示例