常用css

2016-04-11  本文已影响27人  Amfishers

下面的这写样式是个人根据浏览器的兼容性以及一些前辈的分享,自己所做项目经验所整理的,不一定适合所有人,但可以给大家作为参考,也是为了大家能够更方便实用。



/*===== 清除默认的margin的属性值 =====*/

body,

blockquote,

dd,

dl,

figure,

form,

p,

pre,

h1,

h2,

h3,

h4,

h5,

h6 {margin:0;}

/*===== 字体控制 =====*/

body,

input,

button,

select,

optgroup,

option,

textarea,

pre {font-family: Arial, 'Microsoft YaHei', 'sans-serif';}

/*===== 统一设置列表的margin和padding,以及列表表形式 =====*/

menu,

ul,

ol {list-style:none;margin:0;padding:0;}

/*===== 去除个别浏览器图片底部的几个像素,以及设置图片形式链接无边框 =====*/

img {vertical-align:middle; border:0; }

a img {border:0 none;}

/*=====  设置按钮手势    =====*/

input[type="button"],

input[type="submit"],

input[type="reset"] { cursor:pointer; } /* 设置字体大小,这部分跟前面写在一起,IE6中会无效 */

/*===== 设置表格元素的样式 =====*/

table {border-spacing:0;} /* 合并表格的间隙,去掉单元格之间的间距,如有需要合并单元格为细线表格,可增加 border-collapse:collapse; */

td, th, caption {padding:0;} /* 去除单元格以及caption表头的padding值 */

/*=====  设置a标签链接无虚线框 =====*/

a {behavior:url(common/link.htc);text-decoration: none;}

area {behavior:url(common/link.htc)}

/*===== 手机版本网页a标记虚线框问题 =====*/

a:focus { outline:none; -moz-outline:none; }

/*===== 清除浮动 =====*/

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{*+height:1%;}

.divclear { clear:both;visibility:hidden;line-height:0px; height:0px;font-size:0;}

/*===== 字体样式设置 =====*/

.textAlign{  text-align:Justify;text-justify:inter-ideograph; }/*左右对齐*/

/*===== 左右浮动 =====*/

.floatleft{float:left;}

.floatright{float:right;}

/*===== 最小高度兼容 =====*/

.minheight500{min-height:500px;height:auto !important;height:500px;overflow:visible;}

/*===== 超出宽度设置为省略号 =====*/

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/*===== 取消chrome form表单的聚焦边框 =====*/

input,button,select,textarea{outline:none}

textarea{resize:none}

/*===== 取消textarea右下角可拖动手柄 =====

textarea{ resize:none }*/

/*===== webkit 水平居中 =====*/

.divmiddle{display:-webkit-box;-webkit-box-pack:center; -webkit-box-align: center; }

/*===== placeholder占位符颜色自定义 =====*/

input:-moz-placeholder { color: #369; }

::-webkit-input-placeholder { color:#369; }



上一篇下一篇

猜你喜欢

热点阅读