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を導入する際の問題
推薦する
WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します
Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...
JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要
まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...
Dockerコンテナでyumを呼び出すときのエラーの解決方法
dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...
Win10 での MySQL 5.7 の詳細なインストールと設定のチュートリアル
1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...
Mysql 5.7.18 MySQL proxies_priv を使用して同様のユーザーグループ管理を実装する
MySQL proxies_priv（シミュレートされたロール）を使用して同様のユーザーグループ管理...
Linux での Docker のインストールと展開の例
以下の記事を読んだ後、プロジェクトをサーバーにデプロイできます。Tomcat、JDK、MySQL な...
CSS 等高レイアウトの一般的な方法
等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...
Dockerはコンテナにポートを動的に公開します
コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...
MySQL MHA のセットアップと切り替えに関するいくつかのエラー ログの概要
1: masterha_check_repl レプリカ セット エラー レプリケートが構成ファイルで...
MySQLクエリが遅い場合の理由と解決策
Python プログラムを書き、Mysql ライブラリを集中的に操作したためです。データ量が多くない...
Flexレイアウトを使用してdiv内のサブ要素を垂直方向に中央揃えする例
1. Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、ボックス モデル...
js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)
現在実装されているのは、基本的な使用方法、クリア可能なボックス、パスワードボックスです。参考リンク:...
vite+vue3+element-plus プロジェクトをビルドする手順
viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...
JS は VUE コンポーネントに基づいて都市リスト効果を実装します
この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...
IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法
問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...