배너영역이 있는 login 페이지 2

말자아이콘 전체게시물 작성일15-03-10 15:42 조회3,193회

본문

Css + Html
혼자 그냥 연습겸 만들어 두는 것을 말자닷컴에도 올려둡니다~~

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="euc-kr">
<title>malza.com 로그인 인트로2</title>
<style type="text/css">
body, h1,h2,h3,#wrap, #loginbox, input,label {margin:0 auto; padding:0; border:0}
body {background-color:#efefef; color:#333; font-size:0.8em; font-family:"돋음",dotum,"굴림",gulim,'Apple SD Gothic Neo',Helvetica,sans-serif}
h1{margin-top:100px; text-align:center; font-size:40px; letter-spacing:-1px}
h2{padding-bottom:30px; text-align:center; font-size:16px; letter-spacing:-1px;}
h3 { padding:10px 0 10px 0; margin-bottom:20px; font-size:14px; letter-spacing:-1px; border-bottom:1px solid #ccc;}
#wrap{width:618px; border:1px solid #ddd; background-color:#fff; padding:15px; height:200px; overflow:hidden}
#loginbox {float:left; width:210px;}
input#uid, input#upass {width:143px; margin:0; height:25px; line-height:25px; background-color:#efefef}
label#uid, label#upass {width:60px; margin:0; padding-top:5px; display:inline-block; vertical-align:top}
.bt{display:inline-block; border:1px solid #ccc}
.bt1 {display:inline-block; width:92px; padding:5px; margin-top:10px; text-align:center; font-size:0.85em; background-color:#efefef}
#loginbox hr {color:#ddd; height:1px; background-color:#ddd}
#login_bt {width:206px; height:35px; background-color:#000; font-weight:bold; color:#fff;}
#ad_banner {float:right; left:240px; height:110px; background-color:#000; color:#fff}

.block {height:10px; margin:0; padding:0; font-size:0;}
a{text-decoration:none; color:#333;}

</style>

</head>
<body>
<h1>LOGIN</h1>
<h2>로그인이 필요한 페이지 입니다.로그인 후, 이용해주시길 바랍니다.</h2>
<div id="wrap">
 <div id="loginbox">
  <h3>무료아이콘 말자닷컴</h3>
  <label for id="uid">아이디</label>
  <input id="uid" type="text" title="아이디">

  <div class="block"></div>

  <label for id="upass">암호</label>
  <input id="upass" type="text" title="암호">

  <div class="block"></div>

  <span class="bt"><input id="login_bt" type="submit" value="Login"></span>


  <span class="bt1"><a href="">회원가입하기</a></span>
  <span class="bt1"><a href="">아이디/암호찾기</a></span>
 </div>

 <div id="ad_banner">
  <img src="390.gif" width="390" height="200" alt="ad광고">
 </div>
</div>
</body>
</html>

 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 2 비추천 0

Css + Html

113개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
Css + Html 목록
번호 제목 아이디 날짜 조회수 추천
113 부트스트랩 부트스트랩 모달 (modal) 클릭시 오른쪽에 생기는 여백 17px없애기 무료아이콘 전체게시물 10-12 233 추천: 1
112 css 에어콘 출판사 메인 콘텐츠 레이아웃 관련링크 무료아이콘 전체게시물 09-13 191 추천: 1
111 css float 중앙 정렬 시키기 무료아이콘 전체게시물 09-11 230 추천: 1
110 css 모바일에서 입력창 input 클릭시 확대되는 거 막기 관련링크 무료아이콘 전체게시물 09-04 191 추천: 1
109 jQuery/java 다양한 사이드바 소스 사이드바 플러그인 관련링크 무료아이콘 전체게시물 09-02 209 추천: 1
108 css 크롬 노란 input 배경 없애기 무료아이콘 전체게시물 08-27 272 추천: 1
107 css input에 입력폼에 글자 미리 넣어두기 무료아이콘 전체게시물 08-25 146 추천: 1
106 css 마진 여백 사용시 %넓이 깨지는 경우와 width100%밀림 깨짐 해결하기 무료아이콘 전체게시물 08-17 563 추천: 1
105 etc 브라우저 별 CSS 핵 관련링크 무료아이콘 전체게시물 08-09 188 추천: 1
104 css 목록(리스트)형식의 css에 텍스트 블릿 사용하기 무료아이콘 전체게시물 08-08 143 추천: 1
103 css 넓이 100%에 25%씩 4개값을 줬는데 줄바꿈 되는 경우 ㅠㅠ 댓글1 무료아이콘 전체게시물 07-17 276 추천: 1
102 부트스트랩 동영상 슬라이드 댓글2 관련링크 무료아이콘 전체게시물 01-20 1765 추천: 16
101 부트스트랩 다중,멀티 스타일시트 우선순위 무료아이콘 전체게시물 01-19 2127 추천: 15
100 부트스트랩 부트스트랩 nav 높이를 높였을 때 다른 div 와 겹치는 현상 무료아이콘 전체게시물 01-17 1361 추천: 14
99 부트스트랩 부트스트랩에 swiper로 네이버 터치 스크롤링 메뉴 만들기 인기글관련링크 무료아이콘 전체게시물 01-17 5108 추천: 15
게시물 검색