HTML での位置の使用に関する簡単な紹介
|
昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。 作ったのですが、ショッピング カートのチェックアウト時に、そこに表示される数字を追加する方法がわかりませんでした。 ショッピング カートと一緒に数字を移動したい場合は、一緒に配置する必要があります。 配置には必ず位置が必要です。 まず、数字のある div の位置を absolute に設定して、レイヤー感を出しています。 数字の位置の親タグが body なので、top と left もショッピング カートと一緒に希望の位置に設定できます。 ただし、ショッピング カートの margin を変更すると、2 つが一緒に移動できなくなるため、ショッピング カートの位置を relative に設定して、数字の位置の親タグがショッピング カートになるようにしました。 ショッピング カートの margin をどのように調整しても、数字は一緒に移動してしまいます... コードをコピー コードは次のとおりです。<html> <ヘッド> <title>day03.html</title> <スタイル タイプ="text/css"> /*まず位置divを記述します*/ ＃車{ 幅:150ピクセル;高さ:30ピクセル; 背景: #999999; 色:白;テキスト配置:中央; 行の高さ: 30px;余白: 232px 300px; border:1px 黒一色;position: relative; } #番号{ 幅:20px;高さ:20px;背景:赤; 色:白;テキスト配置:中央; 行の高さ:20px;位置:絶対; 上:-15px;左:25px; } </スタイル> </head> <本文> <div id="車"> ショッピングカートに移動してお支払いください <div id="num">0</div> </div> </本文> </html> |
<<: JavaScript のマクロタスクとマイクロタスクの詳細
>>: さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題
推薦する
不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード
border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive...
Javascriptのクロージャとアプリケーションの詳細な説明
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
MySQL ジョイントテーブルクエリの簡単な例
MySql は結合テーブルクエリを使用しますが、初心者には理解しにくい場合があります。以下の記事では...
MySQLデータベースインデックスの詳細な紹介
目次マインドマップシンプルな理解インデックスモデルの進化二分探索木自己バランス型二分木BツリーB+ ...
Vue 仮想 Dom から実際の Dom への変換
別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...
Vueコンポーネントの基本のまとめ
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
デザイン理論：テキスト表現とユーザビリティ
<br />テキストデザインでは、通常、テキストのレイアウト、つまりテキストをより美しく...
MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)
使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...
Vue における {{}}、v-text、v-html の違いと用途の詳細な説明
{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...
CSS3 回転キューブ問題の詳細な説明
3D座標の概念要素が回転すると、その座標軸も一緒に回転します。注 -y方向の問題立方体を回転させる効...
非常に詳細な基本的なJavaScript構文ルール
目次01 JavaScript（略称：js） js は 3 つの部分に分かれています。 JavaSc...
JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します
プロセス分析の実装（１）繰り返して電話をかけるには？答え: 関数をカプセル化して一度だけ呼び出すコー...
MySQLデータベースでスロークエリログを有効にする方法の詳細な説明
データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...
JavaScript 変数の昇格についての簡単な説明
目次序文1. どのような変数が促進されますか? 2. 可変プロモーションがあるのはなぜですか? （１...
MySQL データを誤って削除した場合の簡単な解決策 (MySQL フラッシュバック ツール)
概要Binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...