[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分割行のスタイルの内容は、以前の記事のスクリプトホームを検索したり、次の関連記事を閲覧してください、私はあなたがよりスクリプトホームをサポートすることを願っています!この記事で紹介されています。
関連
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】CSSのクラスとidの共通命名規則
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[css3]css3は、3つの方法のサンプルコードのテキストの点滅効果を達成するために
-
[css3]CSS3のダイヤモンドパズルは、divの背景画像を回転させない機能だけを実現するために
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[css3]水平方向のプログレスバーの最後にテキストを表示するCSSコード
-
[CSSチュートリアル】CSS疑似要素を使って、連続する複数の要素のスタイルを制御する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】波動効果を生み出すCSSのアイデア
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】cssフレックスレイアウト ロング自動改行サンプルコード
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSレイアウト例】等間隔の四角形で完璧なページレイアウトを実現する方法
-
[css3]CSS3の画像ボーダーを学ぶための記事
-
[css3]css3 use transform to create walking 2D clock.
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る