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を導入する際の問題
推薦する
Portainer を使用して複数の Docker コンテナ環境を管理する方法を説明します。
目次Portainerは複数のDockerコンテナ環境を管理します2. Dockerを管理する2.1...
Linux にソフトウェアをインストールするときにソフトウェア パッケージが存在しない問題を解決する方法
ソフトウェア パッケージが存在しない場合は、インストールされているソフトウェアのソフトウェア ソース...
VUEプロジェクトでXSS攻撃に遭遇した実体験
目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...
WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...
JavaScript Sandboxについての簡単な説明
序文：サンドボックスといえば、私たちの頭には反射的に上の写真が思い浮かび、すぐに興味がわいてくるかも...
iframe に関するいくつかの発見と考察
この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...
モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します
仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...
CSS3はブラウザのスクロールバーのスタイルを変更します
注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...
MySQL は、ユーザーの作成、ユーザーの承認、ユーザー権限の取り消し、ユーザー パスワードの変更、およびユーザーの削除を行います (実用的なヒント)
MySQLはユーザーを作成し、ユーザーの権限を承認および取り消します動作環境: MySQL 5.0...
MySQLチュートリアルDMLデータ操作言語の例の詳細な説明
目次1. データ操作言語 (DML) 2. データを追加する（挿入） 3. 既存のテーブルをコピーし...
Nginx 構成検出サービスのステータスを実装する方法
1. チェックステータスモジュールがインストールされているかどうかを確認します。 [root@loc...
Linux の RPM パッケージでインストールされた xinetd ベースのサービスの管理
目次序文1. xinetdサービスに基づく起動管理（１）Telnetサービスのインストール（２）Te...
MySQLデータを復元する2つの方法
1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...
LeetCode の SQL 実装 (178. スコアランキング)
[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...
スーパーバイザーを使用して nginx + tomcat コンテナを管理する例
必要： docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...