HTML で点線の境界線を設定する方法

HTML で点線の境界線を設定する方法

CSSスタイルとHTMLタグ要素を使用する

さまざまな HTML タグに点線の境界線を追加するために、よく使用されるタグをいくつか選択して、点線の境界線効果を揃えて設定します。

1. HTMLでよく使われるタグ

pタグ

スパン

ウル・リ

テーブル tr td

2. CSSプロパティワードの使用例

国境

幅

身長

3. CSSで点線を実装する際のポイント

border は境界線属性です。オブジェクトの境界線効果を実現したい場合は、境界線の幅、境界線の色、境界線のスタイル (実線または点線) を設定する必要があります。

border:1px dashed #F00 境界線スタイルの幅を 1px、点線に設定し、点線は赤になります。

4. 例の説明

上記のラベルには同じ幅、高さ、境界線効果を設定しました。

5. HTMLコードを完成させます。

  1.  <!DOCTYPE html> <html>
  2.  <head> <meta charset="utf-8" />
  3.  <title>html 境界線の点線のデモンストレーション www.pcss5.com</title> <style>
  4.  .bor{border:1px dashed #F00;width:300px;height:60px;margin-top:10px} span{display:block}/*css コメント: span でブロックを形成する*/
  5.  </スタイル> </ヘッド>
  6.  <body> <p class="bor">p ボックス</p>
  7.  <span class="bor">スパンボックス</span> <ul class="bor">
  8.  <li>ul li リスト</li> <li>ul li リスト</li>
  9.  </ul> <テーブルクラス="bor">
  10.  <tr> <td>表</td>
  11.  <td>表2</td> </tr>
  12.  <tr> <td>データ</td>
  13.  <td>データ 2</td> </tr>
  14.  </表> </本文>
  15.  </html>

上記の例では、同じ境界線の破線を含め、HTML 内の異なるタグに同じスタイルを設定しています。

6. ブラウザ効果のスクリーンショット

HTML のさまざまなタグに境界線の破線効果を設定するスクリーンショット

<<:  Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)

>>:  別の種類の「キャンセル」ボタン

推薦する

CSS3 カスタムスクロールバースタイル::webkit-scrollbar サンプルコード詳細説明

Windows のデフォルトのスクロール バー スタイルは見苦しく、プロジェクト内でスクロール バー...

Javascript と Vue を組み合わせて、あらゆる迷路画像の自動パス検索を実現します。

目次序文2次元配列、一方向基本インターフェースのマッピング幅優先、包括的検索マップ編集経路探索アルゴ...

Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法

目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...

表には表示したい境界コードが表示されます

テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...

JavaScriptの知識ポイントの詳しい説明

目次1. JavaScriptの基礎2. 基本的なJavaScript構文3. JavaScript...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

Docker クリーニングキラー/Docker オーバーレイ ファイルがディスク領域を大量に占有する

[インターネット上の移行ファイルをすべて見ると、信頼性が低く、症状のみを治療し、根本的な原因を治療し...

CSSを使用してすべての子要素を選択する方法の詳細な説明

CSS を使用してすべての子要素を再帰的に選択するにはどうすればよいですか?以下の記事では、CSS ...

JavaScript の寄生的構成継承についての簡単な説明

コンポジション継承組み合わせ継承は、疑似古典的継承とも呼ばれます。これは、昨日説明したプロトタイプ ...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

Mac でソースコードから MySQL 5.7.17 をコンパイルしてインストールするチュートリアル

1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

ビジュアルデザイナーの成長の3つの段階のまとめ

この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...

DockerコンテナでLNMPをコンパイルする例

目次1. プロジェクトの説明2. Nginxイメージの作成3. MySQLイメージの作成4. PHP...

VMware 仮想マシンのインストール Linux システムのグラフィック チュートリアル

この記事では、LinuxシステムのVMwareインストールの具体的な手順を参考までに紹介します。具体...