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 でデプロイされる一般的なアプリケーション)

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

推薦する

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入：最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

JavaScript ベースのパスワード ボックス検証情報の実装

この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

MySQLクエリ速度を最適化する方法

前の章では、高性能な MySQL に不可欠な、最適化されたデータ型の選択方法とインデックスの効率的な...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します

オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...

Docker ファイルの保存パス、コンテナの起動コマンド操作の取得

コンテナはすでに作成されていますが、その起動パラメータ（データがマウントされる場所）を知る方法 #コ...

Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する

1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...

dockerでredis5.0.3をインストールする方法

1. 公式5.0.3イメージを取得する [root@localhost ~]# docker pul...

Linux の sudo 脆弱性により不正な特権アクセスが発生する可能性がある

Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...

mysqlはタイムゾーン関連の問題を解決します

序文： MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

JSコードコンパイラMonacoの使い方

序文私が必要としているのは、構文の強調表示、関数プロンプト、自動行折り返し、およびコードの折りたたみ...