常用css

下面的這寫樣式是個人根據瀏覽器的兼容性以及一些前輩的分享,自己所做項目經驗所整理的,不一定適合所有人,但可以給大家作為參考,也是為了大家能夠更方便實用。



/*===== 清除默認的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; }



最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容