의견 : 등록 양식은 HTML5+CSS3 레이아웃을 사용하여 구현되며 그 효과는 상당히 좋습니다. 관심있는 프론트 엔드 웹 디자이너가이를 참조 할 수 있습니다. 나는 그것이 당신을 도울 수 있기를 바랍니다
렌더링은 다음과 같습니다.HTML 소스 코드 :
<! doctype html>
<html>
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<link href = "css /style.css" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
</head>
<body>
<div id = 래퍼>
<div id = lbl> </div>
<양식>
<fieldset id = 계정>
<전설> 개인 정보 </범례>
<label for = username> 계정 : </label>
<입력 ID = 사용자 이름 클래스 = 텍스트 상자 유형 = 텍스트 이름 = 사용자 이름 필수 자리 표시 자 = "계정을 작성하십시오" />
<label for = password1> 비밀번호 : </label>
<입력 id = password1 class = textbox type = password1 password1 필수 자리 표시 자 = "비밀번호를 작성하십시오"/>
<label for = password2> 반복 비밀번호 : </label>
<입력 id = password2 class = 텍스트 상자 유형 = 비밀번호 이름 = 암호 2 필수 자리 표시 자 = "비밀번호를 반복하십시오"/>
<label for = 이메일> 이메일 주소 : </label>
<입력 ID = 이메일 클래스 = 텍스트 상자 유형 = 이메일 이름 = 이메일 필수 자리 표시기 = "www.csdn.com" />
</fieldset>
<fieldset id = personal>
<Legend> 기타 정보 </LEGEND>
<label for = 웹 사이트> 개인 URL : </label>
<입력 ID = 웹 사이트 클래스 = 텍스트 상자 유형 = URL 이름 = 웹 사이트 필수 자리 표시기 = "http://www.example.com"/>
<label for = age> age : </label>
<입력 ID = Age Class = 텍스트 상자 유형 = 번호 이름 = 18 세 단계 = 18 단계 = 2 Pattern = "[0-9] {1,3}"자리 표시 자 = "연령 채우기">
<label for = senary> 월급 : </label>
<입력 ID = 급여 클래스 = 텍스트 상자 유형 = 범위 이름 = 연봉 min = 0 max = 50000 step = 500 pattern = "[0-9] {2,}"자리 표시 자 = "월간 급여는 얼마입니까?
<span id = RangeValue> 10000 </span>
<cript>
함수 showvalue (value) {
document.getElementById ( "RangeValue"). innerHtml = value;
}
</스크립트>
<label for = description> 설명 : </label>
<Textarea id = 설명 이름 = 설명 cols = 30 줄 = 5 자리 표시 자 = "여기에 자세한 설명이 있습니다"> </textarea>
</fieldset>
<fieldset id = 확인>
<입력 유형 = 제출 값 = "제출" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
CSS 소스 코드 :
몸{
배경 : URL (bg.jpg) 반복;
Font-Family : arial 좁고, arial, sans-serif;
여백 : 0;
패딩 : 0;
}
헤더, 섹션, 바닥 글 {
디스플레이 : 블록;
}
헤더 {
너비 : 100%;
배경색 : RGB (0, 0, 0);
배경색 : RGBA (0, 0, 0, 0.9);
색상 : #CCC;
패딩 : 15px 0;
글자 스페이스 : 1px;
마진 바닥 : 20px;
위치 : 상대;
}
헤더 H1 {
여백 : 0 50px;
Text-Shadow : 2PX 2PX 2PX #888;
플로트 : 왼쪽;
}
#BackLinks {
플로트 : 오른쪽;
마진 : -10px 20px;
라인 높이 : 25px;
글꼴 중량 : 대담한;
글꼴 크기 : 12px;
텍스트 정렬 : 맞습니다.
}
#BackLinks a {
색상 : #CCC;
텍스트 결정 : 없음;
여백 : 3px 0 0;
디스플레이 : 블록;
}
#BackLinks a : hover {
색상 : #ffff;
}
보행인{
배경색 : RGB (0, 0, 0);
배경색 : RGBA (0, 0, 0, 0.8);
높이 : 25px;
너비 : 100%;
라인 높이 : 25px;
위치 : 상대;
Font-Family : Arial, Helvetica, Sans-Serif;
하단 : 0;
왼쪽 : 0;
색상 :#888;
글꼴 크기 : 11px;
}
바닥 글 span {
왼쪽 패딩 : 20px;
}
바닥 글 a {
색상 :#1fa2e1;
}
#싸개{
너비 : 770px;
여백 : 0 Auto;
텍스트 정렬 : 센터;
}
#wrapper hgroup {
여백 : 20px 0;
Text-Shadow : 1px 1px 1px #ccc;
}
#wrapper h1 {
색상 :#146FA0;
글꼴 크기 : 42px;
여백 : 0;
}
#wrapper h2 {
색상 :#71c1ed;
글꼴 크기 : 27px;
여백 : 0;
}
#lbl {
색상 :#777;
글꼴 크기 : 17px;
글꼴 중량 : 대담한;
Text-Shadow : 1px 1px 0 #fff;
여백 : 10px 0;
}
*:집중하다{
개요 : 없음;
}
레이블, 입력, Textarea, Fieldset {
디스플레이 : 블록;
}
FieldSet#계정, FieldSet#개인 {
너비 : 250px;
패딩 : 0 50px 50px;
여백 : 10px;
플로트 : 왼쪽;
배경 : RGB (244,244,244);
배경 : RGBA (244,244,244,0.7);
-webkit-border-radius : 25px;
-Moz 국경-라디우스 : 25px;
Border-Radius : 25px;
국경 : 3px 더블 #999;
}
FieldSet#확인 {
패딩 탑 : 10px;
Clear : 둘 다;
국경 : 없음;
라인 높이 : 15px;
여백 : 10px 0;
}
FieldSet#레이블 확인, FieldSet#입력 확인 {
디스플레이 : 인라인;
플로트 : 왼쪽;
여백 : 15px 5px 0;
}
전설{
글꼴 크기 : 20px;
글꼴 중량 : 대담한;
글자 스페이스 : 5px;
색상 :#999;
왼쪽 마진 : -20px;
텍스트 정렬 : 왼쪽;
패딩 : 0 10px;
Text-Shadow : 1px 1px 0 #ccc;
}
상표{
글꼴 크기 : 17px;
글꼴 중량 : 대담한;
마진 : 17px 0 7px;
텍스트 정렬 : 왼쪽;
Text-Shadow : 1px 1px 0 #fff;
}
Textarea {
크기 조정 : 둘 다;
최대 width : 230px;
}
input.textbox, textArea {
패딩 : 5px 10px;
-webkit-border-radius : 15px;
-Moz 국경-라디우스 : 15px;
Border-Radius : 15px;
국경 : 1px Solid #ffff;
너비 : 200px;
Text-Shadow : 1px 1px 1px #777;
-moz-box-shadow : 0px 2px 0px #999;
-webkit-box-shadow : 0px 2px 0px #999;
Box-Shadow : 0px 2px 0px #999;
-webkit-transition : 모든 0.5 초의 편의-아웃;
-Moz-transition : 모든 0.5 초의 용이성;
전환 : 모든 0.5 초의 용이성;
배경 : URL (필수 .png) no-Repeat 200px 5px #f0f0ef;
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, (#e3e3e3), (#fffff)까지); / * SAF4+, Chrome */
배경 : -webkit-linear-gradient (상단, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
배경 : -moz-linear-gradient (상단, #e3e3e3, #fffff); / * ff3.6+ */
배경 : -ms-linear-gradient (상단, #e3e3e3, #ffffff); / * IE10 */
배경 : -o-linear-gradient (상단, #e3e3e3, #fffff); / * 오페라 11.10+ */
}
input.textbox : Focus, Textarea : Focus {
-webkit 변환 : 스케일 (1.1);
-Moz 변환 : 스케일 (1.1);
변환 : 스케일 (1.1);
-Moz-Box-Shadow : 5PX 3PX 1PX #CCC;
-webkit-box-shadow : 5px 3px 1px #ccc;
Box-Shadow : 7px 7px 2px #ccc;
Text-Shadow : 1px 1px 3px #777;
}
input.textbox : 필수 {
배경 : URL (필수 .png) no-Repeat 200px 5px #f0f0ef;
배경 : URL (repureat.png) No-Repeat 200px 5px, -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, (#e3e3e3), (#fffff)까지); / * SAF4+, Chrome */
배경 : URL (requeat 200px 5px, -webkit-linear-gradient (상단, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
배경 : url (requeat) no-Repeat 200px 5px, -moz-linear-gradient (상단, #e3e3e3, #fffff); / * ff3.6+ */
배경 : URL (필수 .png) no-Repeat 200px 5px, -ms-linear-gradient (상단, #e3e3e3, #ffffff); / * IE10 */
배경 : url (requeat) no-Repeat 200px 5px, -o-linear-gradient (상단, #e3e3e3, #fffff); / * 오페라 11.10+ */
}
input.textbox : 필수 : 유효한 {
배경 : URL (valid.png) no-Repeat 200px 5px #f0f0ef;
배경 : URL (valid.png) no-Repeat 200px 5px, -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, (#e3e3e3), (#fffff)까지); / * SAF4+, Chrome */
배경 : URL (valid.png) No-Repeat 200px 5px, -webkit-linear-gradient (상단, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
배경 : URL (valid.png) no-Repeat 200px 5px, -moz-linear-gradient (상단, #e3e3e3, #fffff); / * ff3.6+ */
배경 : URL (valid.png) no-Repeat 200px 5px, -ms-linear-gradient (상단, #e3e3e3, #ffffff); / * IE10 */
배경 : URL (valid.png) no-Repeat 200px 5px, -o-linear-gradient (상단, #e3e3e3, #fffff); / * 오페라 11.10+ */
}
input.textbox : focus : invalid, input.textbox : not (: 필수) : invalid {
배경 : URL (invalid.png) no-Repeat 200px 5px #f0f0ef;
배경 : url (invalid.png) no-Repeat 200px 5px, -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, (#e3e3e3), (#fffff)까지); / * SAF4+, Chrome */
배경 : URL (invalid.png) no-Repeat 200px 5px, -webkit-linear-gradient (상단, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
배경 : url (invalid.png) no-Repeat 200px 5px, -moz-linear-gradient (상단, #e3e3e3, #fffff); / * ff3.6+ */
배경 : URL (invalid.png) no-Repeat 200px 5px, -ms-linear-gradient (상단, #e3e3e3, #fffff); / * IE10 */
배경 : url (invalid.png) no-Repeat 200px 5px, -o-linear-gradient (상단, #e3e3e3, #fffff); / * 오페라 11.10+ */
}
입력 [유형 = 제출] {
패딩 : 10px;
마진 : 0 10px! 중요;
너비 : 300px;
}
@Media 화면 및 (-webkit-min-device-pixel-ratio : 0) {
입력 [유형 = 범위] {패딩 : 0;}
}
#RangeValue {
디스플레이 : 블록;
텍스트 정렬 : 맞습니다.
마진-탑 : -25px;
}
입력 ::- webkit-input-placeholder, textArea ::- webkit-input-placeholder {
색상 : #AAA;
글꼴 스타일 : 이탈리아;
Text-Shadow : 1px 1px 0 #fff;
}
입력 :-Moz-Placeholder, Textarea : -Moz-Placeholder {
색상 : #AAA;
글꼴 스타일 : 이탈리아;
Text-Shadow : 1px 1px 0 #fff;
}
.ClearFix {
Clear : 둘 다;
}