CSSリセット_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:51:05
オリジナル
1091 人が閲覧しました

1. 注: リセットする場合は、不必要なリセットを避けてください。たとえば、「dt」にはデフォルトのマージンがありません。 「ul」と「ol」には左マージンのみが付きます。 。 。

2. 使用する場合、グローバル フォントが 62.5% に設定されているため、ページはクラス "fz" で div をラップし、ページ フォントを 12px に設定する必要があります

/*reset*/
body, p, dd, dl, form, h1, h2, h3, ul, ol, textarea { margin: 0; }

ul, ol { padding-left: 0 }

td; , th, button, input, select, textarea, iframe { margin: 0; }

body, button, input, select, option, textarea { font-family: "Microsoft YaHei", "Arial"; : #333; フォントサイズ: 62.5%; }

input { ボーダー: なし }

input[type="text"] { text -インデント: 4px; }

ボディ { 背景色: #fff; }

a { カラー: #0074d9; { }

a:visited { }

a:active { }

iframe { border: none; }

table { border-collapse: border-spacing: 0;
/*ブラウザのデフォルト効果を削除*/
input:focus, textarea:focus, select:focus {outline: none}

/*Chrome などのブラウザのテキスト ボックスのデフォルトの光る境界線を削除*/
input::-ms-clear { display: none; }

/*IE10 以降のブラウザでテキスト ボックスの後ろにある小さな十字を削除します*/
textarea {size: none }

/*複数行のテキスト ボックスのテキストエリアのドラッグを無効にします*/

/* -------------------単一 CSS ----------------------- -----*/
/*背景色*/
.bg-white { 背景色: #fff; }

.bg-red { 背景色: #ff4136 }

.bg-grey { 背景色: #dcdcdc }

/*ボーダーカラー名ルール*/
.bde { ボーダー: 1px ソリッド #eee; }

.bbd { ボーダーボトム: 1px ソリッド #ddd; *clear*/
.clb { クリア: 両方; }

.clr { クリア: 右; }

/*cursor*/
.poi { カーソル: ポインター;
.def { カーソル: デフォルト }

/*colors*/
.white { カラー: #fff; }

.orange { カラー: #FF8518; .red { カラー: #FF4136 ; }

.g3 { カラー: #333; }

.dn { ディスプレイ: なし; dib { 表示: インラインブロック ; }

/*float*/
.l { float: 左; }

.r { float: 右 }

/*font-size*/
.fzサイズ: 1.2em; }

.fz ボタン、.fz 入力、.fz 選択、.fz テキストエリア、.fz オプション { font-size: 1em; }

.fz14、input.fz { font-size: 1.15em ; }

.fz18 { font-size: 1.3em; }

.fz24 { font-size: 2em; }

/*font-family*/
.fa { font-family: Arial; fv { font-family: verdana }

.fw { font-family: 'Microsoft Yahei' }

/*font-style*/
.n { font-weight:normal; -太さ: 太字; }

.i { フォントスタイル: イタリック; }

/*高さ*/
.h20 { 高さ: 20px; }

/*文字間隔*/
.lt1 { 文字間隔: 1px; }

/ *line-height*/
.lh40 { line-height: 40px; }

/*margin*/
.ml5 { margin-left: 5px }

.ml10 : 10px; }

.mr5 { margin-right: 5px; }

.mt5 { margin-top: 10px; ; }

.mb5 { margin-bottom: 5px; }

.mb10 { margin-bottom: 10px; }

/*overflow*/
.ovh { オーバーフロー: 自動; }

/*padding */
.p10 { パディング: 10px; }

.pl5 { パディング左: 10px; } : 5px; }

.pr10 { パディング右: 10px; }

.pt10 { パディングトップ: 10px; ; }

.pb10 {padding-bottom: 10px; }

/*position*/
.rel { 位置: 相対; }

/*幅のパーセント値*/
.pctW { 幅: 100% ; }

.pctH { 高さ: 100% }

/*text-align*/
.tc { text-align: center }

.tr { text-align: right; }

.tl { text -align: left; }

/*text-decoration*/
.tdl { text-decoration: 下線; }

.tdn { text-decoration: none; -align*/
.vm { 垂直整列: 中央; }

.vtb { 垂直整列: テキスト下; }

.vt { 垂直整列:トップ; }

.vn { 垂直方向の整列: -2px; }

/*可視性*/
.vh { 可視性: 可視性 }

/*空白* /
.nowrap { ホワイトスペース: nowrap; }

/*white-wrap*/
.bk { ワードラップ: ブレークワード; }

/*width*/
.w100 { width: 100px;

/*z-index */
.zx1 { z-index: 1; }

.zx2 { z-index: 2; }

/*zoom*/
.z { *zoom: 1;
/*---- --------------- CSS を乗算する ------------------------ --*/
/*block 要素を水平方向に中央に配置します*/
.auto { margin-left: auto; margin-right: auto }

/*float をクリアします*/
.fix { *zoom: 1; }

.fix:after { display: table; content: ''; clear: Both; }

/*2 列適応型英文字行折り返し*/
.cell_bk { 表示: テーブル; 幅: 100%; テーブルレイアウト: 固定; ワードラップ: ブレークワード; }

/* 単一行のテキストがドット表示で表示される */
.ell { text-overflow: 省略記号; : nowrap; オーバーフロー: 非表示; }

/*css3 トランジション アニメーション効果*/
.trans { -webkit-transition: すべて 0.3 秒;

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート