テキストの両側に水平線を描くための CSS のサンプルコード
|
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さんと共有します。具体的な注意事項は次のとおりです。 効果：
<!doctypehtml>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta name="ビューポート"
コンテンツ="幅=デバイス幅、ユーザースケーラブル=いいえ、初期スケール=1.0、最大スケール=1.0、最小スケール=1.0">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>ドキュメント</title>
<スタイル>
。タイトル{
テキスト配置: 中央;
位置: 相対的;
高さ: 50px;
行の高さ: 50px;
幅: 800ピクセル;
マージン: 200px 自動;
}
.title:後、.title:前{
コンテンツ： "";
位置: 絶対;
上位: 50%;
背景: #7a7a7a;
高さ: 1px;
幅: 35%;
}
.title:後{
左: 0;
}
.title:前{
右: 0;
}
</スタイル>
</head>
<本文>
<div class="title">テキストの中央の両側に水平線を表示する効果を実現する CSS</div>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Dockerコンテナイメージからコードを復元する手順
>>: Hタグはウェブページ制作において適切に使用すべきである
推薦する
Lua モジュールを使用して WAF を実装する Nginx の原理の分析
目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...
一般的なMySQLコマンドの概要
mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 ！環境変数にm...
MySQL の最適化: 高品質の SQL 文を書く方法
序文インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質にば...
Linuxルートの初期値を設定する方法の簡単な分析
Ubuntu ではデフォルトで root ログインが許可されていないため、初期の root アカウン...
テキストの展開と折りたたみの効果を実現するJavaScript
リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。必要： 1...
WeChat アプレット学習 WXS 使用方法チュートリアル
wxsとは何ですか? wxs (WeiXin Script) は、小規模プログラム用のスクリプト言語...
ネイティブjsは9マスグリッドのドラッグアンドドロップを実現します
ネイティブJSを使用して9つの正方形のグリッドを記述し、9つのグリッドの位置をドラッグして変更する効...
Nginx インストールの詳細なチュートリアル
1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...
ウェブページ要素の完全な分析
相対的な長さの単位それら説明: 相対的な長さの単位。現在のオブジェクト内のテキストのフォント サイズ...
Javascript における非同期待機の詳細な理解
この記事では、async/await がすべての JavaScript 開発者にとって非同期プログラ...
シンプルな CSS テキストアニメーション効果
成果を達成する 実装コードhtml <div id=コンテナ> いらっしゃいませ <...
Linux centos7 環境での MySQL インストール チュートリアル
Linux centos7 環境に MySQL をインストールする手順の詳細な紹介MySQLをインス...
スクロールバーを非表示にしながらもスクロール効果を維持する純粋な CSS (モバイルと PC)
携帯モバイル ページは Chrome および Safari とのみ互換性があればよいため、カスタム ...
MySQLのINサブクエリによってインデックスが使用できなくなる問題を解決する
今日は、MySQL IN サブクエリの最適化に関するケーススタディを見ました。最初は少し懐疑的でした...
Docker初心者が初めてよく使うコマンドを試してみる練習記録
Docker を正式に使用する前に、まず Docker でよく使用されるコマンドに慣れておきましょう...