自己喜欢用的一个初始化的common.css
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin:0; padding:0; }
body { font-size:12px; color:#666; font-family: Microsoft YaHei,SimSun;background: #f6f6f6;line-height: 2;}
fieldset, img { border:0; }
ol, ul { list-style:none; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
em { font-style:normal; }
input, button, select, textarea { outline:none; }
textarea { resize:none; } //禁用了文本的拖拉,尤其在谷歌下
p{ text-align:justify; text-justify:distribute;text-indent:2em;} //为了使文本段落左右两边对齐
p{word-wrap:break-word}
a {text-decoration:none; }
i{display: inline-block;}
span{display: inline-block;}
/*a:hover { color: #f60; text-decoration:none; }*/
address,cite,code,em,th {font-weight:normal; font-style:normal;}
a{color:inherit;text-decoration:none;display: inline-block;}
/*a:link{color:#009;}*/
/*a:visited{color:#800080;}*/
a:hover,a:active,a:focus{text-decoration:underline;}
table { border-collapse:collapse; border-spacing:0; }
/*应该把自己喜欢的下拉框,表格,之类*/
/*一些自己平时喜欢使用的式样*/
.fl{float: left!important;}
.fr{float: right!important;}
/*1,2,3,5,8,10,15,20,30,50,70,100*/
.ml1{margin-left: 1px}.ml2{margin-left: 2px}.ml3{margin-left: 3px}.ml5{margin-left: 5px}.m8{margin-left: 8px}.ml10{margin-left: 10px}.ml15{margin-left: 15px}.ml20{margin-left: 20px}.ml30{margin-left: 30px}.ml50{margin-left: 50px}.ml70{margin-left: 70px}.ml100{margin-left: 100px}
.mr1{margin-right: 1px}.mr2{margin-right: 2px}.mr3{margin-right: 3px}.mr5{margin-right: 5px}.m8{margin-right: 8px}.mr10{margin-right: 10px}.mr15{margin-right: 15px}.mr20{margin-right: 20px}.mr30{margin-right: 30px}.mr50{margin-right: 50px}.mr70{margin-right: 70px}.mr100{margin-right: 100px}
.mtf1{margin-top: -1px}.mtf2{margin-top: -2px}.mtf3{margin-top: -3px}.mtf5{margin-top: -5px}.mtf7{margin-top: -7px}.mtf10{margin-top: -10px}
.mt1{margin-top: 1px}.mt2{margin-top: 2px}.mt3{margin-top: 3px}.mt5{margin-top: 5px}.m8{margin-top: 8px}.mt10{margin-top: 10px}.mt15{margin-top: 15px}.mt20{margin-top: 20px}.mt30{margin-top: 30px}.mt50{margin-top: 50px}.mt70{margin-top: 70px}.mt100{margin-top: 100px}
.mb1{margin-bottom: 1px!important;}.mb2{margin-bottom: 2px!important;}.mb3{margin-bottom: 3px!important;}.mb5{margin-bottom: 5px!important;}.m8{margin-bottom: 8px!important;}.mb10{margin-bottom: 10px!important;}.mb15{margin-bottom: 15px!important;}.mb20{margin-bottom: 20px!important;}.mb30{margin-bottom: 30px!important;}.mb50{margin-bottom: 50px!important;}.mb70{margin-bottom: 70px!important;}.mb100{margin-bottom: 100px!important;}
.h1{height: 1px!important;}.h2{height: 2px!important;}.h3{height: 3px!important;}.h5{height: 5px!important;}.h8{height: 8px!important;}.h10{height: 10px!important;}.h15{height: 15px!important;}.h20{height: 20px!important;}.h30{height: 30px!important;}.h50{height: 50px!important;}.h70{height: 70px!important;}.h100{height: 100px!important;}
.w1{width: 1px}.w2{width: 2px}.w3{width: 3px}.w5{width: 5px}.m8{width: 8px}.w10{width: 10px}.w15{width: 15px}.w20{width: 20px}.w30{width: 30px}.w50{width: 50px}.w70{width: 70px}.w100{width: 100px}
/*这个属性的时候必须和h1或者其他的h结果*/
.wp3{width: 3%;}.wp5{width: 5%;}.wp7{width: 7%;}.wp10{width: 10%;}.wp15{width: 15%;}.wp20{width: 20%;}.wp25{width: 25%;}.wp30{width: 30%;}.wp40{width: 40%;}.wp50{width: 50%;}.wp60{width: 60%;}.wp100{width: 100%;}
.f12{font-size: 12px;}.f13{font-size: 13px;}.f14{font-size: 14px;}.f15{font-size: 15px;}.f16{font-size: 16px;}.f17{font-size: 17px;}.f18{font-size: 18px;}.f20{font-size: 20px;}
.row{width:100%;}
.test{border: 1px solid red;}
.mauto{margin:0 auto;}
.inlineblock{display: inline-block;}
.clearfix{clear: both;}
.block{display: block;}
/*对于行内样式这个时候就不能show和hide了,这个必须使用removeClass('none')*/
.none{display: none!important;}
/*absolute relative*/
.absolute{position: absolute;}
.relative{position:relative;}
div{
/*text-align: center;*/
/*vertical-align: middle;*/
}
/*normalize.css 一些东西添加进来*/
html {
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
自己喜欢用的一个初始化的common.css的更多相关文章
- STM32 一个初始化EXTI的例子
23 May 2017 » Hardware 注:STM32F407VGT6 with STM32F4 DSP and standard peripherals library v1.8.0 外部中断 ...
- common.css 值得学习的css样式布局
正常的项目当中,应当有一个common.css,就是把一些常用的样式,写入其中. 然后再结合一些特性的css,构造漂亮的页面. 下面欣赏一些海盗商城的common.css. /***样式初始化***/ ...
- kube框架结构-一个小型响应式CSS框架
当你开始初建一个新的项目时,你可能需要一个不太复杂的基础框架,Kube框架应该是你最好的选择.一个独立的CSS文件,帮助你更简单的创建响应式的的布局设计. Kube Framework包括网格.按钮. ...
- css初始化表(normalize.css)
为什么要初始化CSS? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的 ...
- 一个简单实用的css loading图标
摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...
- calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...
- 一个可以自动生成css样式的插件happycss
一直在页面写css, 重复写着样式,发现布局中,特别是h5,大量的样式都是margin,padding,width,height, 而,当我们需要给一个标签写样式的时候,避免内联样式,我们又需要取cl ...
- 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...
- 图片框住一个小视频 谈css padding百分比自适应
今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图. 如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最 ...
随机推荐
- 原生JS去解析地址栏的链接?超好用的解决办法
在做SPA应用程序的时候,往往需要通过地址栏链接的 hash 值来进行业务逻辑: <script type="text/javascript"> //file:///C ...
- Oracle数据类型clob和blob
clob(size)变长 字符型大对象,最大8tb 应用场景:如果varchar2不够用了使用clob blob(size)变长 二进制数据,可以存放图片声音 8tb 但是,实际工作中很少把图片和声音 ...
- mongoexport
导数据 数据同步 mongodb无自增id 数据断点 mongoexport — MongoDB Manual https://docs.mongodb.com/manual/reference/pr ...
- redis cluster 集群畅谈(二)
上一篇http://www.cnblogs.com/qinyujie/p/9029482.html, 主要讲解 redis cluster 集群 搭建,本篇主要讲解实验多master写入.读写分离.实 ...
- 提醒事项 1. 冥想TX 2.下班路上听歌激励自己 3. 不戴眼镜 4. 困难任务拆解
1. 冥想TX 2.下班路上听歌激励自己 3. 不戴眼镜 4. 困难任务拆解
- Key Set---hud5363(快速幂)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5363 #include <iostream> #include <cstdlib&g ...
- JAVA中传递的值还是引用的问题
public static void main(String[] args) { /*byte b[] = new byte[1024*1024*50]; System.out.println(b); ...
- iOS邮箱、手机号等常用验证功能 判断字符串是否int float
手机号验证 /* 手机号码 13[0-9],14[5|7|9],15[0-3],15[5-9],17[0|1|3|5|6|8],18[0-9] 移动:134[0-8],13[5-9],147,15[0 ...
- Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches Slab内存管理机制 SLUB内存管理机制
Linux中的Buffer Cache和Page Cache echo 3 > /proc/sys/vm/drop_caches Slab内存管理机制 SLUB内存管理机制 http://w ...
- js-jquery-SweetAlert2【二】配置与方法
一.配置 Argument Default value Description title null 模态对话框的标题.它可以在参数对象的title参数中设置,也可以在swal()方法的第一个参数 ...