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

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

推薦する

フォームアクションとonSubmitの例

まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

エラー 1862 (HY000): パスワードの有効期限が切れています。ログインするには、..... を使用してパスワードを変更する必要があります。

エラーメッセージ:エラー 1862 (HY000): パスワードの有効期限が切れています。ログインす...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

Javascriptの基本ループの詳しい説明

目次サイクルのために入室のためのその間しながら行うループから抜け出す要約するサイクルのためにループは...

JavaScript配列重複排除の詳細な説明

目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...

JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法

目次1. 自己列挙可能なプロパティ2. Object.values()はプロパティ値を返します3. ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

詳細なLinuxインストールチュートリアル

(Win7 システム) VMware 仮想マシンのインストール チュートリアルVMware は仮想マ...

Centos7.x での Nginx のインストール、SSL 設定、一般的なコマンドの詳細な説明

1. インストールyumを使用してインストールする ##yum nginx を自動的にインストールす...

JSONObject の使用方法の詳細な説明

JSONObject は単なるデータ構造であり、JSON 形式のデータ構造 ( key-value構...

Windows サーバー ファイルをローカルにバックアップする方法、Windows サーバー データ バックアップ ソリューション

重要なデータはバックアップする必要があり、リアルタイムでバックアップする必要があります。そうしないと...

入力タイプ=ファイルスタイルを定義する方法

ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ている...