css基础代码库整理
来源:互联网 发布:补水眼霜 知乎 编辑:程序博客网 时间:2024/05/16 06:31
重置-reset.css
由于考虑到重置样式会存在潜在的问题,例如我们在全局将strong变成了一个普通标记,在用户可编辑内容区域的strong就不会反应出效果来,用户就会产生很大的疑惑,为什么在编辑器中加粗了字体儿实际上显示出来的效果却没反应呢?
所以,为了注重各个浏览器表现、w3c标准、用户体验以及减小开发难度,我们推荐使用下面这套重置方案:
@charset "utf-8";html {font-size:62.5%}body {font:12px/1.5 tahoma,arial,simsun,sans-serif; font-size:1.2rem; color:#282828}body,p,blockquote,ul,ol,dl,dd,form,caption {margin:0;padding:0}ul,ol,p {margin-bottom:1em}li ul,li ol {margin:0}ul,ol {padding-left:40px}blockquote {margin:0 40px 1em}table {border-collapse:collapse}img {border:0; vertical-align:middle; -ms-interpolation-mode:bicubic}iframe {border:0; vertical-align:top;}pre {white-space:pre; word-wrap:break-word}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp {font-family:'courier new',monospace}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}input,button,textarea,select,label {margin:0; font-size:100%; vertical-align:middle}textarea {overflow:auto; vertical-align:top; resize:vertical}a {text-decoration:none}a:hover {text-decoration:underline}h1 {font-size:2em;margin:0.67em 0}h2 {font-size:1.5em;margin:0.83em 0}h3 {font-size:1.17em;margin:1em 0}h4 {font-size:1em;margin:1.33em 0}h5,h6 {font-size:0.83em;margin:1.67em 0}
通用css -common.css
common.css是预定义的一些简洁的全局通用class, 按需摘取
/* Layout */.cf {*zoom:1} .cf:after {display:block;content:'\20';height:0;clear:both}.inline-block {display:inline-block; *display:inline; *zoom:1}.hide {display:none !important}.hiding {position:absolute !important; clip:rect(1px 1px 1px 1px); clip:rect(1px,1px,1px,1px);}.invisible {visibility:hidden}.fl {float:left;_display:inline}.fr {float:right;_display:inline}/* Alignment */.tal {text-align:left}.tar {text-align:right}.tac {text-align:center}.vat {vertical-align:top}.vam {vertical-align:middle}/* Font */.fw4 {font-weight:400}.fw7 {font-weight:700}.fs12 {font-size:12px}.fs14 {font-size:14px}.fs18 {font-size:18px}/* Color */.red,.red a {color:#f00}.green,.green a {color:#090}.yellow,.yellow a {color:#f90}.blue,.blue a {color:#06f}.white,.white a {color:#fff}.gray,.gray a {color:#999}.black,.black a {color:#000}
表单- form.css
表单的一些基础样式, 按需摘取
fieldset {border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}legend {padding:0 2px; *margin-left:-7px}input,button,textarea,select,label {margin:0; font:12px tahoma,arial,simsun,sans-serif; vertical-align:middle}button::-moz-focus-inner,input::-moz-focus-inner {border:0; padding:0}textarea {resize:vertical; overflow-y:auto; vertical-align:top}select {height:22px; line-height:18px; padding:2px 0}
html5 -html5.css
基于html5的样式修复, 按需摘取
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block; *display:inline; *zoom:1}audio:not([controls]) {display:none;height:0}[hidden] {display:none}svg:not(:root){overflow:hidden}figure{margin:0}mark{background:#ff0;color:#000}
参考
http://zoomzhao.github.io/code-guide/
https://github.com/niceue/css-shim
https://github.com/chadluo/CSS-Guidelines/blob/master/README.md
http://zh.learnlayout.com/
http://adamschwartz.co/magic-of-css/
http://yisibl.github.io/css-vocabulary/
http://css.doyoe.com/
0 0
- css基础代码库整理
- css例子基础整理
- CSS基础整理
- CSS 基础整理1
- css基础整理2
- CSS基础代码库 Nice UE
- 通用基础CSS代码
- SQL server基础代码整理
- c基础部分代码整理
- CSS知识点整理之基础篇
- css reset重置基础代码
- 整理优化你的CSS代码
- div+css通用兼容性代码整理
- HTML+CSS基础课程之CSS基础代码语法
- CSS控制ul的基础代码
- html/css手机网站基础代码
- css基础篇(黑马+慕课网笔记整理)
- 整理及优化CSS代码的7个原则
- javascript ( 自定义对象--json的用法演示、Map的用法)
- 【Unity Shaders】学习笔记之为创建Half Lambert光照模型(六)
- 数学测试3
- linux 目录/sys 解析
- django 用户注册系统
- css基础代码库整理
- web压力测试之siege
- crontab入门及进阶学习笔记
- Xutils从服务器获取json数据
- xStream完美转换XML、JSON
- 【bzoj3277&&3474】串
- Java 实现TCP网络聊天[服务器-客户端]UI界面
- solr facet查询及solrj 读取facet数据
- Linux目录/bin、/sbin、/usr/bin、/usr/sbin的区别