1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために

2022-01-11 12:23:35

この記事では、さまざまな方法で記事の分割線を達成するためにCSSを整理し、ページ内の分割線は、美化の役割を果たすことができ、その後、ラインスタイルを分割するためのさまざまな方法を達成するためにCSSの使用を見てみましょう。効果は次のとおりです。

方法1:セパレータを実装するタグを1つにする。

htmlを使用します。

<div class="line_01">Little separator single tag implementation</div>

cssを使用します。

.demo_line_01{  
    padding: 0 20px 0;  
    margin: 20px 0;  
    line-height: 1px;  
    border-left: 190px solid #ddd;  
    border-right: 190px solid #ddd;  
    text-align: center;  
}

長所:クリーンなコード

方法2:背景色を使ってセパレータラインを実現する。

htmlを使用しています。

<div class="line_02"><span>Little separator line with color</span></div>

cssを使用します。

.demo_line_02{  
    height: 1px;  
    border-top: 1px solid #ddd;  
    text-align: center;  
}  
.demo_line_02 span{  
    position: relative;  
    top: -8px;  
    background: #fff;  
    padding: 0 20px;  
}

長所:クリーンなコード、適応的な幅

方法3.inline-blockで仕切りを実装する。

htmlを使用しています。

<div class="line_03"><b></b><span>Little dividers inline-block implementation</span><b></b></div>

cssを使用します。

.demo_line_03{  
    width:600px;  
}  
.demo_line_03 b{  
    background: #ddd;  
    margin-top: 4px;  
    display: inline-block;  
    width: 180px;  
    height: 1px;  
    _overflow: hidden;  
    vertical-align: middle;  
}  
.demo_line_03 span{  
    display: inline-block;  
    width: 220px;  
    vertical-align: middle;  
}

方法4.フロートで仕切りを実装する。

htmlを使用します。 

<div class="line_04"><b></b><span>Little dividers float to achieve </span><b></b></div>

cssを使用します。

.demo_line_04{  
    width:600px;  
}  
.demo_line_04{  
    overflow: hidden;  
    _zoom: 1;  
}  
.demo_line_04 b{  
    background: #ddd;  
    margin-top: 8px;  
    float: left;  
    width: 26%;  
    height: 1px;  
    _overflow: hidden;  
}

方法V. 文字を使ってセパレータを実装する。

htmlを使用します。

<div class="line_05">------- ----<span>little separator character to achieve</span>--- ---------</div>

cssを使用します。

.demo_line_05{  
    letter-spacing: -1px;  
    color: #ddd;  
}  
.demo_line_05 span{  
    letter-spacing: 0;  
    color: #222;  
    margin:0 20px;  
}

以上、セパレータの書き方を簡単に説明しましたが、環境によっては、もっと適切な書き方があるかもしれません。 

CSSのこの記事では、記事の分割行のスタイルを要約するさまざまな方法を実現するために導入され、より関連するCSS分割行のスタイルの内容は、以前の記事のスクリプトホームを検索したり、次の関連記事を閲覧してください、私はあなたがよりスクリプトホームをサポートすることを願っています!この記事で紹介されています。