HTML에서의 위치 사용법 소개-HTML 튜토리얼-php.cn

HTML에서의 위치 사용법 소개

高洛峰

풀어 주다： 2017-03-07 11:29:42

원래의

3082명이 탐색했습니다.

일반적인 태그가 완료할 수 없는 작업을 완료하는 데 사용할 수 있는 HTML의 위치 속성은 누구나 잘 알고 있을 것입니다. 어제 HTML 콘텐츠를 좀 배웠는데, JD.com에 검색창을 만들고 싶어서 드디어 만들었는데, 장바구니 결제를 했더니 거기에 숫자가 표시되어 있었는데 안 만들었어요. 어떻게 추가해야 할지 모르겠습니다. 장바구니와 함께 숫자를 이동하려면 함께 배치해야 합니다. 위치 지정에는 반드시 위치가 필요합니다. 먼저 숫자의 위치를 절대값으로 설정합니다. 왜냐하면 이때 디지털 위치의 상위 태그가 body이기 때문에 상단과 좌측 설정 시 장바구니의 원하는 위치로 설정할 수도 있습니다. 그러나 장바구니의 여백을 변경하면 둘은 불가능합니다. 함께 이동하므로 장바구니의 위치를 설정합니다. 장바구니의 여백을 어떻게 조정하더라도 숫자 위치의 상위 태그가 장바구니가 되도록 합니다. ...

코드는 다음과 같습니다.

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的p*/ 
#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> 
<p id="car"> 
去购物车付款 
<p id="num">0</p> 
</p> 
</body> 
</html>

로그인 후 복사

html에서 위치 사용법에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!