この特殊効果の元のバージョンは、codepen の hover.css プロジェクトです。とても気に入ったので、ファイルをアップロードするのは面倒なので、CSS を HTML コードに直接組み込みました。コードを保存してブラウザで開くことができます。
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id="title">Hover</title> <style> .container { margin: 0 auto; width: 800px; } .button { margin: .4em; padding: 1em; cursor: pointer; background: #ececec; text-decoration: none; color: #666; display: inline-block; } /* 2D TRANSFORMS */ /* Grow */ .grow { transition-duration: .3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .grow:hover { transform: scale(1.1); } /* Shrink */ .shrink { transition-duration: .3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .shrink:hover { transform: scale(.9); } /* Pulse */ @keyframes pulse { 25% { transform: scale(1.1); } 75% { transform: scale(.9); } } .pulse { } .pulse:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } /* Pulse Grow*/ @keyframes pulse-grow { to { transform: scale(1.1); } } .pulse-grow { -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-grow:hover { animation-name: pulse-grow; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Pulse shrink */ @keyframes pulse-shrink { to { transform: scale(.9); } } .pulse-shrink { -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .pulse-shrink:hover { animation-name: pulse-shrink; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Push */ @keyframes push { 50% { transform: scale(.8); } 100% { transform: scale(1); } } .push { -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .push:hover { animation-name: push; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: 1; } /* Top */ @keyframes top { 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .top { -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .top:hover { animation-name: top; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: 1; } /* Rotate */ .rotate { -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); transition-property: transform; transition-duration: .3s; } .rotate:hover { transform: rotate(5deg); } /* Grow Rotate */ .grow-rotate { transition-property: transform; transition-duration: .3s; } .grow-rotate:hover { transform: rotate(5deg) scale(1.1); } /* Float */ .float { transition-property: transform; transition-duration: .3s; } .float:hover { transform: translateY(-5px); } /* sink */ .sink { transition-property: transform; transition-duration: .3s; } .sink:hover { transform: translateY(5px); } /* hover */ @keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); } } .hover { transition-property: transform; transition-duration: .5s; } .hover:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: .5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Hang */ @keyframes hang { 50% { transform: translateY(3px); } 100% { transform: translateY(6px); } } .hang { transition-duration: .5s; transition-property: transform; } .hang:hover { transform: translateY(6px); animation-name: hang; animation-duration: 1.5s; animation-delay: .5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* skew */ .skew { transition-property: transform; transition-duration: .3s; } .skew:hover { transform: skew(-10deg); } /* skew-forward */ .skew-forward { transition-property: transform; transition-duration: .3s; transform-origin: 0 100%; } .skew-forward:hover { transform: skew(-10deg); } /* Wobble Vertical */ @keyframes wobble-vertical { 16.65% { transform: translateY(8px); } 33.3% { transform: translateY(-6px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); } } .wobble-vertical {} .wobble-vertical:hover { animation-name: wobble-vertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* Wobble Horizontal */ @keyframes wobble-horizontal { 16.65% { transform: translateX(8px); } 33.3% { transform: translateX(-6px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } } .wobble-horizontal {} .wobble-horizontal:hover { animation-name: wobble-horizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* wobble top */ @keyframes wobble-top { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); } } .wobble-top { transform-origin: 0 100%; } .wobble-top:hover { animation-name: wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* wobble bottom */ @keyframes wobble-bottom { 16.65% { transform: skew(-12deg); } 33.3% { transform: skew(10deg); } 49.95% { transform: skew(-6deg); } 66.6% { transform: skew(4deg); } 83.25% { transform: skew(-2deg); } 100% { transform: skew(0); } } .wobble-bottom { transform-origin: 100% 0; } .wobble-bottom:hover { animation-name: wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } /* SHADOW AND GLOW TRANSITIONS */ /* time: .3s; primaryColor: #ececec; secondeColor: #666; shadowColor: rgba(0, 0, 0, .6); */ /* border-fade */ .border-fade { transition-property: box-shadow; transition-duration: .3s; box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); } .border-fade:hover { box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); } /* hollow */ .hollow { transition-property: background; transition-duration: .3s; transform: translateZ(0); box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); } .hollow:hover { background: none; } /* trim */ .trim { position: relative; } .trim:before { content: ''; position: absolute; border: 4px solid white; top: 4px; left: 4px; right: 4px; bottom: 4px; opacity: 0; transition-duration: .3s; transition-property: opacity; } .trim:hover:before { opacity: 1; } /* outline outward */ .outline-outward { position: relative; } .outline-outward:before { content: ''; position: absolute; border: #ececec solid 4px; top: 0; left: 0; right: 0; bottom: 0; transition-property: top right bottom left; transition-duration: .3s; } .outline-outward:hover:before { top: -8px; right: -8px; left: -8px; bottom: -8px; } /* outline inward */ .outline-inward { position: relative; } .outline-inward:before { content: ''; position: absolute; border: #ececec solid 4px; top: -16px; right: -16px; left: -16px; bottom: -16px; opacity: 0; transition-property: top left right bottom; transition-duration: .3s; } .outline-inward:hover:before { top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* round corners */ .round-corners { transition-property: border-radius; transition-duration: .3s; } .round-corners:hover { border-radius: 25px; } /* SHADOW/GROW TRANSITIONS */ /* glow */ .glow { transition-property: box-shadow; transition-duration: .3s; } .glow:hover { box-shadow: 0 0 8px rgba(0, 0, 0, .6); } /* box shadow outset */ .box-shadow-outset { transition-property: box-shadow; transition-duration: .3s; } .box-shadow-outset:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, .6); } /* box-shadow-inset */ .box-shadow-inset { transition-property: box-shadow; transition-duration: .3s; } .box-shadow-inset:hover { box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .6); } /* float shadow */ .float-shadow { position: relative; transition-property: transform; transition-duration: .3s; } .float-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%); transition-property: transform opacity; transition-duration: .3s; } .float-shadow:hover { transform: translateY(-5px); } .float-shadow:hover:before { opacity: 1; transform: translateY(5px); } /* hover shadow */ @keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); } } @keyframes hover-shadow { 0% { transform: translateY(6px); opacity: .4; } 50% { transform: translateY(3px); opacity: 1; } 100% { transform: translateY(6px); opacity: .4; } } .hover-shadow { position: relative; transition-property: transform; transition-duration: .3s; } .hover-shadow:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); transition-duration: .3s; transition-property: transform opacity; } .hover-shadow:hover { transform: translateY(-6px); animation-name: hover; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .hover-shadow:hover:before { opacity: .4; transform: translateY(6px); animation-name: hover-shadow; animation-duration: 1.5s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* shadow radial */ .shadow-radial { position: relative; } .shadow-radial:before, .shadow-radial:after { pointer-events: none; position: absolute; content: ''; left: 0; width: 100%; box-sizing: border-box; background-repeat: no-repeat; height: 5px; opacity: 0; transition-property: opacity; transition-duration: .3s; } .shadow-radial:before { bottom: 100%; background: radial-gradient(ellipse at 50% 150%, #666 0%, rgba(0,0,0,0) 80%); } .shadow-radial:after { top: 100%; background: radial-gradient(ellipse at 50% -50%, #666 0%, rgba(0,0,0,0) 80%); } .shadow-radial:hover:before, .shadow-radial:hover:after { opacity: 1; } /* SPEECH BUBBLES */ /* Bubble Top */ .bubble-top { position: relative; } .bubble-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; left: calc(50% - 10px); top: 0; border-width: 0px 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-property: top; transition-duration: .3s; } .bubble-top:hover:before { top: -10px; } /* Bubble Right */ .bubble-right { position: relative; } .bubble-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: .3s; transition-property: right; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec; } .bubble-right:hover:before { right: -10px; } /* Bubble bottom */ .bubble-bottom { position: relative; } .bubble-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent; left: calc(50% - 10px); bottom: 0; transition-duration: .3s; transition-property: bottom; } .bubble-bottom:hover:before { bottom: -10px; } /* bubble left */ .bubble-left { position: relative; } .bubble-left:before { pointer-events: none; position: absolute; z-index: 1; content: ''; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent; top: calc(50% - 10px); left: 0; transition-property: left; transition-duration: .3s; } .bubble-left:hover:before { left: -10px; } /* Bubble Float Top */ .bubble-flout-top { position: relative; transition-property: transform; transition-duration: .3s; } .bubble-flout-top:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; left: calc(50% - 10px); top: 0; border-width: 0px 10px 10px 10px; border-color: transparent transparent #ececec transparent; transition-property: top; transition-duration: .3s; } .bubble-flout-top:hover { transform: translateY(5px); } .bubble-flout-top:hover:before { top: -10px; } /* Bubble Float Right */ .bubble-float-right { position: relative; transition-property: transform; transition-duration: .3s; } .bubble-float-right:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; transition-duration: .3s; transition-property: right; top: calc(50% - 10px); right: 0; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #ececec; } .bubble-float-right:hover { transform: translateX(-5px); } .bubble-float-right:hover:before { right: -10px; } /* Bubble Float Bottom */ .bubble-float-bottom { position: relative; transition-property: transform; transition-duration: .3s; } .bubble-float-bottom:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; border-width: 10px 10px 0 10px; border-color: #ececec transparent transparent transparent; left: calc(50% - 10px); bottom: 0; transition-duration: .3s; transition-property: bottom; } .bubble-float-bottom:hover { transform: translateY(-5px); } .bubble-float-bottom:hover:before { bottom: -10px; } /* Bubble Float Left */ .bubble-float-left { position: relative; transition-property: transform; transition-duration: .3s; } .bubble-float-left:before { pointer-events: none; position: absolute; z-index: -1; content: ''; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #ececec transparent transparent; top: calc(50% - 10px); left: 0; transition-duration: .3s; transition-property: left; } .bubble-float-left:hover { transform: translateX(5px); } .bubble-float-left:hover:before { left: -10px; } /* Curl Top Left */ .curl-top-left { position: relative; } .curl-top-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; left: 0; background: linear-gradient( 135deg, white 45%, #aaa 50%, #ccc 56%, white 80% ); z-index: 1000; box-shadow: 1px 1px 1px rgba(0, 0, 0, .4); transition-property: width height; transition-duration: .3s; } .curl-top-left:hover:before { width: 15px; height: 15px; } /* w,h = 25px; leftArea : white; curlLineColor : #aaa; curlTransitionColro : #ccc; curlLastColour : white; */ /* Curl Top right */ .curl-top-right { position: relative; } .curl-top-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; top: 0; right: 0; background: linear-gradient( 225deg, white 45%, #aaa 50%, #ccc 56%, white 80% ); z-index: 1000; box-shadow: -1px 1px 1px rgba(0, 0, 0, .4); transition-property: width height; transition-duration: .3s; } .curl-top-right:hover:before { width: 15px; height: 15px; } /* Curl Bottom Right */ .curl-bottom-right { position: relative; } .curl-bottom-right:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; right: 0; background: linear-gradient( 315deg, white 45%, #aaa 50%, #ccc 56%, white 80% ); z-index: 1000; box-shadow: -1px -1px 1px rgba(0, 0, 0, .4); transition-property: width height; transition-duration: .3s; } .curl-bottom-right:hover:before { width: 15px; height: 15px; } /* Curl Bottom Left */ .curl-bottom-left { position: relative; } .curl-bottom-left:before { pointer-events: none; position: absolute; content: ''; height: 0; width: 0; bottom: 0; left: 0; background: linear-gradient( 45deg, white 45%, #aaa 50%, #ccc 56%, white 80% ); z-index: 1000; box-shadow: 1px -1px 1px rgba(0, 0, 0, .4); transition-property: width height; transition-duration: .3s; } .curl-bottom-left:hover:before { width: 15px; height: 15px; } </style> <link href="css/hover.css" rel="stylesheet"> <div class="container"> <h2 id="D-Transforms">2D Transforms</h2> <a href="#" class="button grow">Grow</a> <a href="#" class="button shrink">Shrink</a> <a href="#" class="button pulse">Pulse</a> <a href="#" class="button pulse-grow">Pulse-grow</a> <a href="#" class="button pulse-shrink">Pulse-shrink</a> <a href="#" class="button push">Push</a> <a href="#" class="button top">Top</a> <a href="#" class="button rotate">Rotate</a> <a href="#" class="button grow-rotate">Grow-rotate</a> <a href="#" class="button float">Float</a> <a href="#" class="button sink">Sink</a> <a href="#" class="button hover">Hover</a> <a href="#" class="button hang">Hang</a> <a href="#" class="button skew">Skew</a> <a href="#" class="button skew-forward">Skew-forward</a> <a href="#" class="button wobble-vertical">Wobble-vertical</a> <a href="#" class="button wobble-horizontal">Wobble-horizontal</a> <a href="#" class="button wobble-top">Wobble-top</a> <a href="#" class="button wobble-bottom">Wobble-bottom</a> <br> <h2 id="Border-Transitions">Border Transitions</h2> <a href="#" class="button border-fade">Border-fade</a> <a href="#" class="button hollow">Hollow</a> <a href="#" class="button trim">Trim</a> <a href="#" class="button outline-outward">Outline-outward</a> <a href="#" class="button outline-inward">Outline-inward</a> <a href="#" class="button round-corners">Round-corners</a> <br> <h2 id="Shadow-and-Glow-Transitions">Shadow and Glow Transitions</h2> <a href="#" class="button glow">glow</a> <a href="#" class="button box-shadow-outset">box-shadow-outset</a> <a href="#" class="button box-shadow-inset">box-shadow-inset</a> <a href="#" class="button float-shadow">float-shadow</a> <a href="#" class="button hover-shadow">hover-shadow</a> <a href="#" class="button shadow-radial">shadow-radial</a> <h2 id="Speech-Bubbles">Speech Bubbles</h2> <a href="#" class="button bubble-top">bubble-top</a> <a href="#" class="button bubble-right">bubble-right</a> <a href="#" class="button bubble-bottom">bubble-bottom</a> <a href="#" class="button bubble-left">bubble-left</a> <a href="#" class="button bubble-flout-top">bubble-flout-top</a> <a href="#" class="button bubble-float-right">bubble-float-right</a> <a href="#" class="button bubble-float-bottom">bubble-float-bottom</a> <a href="#" class="button bubble-float-left">bubble-float-left</a> <h2 id="Curls">Curls</h2> <a href="#" class="button curl-top-left">curl-top-left</a> <a href="#" class="button curl-top-right">curl-top-right</a> <a href="#" class="button curl-bottom-right">curl-bottom-right</a> <a href="#" class="button curl-bottom-left">curl-bottom-left</a> </div>
著作権表示: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLに要素またはテキストを集中する方法Aug 21, 2025 pm 02:07 PM要素またはテキストを中心にするには、要素の種類とレイアウトに従ってメソッドを選択する必要があります。マージンを使用します：0AUTOはブロックレベルの要素を水平に中心にしますが、幅を設定します。 justify-content：center and align-Itemsを使用してフレックスレイアウトを使用します。中心：コンテンツの水平および垂直センタリングを実現します。これは、最新のレイアウトに推奨されます。シングルラインテキストの場合、ラインハイイトとテキストアライグを組み合わせることができます。 CSSGRIDの場所 - 項目：センターは、シンプルで完全なセンタリングを実現することもできます。要約すると、FlexBoxは現在最も一般的に使用され、柔軟性があります。
htmlのdelタグで削除されたコンテンツをマークする方法Aug 21, 2025 am 11:07 AMタグを使用して、HTMLで削除されたコンテンツをマークします。デフォルトのStrikethroughスタイルとセマンティック情報を使用して、テキストが削除され、タグと組み合わせて表示および変更されることが多いことを示します。たとえば、Thisisnolongeraccurateの「isnolongeraccurate」は誘惑する必要があります。削除ステータスとして表示されます。このタグは、削除時間（ISO8601形式）を記録するために使用されるDateTimeとCite属性をサポートし、時代遅れのプライシング情報などの参照修正命令ページを引用します。テキストデコレーションと比較：CSSのみを使用するラインスルーは、より良い機能を提供します
HTMLにJavaScriptを含めるためにスクリプトタグを追加する方法。Aug 21, 2025 am 08:16 AMincludejavascriptinanhtmldocument、usethetag、canlinktonextonalfileviathesrcattributeorcontaininincode; forexternalscripts、使用、keeping javascriptsseparateforcleanercode、whirelinescriptsarritsarewrittendirectlywithinert（ "hello！"; "）;
HTMLで非壊れたスペースを作成する方法Aug 21, 2025 am 07:20 AMそれを使用して、HTMLにラインブレークスペースを作成します。これにより、この時点でブラウザがラインを破壊するのを防ぎ、スペースが崩壊しないようにします。 1。ユニットからの数値の分離を防ぐために使用されます（「100kg」など）。 2。名前を無傷に保ちます（「Mr.Smith」など）; 3。タイトルまたはインライン要素に目に見える空間を維持します。必要な場所に直接挿入するだけですが、レイアウトは避けてください。 CSSを使用して間隔を処理することをお勧めし、コンテンツを一貫した保持する必要がある場合にのみ使用することをお勧めします。これは、正確で広くサポートされているアプローチです。
HTMLページにGoogleマップを埋め込む方法Aug 21, 2025 am 07:07 AMgotogooglemaps、findtheLocation、「sharorembedMap」をクリックし、「embedamap」を選択し、copythegeneratediframecode.2.pastetheiframecodeintoyourhtmlfileatthededededededocation、thesrcurlwithyourcopiedlink.3.optionally -customizewidth、
HTMLでインラインCSSを使用してフォントの色を変更する方法Aug 21, 2025 am 06:12 AMインラインCSSを使用してHTMLフォントカラーを変更するには、HTML要素のスタイル属性を使用して、色属性を有効な色値に設定する必要があります。たとえば、テキストを青くすることができ、カラー名、Hexadecimal、RGB、HSL、RGBA/HSLA形式をサポートします。個々の要素のクイックスタイル設定に適していますが、コードメンテナンスを維持するために大規模なプロジェクトでは使いすぎてはいけません。
HTMLとCSSでモーダルウィンドウを作成する方法Aug 21, 2025 am 05:41 AM：ターゲットセレクターを使用して、JavaScriptなしでモーダルウィンドウを作成します。 1.トリガーリンクとモーダルコンテナを含むHTML構造を作成します。リンクをトリガーするHREFは、モーダルボックスのIDを指します。 2。CSSを使用して.modalを設定してデフォルトの表示を非表示にします。 3.クリックしてリンクを閉じるか、URLフラグメントを変更してモーダルボックスを非表示にします。この方法は、シンプルで効果的で、最新のブラウザと互換性があり、シンプルなポップアップシーンに適しています。
HTMLでDL、DT、およびDDを使用して説明リストを作成する方法Aug 21, 2025 am 04:18 AMHTML説明リストを作成するには、DL、DT、およびDD要素を使用する必要があります。ここで、DLはコンテナであり、DTは用語を定義し、DDは対応する説明を提供します。この構造は、用語集、メタデータ、またはFAQおよびその他のコンテンツに適しています。たとえば、正しい使用法は次のとおりです。DLにはDTとDDの1つ以上のグループが含まれています。複数のDTが1つのDDを共有できます。1つのDTは複数のDDに対応し、セマンティクスとアクセシビリティの原則に従い、レイアウトのために回避し、最終的には明確で読みやすく、スクリーンリーダーと互換性のあるものを実現する必要があります。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
森の99泊で4人の子供全員を救助する方法
1 か月前ByDDD
森の99泊で無料のダイヤモンドを入手する方法
1 か月前ByDDD
Windows11 KB5062660 24H2機能付き、オフラインインストーラー用の直接ダウンロードリンク（.MSU）
4週間前ByJack chen
<🎜> Gigantamax Journey Timed Research Questの手順とコード
3週間前ByJack chen
ホットツール
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
