直接贴代码了
<! Doctype html> <html lang = "en"> <head> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = edge"> <meta name = "viewport" content = "width = device-width, pirom href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel = "styleSheet"> <link href = "qikuai.css" rel = "styleSheet"> <Скрипт src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"> <//head -heads> <//head -head> <header> <nav> <div> <div> <div> <a href="javascript:void(0);"> <img src="/images/logo_navbar.png"> </a> </div> </div> </div> </header> <div> <div> <div>登录到起筷</div> <form> <div> <div> <div> <input id="userIdentifier" placeholder="手机号/用户名/邮箱"></input> <span aria-hidden="true"></span> </div> </div> <div> <div> <input id="userIdentifier" placeholder="登录密码"></input> <span aria-hidden="true"></span> </div> </div> <div> <div> <div> <label> <input value="remember-me" type="checkbox"></input> <span>自动登录</span> </label> </div> </div> </div> <div> <a href="javascript:void(0);">注册新用户</a> </div> <div> <div> <button>登 录</button> </div> </div> </div> </form> </div> </div> </body> </html>
CSS 代码 :
.navbar {высота: 108px; Восновная переписка: без повторения; Box-Shadow: 0 0 5px #999; фоновый цвет: #fff; Border-Bottom: 2px Solid #e8e3dd;}. Контейнер {ширина: 1170px; Плава правая: 15px; Лебь набивки: 15px; Право маржи: Авто; Margin-Lefft: Auto;}. Navbar-Header {float: left;} img {vertical-align: middle; Граница: 0;}. Login-Background {founal-image: url (/images/register-background.jpg); Разовый размер: 100% Auto; Заполнение: 50px 0 15%; Высота: 633px;}. Login-panel {foangy-color: #fff; непрозрачность: .95; граница радий: 10px; позиция: относительно; Заполнение: 0 80px 20px; Ширина: 350px;}. login-title {color: #333; шрифт-вес: 300px; размер шрифта: 24px; позиция: абсолютно; Верх: 40px; Слева: 35px;}. Login-panel, .form-group {padding: 50px 0 5px; дисплей: таблица; Полевая левая: Авто; маржи-право: Auto;}. Form-Group {Margin-Bottom: 15px; Ширина: 100%; Плавание: осталось; Лебь набивки: 15px; Право накладки: 15px;}. login-panel .form-group {padding-top: 45px;}. Block input {padding: 11px 0;}. Hast-feedback {adding-right: 0; Положение: относительно;}. Форма-контроль {Цвет: #777; Высота: 37px; Граница: 1PX SOLID #939393; Право накладки: 42,5PX; дисплей: блок; Ширина: 100%; Заполнение: 6px 12px; размер шрифта: 14px; Линия-высота: 1.42857143; фоновый цвет: #fff; Border-Radius: 4px;}. Glyphicon {position: Absolute; Верх: 0; Справа: 0; Z-Index: 2; дисплей: блок; Ширина: 34px; Высота: 34PX; высота линии: 34px; Текст-альбом: Центр; Указатель-эвоги: нет;}. Auto-Login {Padding-left: 0; Право накладки: 0; Текст-альбом: слева; размер шрифта: 12px; Цвет: #777; Вертикальная атака: средняя; Ширина: 50%; float: Left;} метка {Display: inline-block; максимальная ширина: 100%;}. Register-User {Padding-left: 0; Право накладки: 0; Текст-альбом: верно; надоеволок: 10px; Ширина: 50%; float: left;} a {text-decoration: none;}. row {margin-right: -15px; MARGIN-LEFT: -15PX;}. Ширина: 100%; позиция: относительно; Мин-высот: 1px; Плава правая: 15px; Заполнение-лето: 15px;}. Btn {founale: #fa0; Цвет: #fff; дисплей: блок; Ширина: 100%; Заполнение: 10px 16px; размер шрифта: 18px; высота линии: 1.33333; граница-радий: 6px; шрифт-вес: 400; Текст-альбом: Центр; Вертикальный Альга: Средний;}效果图 :
如果大家还想深入学习 , 可以点击这里进行学习 再为大家附 3 个精彩的专题 :
Начальная загрузка 学习教程
Начальная загрузка 实战教程
Начальная загрузка 插件使用教程
以上就是本文的全部内容 , 希望对大家学习 начальная загрузка 有所帮助。