[경동몰 홈페이지 실전 6] 검색창 만들기
그림 1
HTML:
<div class="search">
<input type="text" name="" id="" value=" "/>
<button> </button>
</div>css 코드:
.search { width: 538px; height: 35px; background: pink; /* */ float: left; margin-top: 25px; } 1
.search input{ float: left; /* ， */ width: 450px; height: 32px; /* */ border: 2px solid #B61D1D; padding-left: 4px; /* */ color: #666; font: 14px/32px "microsoft yahei"; } 2
.search button{ float: left; width: 80px; height: 36px; background-color: #B61D1D; font: 16px/36px "microsoft yahei"; color: #fff; cursor: pointer; /* */ } 3효과 1: 분홍색 배경 부분은 텍스트 상자와 단추의 아버지 상자입니다.
효과 2:
텍스트 상자에 2px의 테두리가 있기 때문에 흰색에서button의 폭을 측정하면 2px를 줄여야 합니다.
효과 3:
검색창 제작 완료, 아낌없는 가르침을 환영합니다. 감사합니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
