この記事では、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 の読み取りおよび書き込み操作コード
メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...
この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコード...
Centos8仮想マシンを起動し、上下キーを押して図1のインターフェースの最初の行を選択します。図1...
目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...
2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...
目次成果を達成する利用可能なプラグインの紹介ニーズに応じてプラグインを選択するプラグインのインストー...
Excel は、データ分析に最もよく使用されるツールです。この記事では、MySQL と Excel ...
目次要約する <テンプレート> <div> 要素 <h2>{{メ...
簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...
問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...
ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...
目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...
目次1. 理解2. 使用1. h() パラメータ2. 使い方が簡単3. カウンターケースを実装する4...
目次1. 原因2. デバイス情報3. 準備4. Apacheをインストールする5. gitを設定する...
1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...