HTML での位置の使用方法の概要-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML での位置の使用方法の概要

php中世界最好的语言

Feb 08, 2018 am 10:01 AM

html position 導入

今回は、HTMLでのpositionの使い方と、HTMLでpositionを使用する際の注意事項についてご紹介します。実際の事例を見てみましょう。

昨日HTMLに関する内容を学んだばかりで、JD.comに検索バーを作るのが待ちきれずにやっと作ったのですが、ショッピングカートで会計をしているときに、に数字が表示されました。追加して、ショッピングカートと一緒に数字を移動したい場合は、位置を指定する必要があります。まず、数字の div の位置を絶対値に設定します。番号の位置の親タグが本文なので、レイヤー感がありますが、上と左を設定する場合は、マージンを変更すればショッピングカートの任意の位置に設定することもできます。ショッピングカートの場合、両者は一緒に移動することはできないので、ショッピングカートのマージンを変更するだけで、番号の位置の親タグがショッピングカートのマージンに関係なく設定されます。ショッピングカートが調整され、数字もそれに合わせて移動します...

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的div*/ 
#car{ 
width:150px;height:30px; 
background: #999999; 
color:white;text-align: center; 
line-height: 30px;margin: 232px 300px; 
border:1px solid black;position: relative; 
} 
#num{ 
width:20px;height:20px;background: red; 
color:white;text-aligh:center; 
line-height:20px;position: absolute; 
top:-15px;left:25px; 
} 
</style> 
</head> 
<body> 
<div id="car"> 
去购物车付款 
<div id="num">0</div> 
</div> 
</body> 
</html>

ログイン後にコピー

この方法をマスターしたら、よりエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事に注目してください。

ボタントリガーを使用して背景色の点滅を実現する方法

HTMLでの複数のクラス属性の定義は無効です

以上がHTML での位置の使用方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。