<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML3일차 CSS2.0 응용 및 검색바 만들기</title>
<style>
body{margin:0; padding:0;}
.box{width:100px; height:100px; background-color:orange;
border-radius: 0 90px 50px 0;
}
/* border-radius: 외쪽상단, 오른쪽상단, 오른쪽하단, 왼쪽하단 */
.box2{
width:100px; height:100px; background-color:pink;
border-radius:50px 0 50px 50px;
}
.btn{width:200px; height:30px; background-color:orange;
color:red; border:0px;
}
.mid{width:200px; height:30px; border:0; border-bottom:1px solid black;
}
.search{width:586px; height:57px;
background-image:url("./search.png");
position:relative;
}
.s{width:450px; height:50px; position:absolute; top:3px; left:3px;
border:0px; font-size:16px; font-weight:bold;
outline:none; text-indent:5px;
}
.quick_menu{width:330px; height:88px; list-style: none;
margin:0; padding:0; border:1px solid black;
}.menu_li{width:110px; float:left;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
<input type="button" value="회원가입" class="btn">
<input type="text" class="mid">
<br><br>
<form name="f" id"f" method="get" action="https://search.naver.com/search.naver">
<div class="search">
<input type="text" name="query" class="s">
</div>
</form>
<br><br>
<ul class="quick_menu">
<li class="menu_li"><a href="https://www.gmarket.co.kr/"><img src=""></li></a>
<li class="menu_li"><a href="http://www.auction.co.kr/"><img src="./logo_quick_02.png"></li></a>
<li class="menu_li"><img src="./logo_quick_03.png"></li>
<li class="menu_li"><img src="./logo_quick_04.png"></li>
<li class="menu_li"><img src="./logo_quick_05.png"></li>
<li class="menu_li"><img src="./logo_quick_06.png"></li>
</ul>
</body>
</html>
728x90
'JAVA > HTML' 카테고리의 다른 글
| [HTML-id6] 사이트 전체 레이아웃 inline-block:span에 주로 사용하는 속성 (0) | 2022.07.16 |
|---|---|
| [HTML-id3]overflow:hidden 이미지 틀안에 숨기기, (0) | 2022.07.16 |
| [HTML-id1]position, static 고정 relative, 자식이 absoulte면 부모는 무조건 relative (0) | 2022.07.16 |
| [HTML] radio 태그 name 있어야함 input type:"text" "password" "checkbos" (0) | 2022.07.13 |
| [HTML] colspan, border 테두리 가로 병합 (0) | 2022.07.13 |
댓글