selector2

<head>
<meta charset=”utf-8″>

<style type=”text/css”>
/*

– fieldset(보더 없애면 안 보인다. border:none), legend (display:none) , h1 (display:none) 은 보이지 않게 처리
; “스크린 리더기”가 보기 가장 좋은 세트
– 인풋의 박스 크기 선 두께 등 네이버 로그인 페이지 참조 꾸미기
– 로그인 상태 유지 이미지로 체크 박스 표시

*/
input[type=”checkbox”] {
display:none;
}
input[type=”checkbox”] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url(f.png) left top no-repeat;
cursor:pointer;
}
input[type=”checkbox”]:checked + label span {
background:url(e.png) top no-repeat;
}

</style>

</head>

<body class=”body_1″>

<h1 class=”h_1″>로그인페이지</h1>

<fieldset class=”fs”>

<div class=”div_1″>
<legend class=”lg”> 회원 로그인 </legend>

<form class=”form_1″ action=”#” methord=”post”>
<label>아이디 <input type=”text” name=”id” id=”id” placeholder=”아이디”></label>

<!– <label>  로 감싸주면 아이디 클릭해도 입력창으로 –>

비밀번호 <input type=”password” name=”pw” id=”pw” placeholder=”로그인”>
<input class=”input_1″ type=”submit” value=””> <input type=”checkbox” name=”auto” id=”auto”>
</div>

<div class=”div_2″>
<input type=”checkbox” id=”c1″ name=”cc”>

<label for=”c1″><span></span>로그인 상태유지</label>
</div>
</form>
</fieldset>

<!– “#” 현재 페이지 –>

<p class=”p_1″><a href=”#”> 회원가입</a> : <a href=”#”> 아이디/비번 찾기</a> </p>

</body>

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.