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

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

推薦する

nginx プロキシ ポート 80 からポート 443 への実装

nginx.conf設定ファイルは次のとおりです。 ユーザー nginx; ワーカープロセス 1; ...

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

メモリ構成が過剰でMySQLが起動できない問題の解決方法

問題の説明MySQL の起動時にエラーが報告されます。エラー ログを確認してください。 [エラー] ...

JavaScript DOMContentLoaded イベントのケーススタディ

DOMContentLoaded イベント文字通り、DOM がロードされた後に実行されます。 win...

HTML タグに類似: strong および em、q、cite、blockquote

XHTML には似た機能を持つタグがいくつかあります。もちろん、ここでの類似性とは意味の類似性を指...

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

MySQL の on と where における左結合設定条件の使用法の違いの分析

この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

Linux に MySQL 8.0.19 をインストールするための詳細な手順と問題解決方法

最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...

Docker ベースのよく使われる CentOS7 イメージの概要

目次1 Dockerをインストールする2 国内ミラーソースの設定3 中国語環境基本版Centos7イ...

Linux ncコマンドの概要

NC のフルネームは Netcat (Network Knife) で、作成者は Hobbit &a...

CSSにスティッキー効果を追加する方法

前面に書かれたfilter:blur と filter:contrast がこのような素晴らしい化学...

...