CSSで記事の区切り線のスタイルを実装するさまざまな方法のまとめ

CSSで記事の区切り線のスタイルを実装するさまざまな方法のまとめ

この記事では、CSS で記事の区切り線を実装するさまざまな方法をまとめています。区切り線はページを美しく見せることができるので、CSS を使用して区切り線のスタイルを実装するさまざまな方法を見てみましょう。効果は以下のとおりです。

方法 1: 単一のラベルを使用して区切り線を実装する:

html:

<div class="line_01">小さな区切り線の単一ラベル実装</div>

css:

.demo_line_01{  
    パディング: 0 20px 0;  
    マージン: 20px 0;  
    行の高さ: 1px;  
    左境界線: 190px 実線 #ddd;  
    右境界線: 190px 実線 #ddd;  
    テキスト配置: 中央;  
}

利点: 簡潔なコード

方法 2: 背景色を使用して区切り線を作成する:

html:

<div class="line_02"><span>色を使って巧みに表現された小さな区切り線</span></div>

css:

.demo_line_02{  
    高さ: 1px;  
    上境界線: 1px 実線 #ddd;  
    テキスト配置: 中央;  
}  
.demo_line_02 スパン{  
    位置: 相対的;  
    上: -8px;  
    背景: #fff;  
    パディング: 0 20px;  
}

利点: 簡潔なコード、適応幅

方法3: 区切り線を実装するためのインラインブロック:

html:

<div class="line_03"><b></b><span>小さな区切り線のインラインブロック実装</span><b></b></div>

css:

.demo_line_03{  
    幅:600ピクセル;  
}  
.demo_line_03 b{  
    背景: #ddd;  
    上マージン: 4px;  
    表示: インラインブロック;  
    幅: 180ピクセル;  
    高さ: 1px;  
    _オーバーフロー:非表示;  
    垂直位置合わせ: 中央;  
}  
.demo_line_03 スパン{  
    表示: インラインブロック;  
    幅: 220ピクセル;  
    垂直位置合わせ: 中央;  
}

方法4: フローティングで区切り線を実現する:

html:

<div class="line_04"><b></b><span>小さな区切り線が浮かび上がり、</span><b></b></div>

css:

.demo_line_04{  
    幅:600ピクセル;  
}  
.demo_line_04{  
    オーバーフロー: 非表示;  
    _ズーム: 1;  
}  
.demo_line_04 b{  
    背景: #ddd;  
    上マージン: 8px;  
    フロート: 左;  
    幅: 26%;  
    高さ: 1px;  
    _オーバーフロー:非表示;  
}

方法 5: 文字を使用して区切り文字を実装する:

html:

<div class="line_05">———————————<span>達成するための小さな区切り文字</span>————————————</div>

css:

.demo_line_05{  
    文字間隔: -1px;  
    色: #ddd;  
}  
.demo_line_05 スパン{  
    文字間隔: 0;  
    色: #222;  
    マージン:0 20px;  
}

利点: コードが簡潔です。上記ではセパレータの書き方を簡単に紹介しました。環境によっては、より適切な書き方があるかもしれません。

以上で、CSS で記事の区切り線スタイルを実装するさまざまな方法についての説明は終了です。CSS 区切り線スタイルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Angular Cookie の読み取りおよび書き込み操作コード

>>:  HTMLボタンを中央に配置する方法

推薦する

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

ミニプログラムカスタムタブバーコンポーネントのカプセル化

この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコード...

CentOS8でルートパスワードを素早く変更する方法

Centos8仮想マシンを起動し、上下キーを押して図1のインターフェースの最初の行を選択します。図1...

DockerにRocketMQをインストールするための実装手順

目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

Vue は PDF.js を統合して PDF プレビューを実装し、透かしを追加する手順を実行します。

目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...

MySQL を使用して Excel でデータ生成を完了する方法

Excel は、データ分析に最もよく使用されるツールです。この記事では、MySQL と Excel ...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

Vue h関数の使い方の詳しい説明

目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...

VMware+centOS 8 で http プロトコルに基づく Git サービスを構築する方法

目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...

Navicateを使用してAlibaba Cloud Server上のMySQLに接続する

1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...