戦闘にWebフロントエンドの取得：開発効率のフロントマスターに必要なCSS断片は、

この記事では、我々は通常、CSSフラグメントに使用記録、これらのCSSは私たちがプロジェクトに遭遇した多くの実用的な問題を解決することができます使用し、壁は後で簡単に見つけることのコレクションが見推奨親指を、ひび割れします

クリアフロート

トラブルの我々のコードにもたらすフローティング、おそらく私たちは、私が最も便利と互換性の最良の種類が同じレベルで別のディレクトリを作成することであると思い、このトラブルを避けるために多くの方法を使用しますが、言う必要はありません<div> </ div>が、これは、未使用のコードの数を増加させるであろう。この時点では使用：擬似要素の後に現在のレベルが、その後、親がclearfixクラスに追加することができた場合、フローティング、浮動要素のこの問題を解決すること。

// 清除浮动
.clearfix:after {
  content: "\00A0";
  display: block;
  visibility: hidden;
  width: 0;
  height: 0;
  clear: both;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}
.clearfix {
  zoom: 1;
}

タテセンター

世界ではさまざまな方法で進化の年後、垂直中心数に中心よりも単純なCSSのレベル、垂直方向の中央の要素をできるように、まだありません良い方法は、（長所と短所を持っていますが、破壊的な良好な相溶性を達成できない場合小さなオブジェクト）、以下は、いくつかの一般的な実装されています

絶対配置既知の方法と幅と高さ

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

絶対位置決め幅+高さ+不明を翻訳

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀

フレックスは、簡単に縦に横（幅と高さは不明）を中心とします

display: flex;
align-items: center;
justify-content: center;

テキストの省略記号末尾を追加

テキストの内容は、コンテナの幅を超えて、私たちは省略した内容を表示するようにユーザに促すの効果を達成するために、デフォルトで省略記号を追加したいときに。

固定幅、のための単一のライン表示...

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

幅が固定され、複数の行を表示するための携帯端末でありません

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

製造ぼかしテキスト

私たちが漠然と感じに影響を製造する際に、テキストを与えたいときに、あなたはそうすることができます

color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

実際には、単純なロードアニメーション

我々は非常にシンプルなローディング効果を実現するために来ます

.loading:after {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: "\2026";
  -webkit-animation: ellipsis 2s infinite;
}

// 动画部分
@-webkit-keyframes ellipsis {
  from {
    width: 2px;
  }
  to {
    width: 15px;
  }
}

カスタムテキストスタイルを選択します

選択された部分が濃い青色の背景色を与える際にデフォルトでは、Webページ上のテキストを選択し、我々はそれの選択された部分の独自のカスタムスタイルにしたい場合は、（あなたは自分のマウス試すを拾うことができますか）？

// 注意只能修改这两个属性 字体颜色 选中背景颜色

element::selection {
  color: green;
  background-color: pink;
}
element::-moz-selection {
  color: green;
  background-color: pink;
}

頂点ステッカー効果

時々、私たちはこのような要求を持って、一覧表示ページ、いくつかの新しい項目のリストがありますが追加され、またはより高い熱、効果はhexoデフォルトのブログでフォークのようにストリップステッカーを追加するように求められます同じ効果そのgithubの上の私。

その後、我々は、左端の効果をステップ実行し始めました

HTML

<div class="wrap">
  <div class="ribbon">
    <a href="#">Fork me on GitHub</a>
  </div>
</div>

CSS

/* 外层容器几本设置  */
.wrap {
  width: 160px;
  height: 160px;
  overflow: hidden;
  position: relative;
  background-color: #f3f3f3;
}

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  /* shadom */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
  /* rotate */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  /* position */
  left: -50px;
  top: 40px;
}

.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 5px #444;
}

入力プレースホルダ

我々はセットアップ時間の入力プレースホルダー属性タイプの一部を与える場合には、時々そのデフォルトスタイルを変更する必要があります。

input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}

モバイルエンドクリッカブル要素の場所のデフォルトのボーダー

あなたは正直に言うと、青い枠があるだろうと、要素を定義することができ、リンクやJavascriptをクリックすることにより、クリックしたときに、携帯側のブラウザでは、これは非常にそれを取り除くためにどのように、嫌ですか？

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

ドロップキャップ

ドロップキャップ効果に類似した単語を達成するためには、次のコードを使用することができます

element:first-letter {
  float: left;
  color: green;
  font-size: 30px;
}

小さな三角形

我々は彼らに小さな三角形を必要とする多くの場所では、我々は、三角形の4つの方向について描きます

.triangle {
  /* 基础样式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: green;
}
/*上*/
.triangle.top {
  border-bottom-color: green;
}
/*左*/
.triangle.top {
  border-right-color: green;
}
/*右*/
.triangle.top {
  border-left-color: green;
}

それは、限り、あなたはスタイルの2行を得ることができるよう、向きをすることができ、反対方向のスタイル属性に設定される方向限り、絵画の非常にシンプルだと思いれる小さな三角形を描く見ることができます

マウスのハンドタイプ

通常の状況下で、我々は、マウスのハンドタイプのボディに次の要素を追加したいと思います

• A
• 参加する
• 入力[タイプ= "iamge"]
• 入力[タイプ=「ボタン」]
• ボタン
• ラベル
• 選択する

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
  cursor: pointer;
}

ハイライトシールド効果素子のWebkitモバイルブラウザ

モバイルサイトにアクセスすると、選択した要素の周りにいくつかの灰色のフレームがあるだろうことがわかります、このスタイルシールド、次のコードを使用します

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

ラベル一般的に使用されるブラウザのデフォルトのマージンとパディングを削除します

私は、それらをすべて表示されませんプロジェクトを使用する場合は、あなたがあなた自身の別々のを書くことができますので、事前には、コードは、伝説は、フィールドセットは、BLOCKQUOTE ...他のラベルは、非常に一般的ではありません

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
  margin: 0;
  padding: 0;
}

ユニファイド入力、選択し、テキストエリアの幅

別のブラウザを入力、選択し、テキストエリア、団結は、最も一般的なコンテンツボックスであるために計算異なるボックスモデル幅

input,
select,
textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  /*table 相邻单元格的边框间的距离设置为 0*/
  border-spacing: 0;
  /*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/
  border-collapse: collapse;
}

デフォルトのブラウザ、国境のいくつかの要素を削除します

頭字語、フィールドセットが...他のラベルは非常に一般的ではありません、それはそれらを表示されません。プロジェクトで使用されている場合、あなたは一人で自分自身を書くことができます

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}

input {
  /*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
  text-align: inherit;
}

textarea {
  /*textarea 默认不可以放缩*/
  resize: none;
}

キャンセル要素のアウトラインスタイル

財産の一部として、次の要素は、これらの要素の親要素のこれらの属性の宣言を親スタイルを継承しません

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  outline: none;
}

デフォルトのテキストの装飾のキャンセルハイパーリンク要素

デル、インは、タグをさらに下線まだ非常に良い下線、削除されていません

a {
  text-decoration: none;
}

ol,
ul {
  /*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
  list-style: none;
}

button,
input[type="submit"],
input[type="button"] {
  /*鼠标经过是「小手」形状表示可点击*/
  cursor: pointer;
}

input::-moz-focus-inner {
  /*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/
  padding: 0;
  border: 0;
}

デジタル入力コントロールの一部を解除するには、ブラウザのボタン

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

入力制御プレースホルダーの色の設定＃999

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;
}

template {
  /*由于部分浏览 template 会显示出来，所以要隐*/
  display: none;
}

位置：固定略語

.pf {
  position: fixed;
  /*chrome 内核 浏览器 position: fixed 防止抖动*/
  -webkit-transform: translateZ(0);
}

、中央の要素の中心を原則幅と高さを引いた絶対位置を使用します

.middle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

垂直センタリング要素となるようCSS3比較的配置用い

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

.v-middle {
  position: relative;
  top: 50%;
  -webkit-transform: -webkit-translateY(-50%);
  -moz-transform: -moz-translateY(-50%);
  -o-transform: -o-translateY(-50%);
  transform: translateY(-50%);
}

境界外側の限界幅とボックスモデルの高さの要素計算「BB ==>境界ボックス」

.bb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

「==>テキストオーバーフローの」単一行テキスト表示オーバーフロー省略記号

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

初期のスタイル

各タグの異なるブラウザのデフォルトスタイルは同じではありません、時には私たちは与えられたデフォルトのブラウザのスタイルを使用したくない、我々はreset.cssでデフォルトのスタイルを取り除くことができます

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
textarea {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
code,
kbd,
pre,
samp {
  font-family: couriernew, courier, monospace;
}
small {
  font-size: 12px;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
legend {
  color: #000;
}
fieldset,
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

強制ライン/ラップ/無包装力ません

/* 强制不换行 */
div {
  white-space: nowrap;
}

/* 自动换行 */
div {
  word-wrap: break-word;
  word-break: normal;
}

/* 强制英文单词断行 */
div {
  word-break: break-all;
}

スタイルテーブルの枠線

table {
  border: 1px solid #000;
  padding: 0;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 10px;
}
table td {
  height: 30px;
  border: 1px solid #000;
  background: #fff;
  font-size: 15px;
  padding: 3px 3px 3px 8px;
  color: #000;
  width: 160px;
}

絶対位置とマージン

私たちは事前にミドル要素の長さと幅を知りたいときは、このアプローチを使用することができます。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  width: 160px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -80px; /* 宽度的一半 */
  margin-top: -50px; /* 高度的一半 */
}

絶対位置と変換

あなたは、中心要素可変幅と与えられた時間の高さにしたい場合は、私たちはオフセット要素を変換するために使用することができます。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}

行の高さ

行の高さは、実際に行の高さは、我々は、行の高さのレイアウトを調整するために使用することができます！

しかし、このプログラムは、比較的大きな欠点がありました：コピーは、行の高さが問題になりますし、その後、シングルライン、マルチラインでなければなりません。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  line-height: 200px;
}

テーブルレイアウト

コンテナ要素を表示するように設定されている：表セル：テーブルは、現在の要素の表示を設定します。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

フレックスレイアウト

フレックスフレックスALIGN-アイテムを使用して、垂直および水平方向にコンテンツを正当化中央提供される：我々は、親要素が表示された提供されてもよいです。この方法は、中間要素の幅と高さを制限されません。

同時に、フレックスレイアウトは、テキストが中央になくて、いくつかのAndroid機種でプログラム行の高さの問題を置き換えることができます。

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  background-color: #ccc;
  text-align: center;
}

中央の上下画像

および内側要素の垂直方向と水平方向の中心をさせ、一つの共通の方法は、外側のdivテーブルセルを設定することです。IMGのDIV、参照コードセット6のように、もちろん、方法があります。
次のようにCSSのコードは次のとおりです。

.content {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

次のようにHTMLコードは次のとおりです。

<div class="content">
  <img src="./4.jpg" alt="img" />
</div>

小さなバーの両側タイトル

私たちはしばしば、このような需要のUIは、前にそれを達成するためにどのように、二つの小さなHenggangがあり、両側のタイトルです遭遇しますか？そのようなAプロパティとの国境トップ、テキストの背景色、カバーの中央のこの部分が、テキスト絶対配置の中央に置きます。

今、私たちは、達成するための擬似要素を使用することができます！

<div class="title">标题</div>

title {
  color: #e1767c;
  font-size: 0.3rem;
  position: relative;

  &:before,
  &:after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    border-top: 0.02rem solid #e1767c;
    width: 0.4rem;
  }
  &:before {
    margin-left: -1.2rem;
  }
  &:after {
    margin-left: 1.2rem;
  }
}

ボーダー属性を持つ要素の描画

シンプルなボーダードロー国境をあることに加えて、それはまた、三角形や台形、次の二つが描かれ、星のように、任意のポリゴン描画三角形、台形かもしれ

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>

.triangle1 {
  /*锐角三角形*/
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 100px solid #249ff1;
  border-left: 30px solid transparent;
  border-right: 100px solid transparent;
}
.triangle2 {
  /*直角三角形*/
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 80px solid #ff5b01;
  border-left: 50px solid #ff5b01;
  border-right: 50px solid transparent;
}
.trapezoid {
  /*梯形*/
  width: 0;
  height: 0;
  border-top: none;
  border-right: 80px solid transparent;
  border-bottom: 60px solid #13dbed;
  border-left: 80px solid #13dbed;
}

境界半径を持つ要素を描画します

境界半径は、主に、等、次の2つの単純な図形描画を、ドット形状を描画するために使用される円形、楕円形、長方形の丸みを帯びています。

<div class="circle"></div>
<div class="ellipse"><div></div></div>

.circle,
.ellipse {
  width: 100px;
  height: 100px;
  background: #249ff1;
  border-radius: 50%;
}
.ellipse {
  width: 150px;
  background: #ff9e01;
}

しかし、境界半径プロパティが実際に8つの値に設定することができる、画像は多くの予想外の値を変化させることによって得ることができる8

ボックスシャドウを持つ要素を描きます

意義H-シャドウV-シャドウぼかし拡散色インセット、それぞれの値はで表され：ボックスシャドウ、そのボックス影の完全な宣言のための安価は、ぼかし距離（フェザリングを水平方向と垂直方向オフセット値）は、影の大きさは（またはシャドウ0）のボディサイズと一致するように設定され、ない影を備え影の色場合。3-6以下に対応する、それぞれ、実用的な価値を受け取ることができます。

• 3値：H-シャドウV-シャドウカラー
• 四つの値：H-シャドウV-シャドウぼかし色
• 5つの値：H-影V-影のぼかし広がり色
• 6个值：H-シャドウV-シャドウぼかし拡散色はめ込み

一方、上記の組成物の複数の様々な値によって受け入れボーダーシャドウカンマ区切り値は、この機能により、我々は、マルチフレームのような効果を得ることができます。我々は擬似要素の助けを借りずに単一ラベルを実装するために、このプロパティを使用するには、以下のアイコンを追加するとの目標を表すアイコンを。

<div class="plus"></div>
<div class="target"></div>

.plus {
  width: 30px;
  height: 30px;
  margin-left: 50px; /*由于box-shadow不占空间，常常需要添加margin来校正位置*/
  background: #000;
  box-shadow: 0 -30px 0 red, 0 30px 0 red, -30px 0 0 red, 30px 0 0 red;
}
.target {
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  margin-left: 50px;
  box-shadow: 0 0 0 10px #fff, 0 0 0 20px red, 0 0 0 30px #fff, 0 0 0 40px red;
}

アイコンを描画するためのCSSグラデーションを使用します

CSS3グラデーションプロパティは理論的には、非常に強力である、任意のグラフィックスの特性や使用を引き出すことができ、勾配が勾配によって、長い記事を書くために十分である、以下は一例です

<div class="gradient"></div>

.gradient {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: silver;
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
    linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(
      335deg,
      #b00 23px,
      transparent 23px
    ), linear-gradient(155deg, #d00 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

• カップ

.cup {
  display: inline-block;
  width: 0.9em;
  height: 0.4em;
  border: 0.25em solid;
  border-bottom: 1.1em solid;
  border-radius: 0 0 0.25em 0.25em;
}
cup:before {
  position: absolute;
  right: -0.6em;
  top: 0;
  width: 0.3em;
  height: 0.8em;
  border: 0.25em solid;
  border-left: none;
  border-radius: 0 0.25em 0.25em 0;
  content: "";
}

• 心

.heart {
  display: inline-block;
  margin-top: 1.5em;
  width: 50px;
  height: 50px;
  background: green;
}
.heart:before,
.heart:after {
  position: absolute;
  width: 1em;
  height: 1.6em;
  background: #000;
  border-radius: 50% 50% 0 0;
  content: "";
  bottom: 0;
}
.heart:before {
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  right: 0;
  background: red;
  opacity: 0.5;
  z-index: 5;
}
.:after {
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  left: 0;
  opacity: 0.8;
}

• カメラ

.camera {
  display: inline-block;
  border-style: solid;
  border-width: 0.65em 0.9em;
  border-radius: 0.1em;
}
.camera:before {
  position: absolute;
  top: -0.3em;
  left: -0.3em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  border: 0.1em solid #fff;
  box-shadow: 0 0 0 0.08em, 0 0 0 0.16em #fff;
  content: "";
}
.camera:after {
  position: absolute;
  top: -0.5em;
  left: 0.5em;
  width: 0.2em;
  border-top: 0.125em solid #fff;
  content: "";
}

• 月

.moon {
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  box-shadow: inset -0.4em 0 0;
  border-radius: 2em;
  transform: rotate(20deg);
}

フローティングクラス

従来のフロート浮遊画像浮動リスト

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-li li,/*定义到li父元素或祖先元素上*/ li.float-li {
  float: left;
}
.float-img img,/*定义到img父元素或祖先元素上*/ img.float-li {
  float: left;
}
.float-span span,/*定义到span父元素或祖先元素上*/ span.float-span {
  float: right;
}

背景画像の埋め込みとポジショニング

.bg-img {
  background-image: url("../img/bg.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg01-img {
  background-image: url("../img/bg01.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg02-img {
  background-image: url("../img/bg02.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg03-img {
  background-image: url("../img/bg03.png");
  background-position: center top;
  background-repeat: no-repeat;
}
.bg04-img {
  background-image: url("../img/bg04.png");
  background-position: center top;
  background-repeat: no-repeat;
}

継承されたクラス

.inherit-width {
  width: inherit;
}
.inherit-min-width {
  min-width: inherit;
}
.inherit-height {
  height: inherit;
}
.inherit-min-height {
  min-height: inherit;
}
.inherit-color {
  color: inherit;
}

テキストインデント

.text-indent {
  text-indent: 2rem;
}
/*16px*/
.text-indent-xs {
  text-indent: 1.5rem;
}
/*12px*/
.text-indent-sm {
  text-indent: 1.7rem;
}
/*14px*/
.text-indent-md {
  text-indent: 2rem;
}
/*18px*/
.text-indent-lg {
  text-indent: 2.4rem;
}
/*20px*/

行の高さ

.line-height-xs {
  line-height: 1.3rem;
}
.line-height-sm {
  line-height: 1.5rem;
}
.line-height-md {
  line-height: 1.7rem;
}
.line-height-lg {
  line-height: 2rem;
}

.line-height-25x {
  line-height: 25px;
}
.line-height-30x {
  line-height: 30px;
}

ULインデント

.ul-indent-xs {
  margin-left: 0.5rem;
}
.ul-indent-sm {
  margin-left: 1rem;
}
.ul-indent-md {
  margin-left: 1.5rem;
}
.ul-indent-lg {
  margin-left: 2rem;
}
.ol-list,
.ul-list {
  list-style: disc;
}

切り捨てられたテキスト

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hide {
  display: none;
}

写真、動画仕様

.img-max,
.video-max {
  width: 100%;
  height: auto;
}
/*display显示方式*/
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}
.block {
  display: block;
}

ボーダーのスタイル

.border-xs-black {
  border: 1px solid #000;
}
.border-sm-black {
  border: 2px solid #000;
}
.border-md-black {
  border: 3px solid #000;
}
.border-lg-black {
  border: 5px solid #000;
}

.border-xs-gray {
  border: 1px solid #9c9c9c;
}
.border-sm-gray {
  border: 2px solid #9c9c9c;
}
.border-md-gray {
  border: 3px solid #9c9c9c;
}
.border-lg-gray {
  border: 5px solid #9c9c9c;
}

背景色

.bg-white {
  background: #fff !important;
}
.bg-black {
  background: #1b1c1d !important;
}
.bg-gray {
  background: #767676 !important;
}
.bg-light-gray {
  background: #f8f7f7 !important;
}
.bg-yellow {
  background: #fbbd08 !important;
}
.bg-orange {
  background: #f2711c !important;
}
.bg-red {
  background: #db2828 !important;
}
.bg-olive {
  background: #b5cc18 !important;
}
.bg-green {
  background: #21ba45 !important;
}
.bg-teal {
  background: #00b5ad !important;
}
.bg-darkGreen {
  background: #19a97b !important;
}
.bg-threeGreen {
  background: #097c25 !important;
}
.bg-blue {
  background: #2185d0 !important;
}
.bg-violet {
  background: #6435c9 !important;
}
.bg-purple {
  background: #a333c8 !important;
}
.bg-brown {
  background: #a5673f !important;
}

デフォルトの境界線

hr,
.hr-xs-Silver,
.hr-sm-black,
.hr-sm-Silver,
.hr-xs-gray,
.hr-sm-gray {
  margin: 20px 0;
}
hr {
  border: none;
  border-top: 1px solid #000;
}
.hr-xs-Silver {
  border: none;
  border-top: 1px solid #c0c0c0;
}
.hr-sm-black {
  border: none;
  border-top: 2px solid #000;
}
.hr-sm-Silver {
  border: none;
  border-top: 2px solid #c0c0c0;
}
.hr-xs-gray {
  border: none;
  border-top: 1px solid #767676;
}
.hr-sm-gray {
  border: none;
  border-top: 2px solid #767676;
}

タグマウスホバー効果

.hover-red a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-red:hover {
  color: red;
} /*单独为a标签添加类名*/
.hover-yellow a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-yellow:hover {
  color: #ffd700;
} /*单独为a标签添加类名*/
.hover-green a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-green:hover {
  color: #70aa39;
} /*单独为a标签添加类名*/
.hover-blue a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-blue:hover {
  color: blue;
} /*单独为a标签添加类名*/
.hover-gray a:hover,/*为a标签祖先元素添加类名 默认无智能提醒*/ a.hover-gray:hover {
  color: #9c9c9c;
} /*单独为a标签添加类名*/
.underline a:hover,
a.underline:hover {
  text-decoration: underline;
}

シャドウ効果

.shadow-text-xs {
  text-shadow: 4px 3px 0 #1d9d74, 9px 8px 0 rgba(0, 0, 0, 0.15);
} /*智能兼容ie10以上 暂不考虑*/

.shadow-xs {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=100, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 1px 1px 2px #cccccc; /* for firefox */
  -webkit-box-shadow: 1px 1px 2px #cccccc; /* for safari or chrome */
  box-shadow: 1px 1px 2px #cccccc; /* for opera or ie9 */
}
.shadow-sm {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=120, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 2px 2px 3px #cccccc; /* for firefox */
  -webkit-box-shadow: 2px 2px 3px #cccccc; /* for safari or chrome */
  box-shadow: 2px 2px 3px #cccccc; /* for opera or ie9 */
}
.shadow-md {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 3px 3px 5px #cccccc; /* for firefox */
  -webkit-box-shadow: 3px 3px 5px #cccccc; /* for safari or chrome */
  box-shadow: 3px 3px 5px #cccccc; /* for opera or ie9 */
}
.shadow-lg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc')"; /* For IE 8 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=150, Color='#cccccc'); /* For IE 5.5 - 7 */
  -moz-box-shadow: 5px 5px 8px #cccccc; /* for firefox */
  -webkit-box-shadow: 5px 5px 8px #cccccc; /* for safari or chrome */
  box-shadow: 5px 5px 8px #cccccc; /* for opera or ie9 */
}

丸みを帯びました

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.border-radius-xs {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.border-radius-sm {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-md {
  -webkit-border-radius: 7px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.border-radius-lg {
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

記事やノートはあなたにインスピレーションやヘルプのヒントを取ることができれば、あなたの賞賛やコレクションを意味しないでください、あなたは私のモチベーションの最大でなければなりません