Комментарий: Регистрационная форма реализована с использованием макета 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>
<тело>
<div id = warper>
<div id = lbl> </div>
<форма>
<fieldset id = account>
<Легенда> Личная информация </Легенда>
<Метка для = Имя пользователя> Учетная запись: </label>
<input id = username class = textbox type = text name = username требуется Placeholder = "Пожалуйста, заполните свою учетную запись" />
<метка для = пароль1> пароль: </label>
<INPUT ID = Password1 Class = TextBox Type = password name = password1 требуется Placeholder = "Пожалуйста, заполните свой пароль"/>
<Метка для = пароль2> Повторите пароль: </label>
<input id = password2 class = textbox type = password name = password2 require waceholder = "Пожалуйста, повторите пароль"/>
<Метка для = Электронная почта> Адрес электронной почты: </label>
<id Input = email class = textbox type = имя электронной почты = электронная почта требуется Placeholder = "www.csdn.com" />
</fieldset>
<fieldset id = personal>
<Легенда> Другая информация </Легенда>
<Метка для = веб -сайт> Личный URL: </label>
<input id = webse class = textbox type = url name = webse reffice waceholder = "http://www.example.com"/>
<Метка для = возраст> Возраст: </label>
<INPUT ID = AGE CLASS = TEXTBOX TYPE = NOURING NAME = AGE MIN = 18 STEP = 2 PATTER = "[0-9] {1,3}" PlaceHOLDER = "Заполнить возраст">
<Метка для = зарплата> Ежемесячная зарплата: </label>
<input id = class class = textbox type = range name = зарплата min = 0 max = 50000 step = 500 pattern = "[0-9] {2,}" Placeholder = "Что такое ежемесячная зарплата" Значение = 10000 OnChange = "ShowValue (this.value)" />>
<SPAN ID = RANGEVALUE> 10000 </span>
<Скрипт>
функция ShowValue (значение) {
document.getElementbyId ("rangeValue"). innerHtml = value;
}
</script>
<Метка для = Описание> Описание: </label>
<TextAREA ID = Описание Имя = Описание Cols = 30 Rows = 5 Placeholder = "Вот подробное описание"> </textarea>
</fieldset>
<fieldset id = Подтверждение>
<input type = отправить значение = "Отправить" />
<div> </div>
</fieldset>
</form>
</div>
</body>
</html>
исходный код CSS:
тело{
Фон: URL (BG.JPG) повтор;
Семейство шрифта: ариальная узкая, ариальная, безэрифу;
поля: 0;
Заполнение: 0;
}
Заголовок, раздел, нижний колонтитул {
дисплей: блок;
}
заголовок {
Ширина: 100%;
Фоно-цвета: RGB (0, 0, 0);
фоновый цвет: rgba (0, 0, 0, 0,9);
Цвет: #CCC;
Заполнение: 15px 0;
СКАЖИ САМЕТ: 1PX;
маржинальный бат: 20px;
позиция: относительно;
}
Заголовок H1 {
Полевая: 0 50px;
Текстовая тень: 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;
позиция: относительно;
Семейство шрифта: Arial, Helvetica, Sans-Serif;
Внизу: 0;
слева: 0;
Цвет:#888;
размер шрифта: 11px;
}
нижний колонтитул {
Лебь накладки: 20px;
}
нижний колонтитул {
Цвет:#1FA2E1;
}
#wrapper {
Ширина: 770px;
Поле: 0 Авто;
Текст-альбом: Центр;
}
#wrapper hgroup {
Маржа: 20px 0;
Текстовая тень: 1px 1px 1px #ccc;
}
#Wrapper H1 {
Цвет:#146FA0;
размер шрифта: 42px;
поля: 0;
}
#Wrapper H2 {
Цвет:#71C1ED;
размер шрифта: 27px;
поля: 0;
}
#lbl {
Цвет:#777;
размер шрифта: 17px;
шрифт-вес: жирный шрифт;
Текст-тени: 1px 1px 0 #fff;
Полевая: 10px 0;
}
*: фокус {
Схема: нет;
}
Метка, вход, текстовый, Fieldset {
дисплей: блок;
}
Fieldset#account, fieldset#личный {
Ширина: 250px;
Заполнение: 0 50px 50px;
Маржа: 10px;
Плавание: осталось;
Предпосылки: RGB (244 244 244);
Предпосылки: RGBA (244,244,244,0,7);
-Вебкит-грамотный радий: 25px;
-Моз-грамотный радий: 25px;
граница-радий: 25px;
Граница: 3PX Double #999;
}
Fieldset#Подтверждение {
надоеволок: 10px;
ясно: оба;
граница: нет;
высота линии: 15px;
Полевая: 10px 0;
}
Fieldset#Подтвердить метку, Fieldset#Подтвердите вход {
дисплей: inline;
Плавание: осталось;
Маржа: 15px 5px 0;
}
Легенда {
размер шрифта: 20px;
шрифт-вес: жирный шрифт;
СКАЖИ САМЕТ: 5px;
Цвет:#999;
Мяглевая маржа: -20px;
Текст-альбом: слева;
Заполнение: 0 10px;
Текст-тени: 1px 1px 0 #ccc;
}
этикетка{
размер шрифта: 17px;
шрифт-вес: жирный шрифт;
Покрас: 17px 0 7px;
Текст-альбом: слева;
Текст-тени: 1px 1px 0 #fff;
}
Textarea {
Изменение размера: оба;
максимальная ширина: 230px;
}
input.textbox, textarea {
Заполнение: 5px 10px;
-Вебкит-грамотный радиус: 15px;
-Моз-грамотный радий: 15px;
граница-радий: 15px;
Граница: 1px solid #ffff;
Ширина: 200px;
Текстовая тень: 1px 1px 1px #777;
-Мозо-бокс-тэк: 0px 2px 0px #999;
-Webkit-box-shadow: 0px 2px 0px #999;
Box-Shadow: 0px 2px 0px #999;
-Вобкит-трансляция: все 0,5 с легкостью;
-Моз-трансляция: все 0,5 с легкостью;
Переход: все 0,5 с легкостью;
Предпосылки: URL (обязательный.png) без повторного занового 200px 5px #f0f0ef;
Фон: -вккит-градиент (линейный, левый верх, левый нижний, от (#e3e3e3), до (#fffff)); / * Saf4+, chrome */
Фон: -Webkit-Linear-Gradient (top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Фон: -моз-линейр-градиент (вверху, #e3e3e3, #fffff); / * Ff3.6+ */
Фон: -ms-linear-Gradient (top, #e3e3e3, #ffffff); / * IE10 */
Фон: -o-linear-gradient (top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: фокус, Textarea: Focus {
-Вебкит-трансформация: масштаб (1.1);
-Моз-трансформ: масштаб (1.1);
преобразование: масштаб (1.1);
-Моз-бокс-тень: 5px 3px 1px #ccc;
-Webkit-box-shadow: 5px 3px 1px #ccc;
Box-Shadow: 7px 7px 2px #ccc;
Текст-тени: 1px 1px 3px #777;
}
input.textbox: обязательно {
Предпосылки: URL (обязательный.png) без повторного занового 200px 5px #f0f0ef;
Фон: URL (обязательный. PNG) NO-Repeat 200px 5px, -webkit-Gradient (линейный, левый верх, левый нижний, от (#e3e3e3), до (#fffff)); / * Saf4+, chrome */
Предпосылки: URL (обязательный. PNG) NO-Repeat 200px 5px, -webkit-linear-gradient (top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Справочная информация: URL (обязательный. PNG) NO-Repeat 200px 5px, -moz-linear-gradient (top, #e3e3e3, #fffff); / * Ff3.6+ */
Предпосылки: URL (обязательный. PNG) NO-Repeat 200px 5px, -ms-linear-gradient (top, #e3e3e3, #ffffff); / * IE10 */
Справочная информация: URL (обязательный. PNG) NO-Repeat 200px 5px, -o-linear-gradient (top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: требуется: value {
Предпосылки: URL (alluct.png) без повторного перепорачивания 200px 5px #f0f0ef;
Справочная информация: url (advite.png) no-repeat 200px 5px, -webkit-gradient (линейный, левый верх, левый нижний, от (#e3e3e3), до (#fffff)); / * Saf4+, chrome */
Фон: url (advite.png) no-repeat 200px 5px, -webkit-linear-gradient (top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Фон: url (advite.png) no-repeat 200px 5px, -moz-linear-gradient (top, #e3e3e3, #fffff); / * Ff3.6+ */
Фон: url (advite.png) no-repeat 200px 5px, -ms-linear-gradient (top, #e3e3e3, #ffffff); / * IE10 */
Предпосылки: URL (advite.png) NO-Repeat 200px 5px, -o-linear-gradient (top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input.textbox: Focus: Invalid, input.textbox: not (: rekeled): Invalid {
Предпосылки: URL (Invalid.png) без повторного перепорачивания 200px 5px #f0f0ef;
Справочная информация: URL (Invalid.png) без повторного перепорачивания 200px 5px, -webkit-gradient (линейный, левый верх, левый нижний, от (#e3e3e3), до (#fffff)); / * Saf4+, chrome */
Предпосылки: URL (Invalid.png) без повторного перепорачивания 200px 5px, -webkit-linear-gradient (top, #e3e3e3, #fffff); / * Chrome 10+, SAF5.1+ */
Фон: url (Invalid.png) без повторного перепорачивания 200px 5px, -moz-linear-gradient (top, #e3e3e3, #fffff); / * Ff3.6+ */
Фон: url (Invalid.png) без повторного занового 200.px 5px, -ms-linear-gradient (top, #e3e3e3, #fffff); / * IE10 */
Предпосылки: URL (Invalid.png) без повторного перепорачивания 200px 5px, -o-linear-gradient (top, #e3e3e3, #fffff); / * Opera 11.10+ */
}
input [type = отправить] {
Заполнение: 10px;
Покрас: 0 10px! Важно;
Ширина: 300px;
}
@Media Screen и (-Webkit-min-device-pixel-ratio: 0) {
input [type = range] {padding: 0;}
}
#rangeValue {
дисплей: блок;
Текст-альбом: верно;
маржинальная версия: -25px;
}
input ::-webkit-input-placeholder, textarea ::-webkit-input-placeholder {
Цвет: #AAA;
в стиле шрифта: курсив;
Текст-тени: 1px 1px 0 #fff;
}
Ввод: -moz-placeholder, Textarea: -moz-placeholder {
Цвет: #AAA;
в стиле шрифта: курсив;
Текст-тени: 1px 1px 0 #fff;
}
.clearfix {
ясно: оба;
}