Thực Hành Tạo Form Đăng Nhập Facebook Để Đăng Nhập Thay Tài Khoản

Hôm bữa có một bạn trên Facebook đã hỏi mình về cách tạo form đăng nhập và đăng ký thành viên giống như trên Facebook. Hôm nay mình sẽ bê nguyên xi trang chủ của facebook về và cũng là một bài học hữu ích cho các bạn, có thể học cách sắp xếp cũng như trang trí các field sao cho đẹp mắt và gọn gàng …

Đang xem: Tạo form đăng nhập facebook

Hôm bữa có một bạn trên Facebook đã hỏi mình về cách tạo form đăng nhập và đăng ký thành viên giống như trên Facebook. Hôm nay mình sẽ bê nguyên xi trang chủ của facebook về và cũng là một bài học hữu ích cho các bạn, có thể học cách sắp xếp cũng như trang trí các field sao cho đẹp mắt và gọn gàng bằng CSS3.

*

Xem Demo|download

HTML

Như các bạn đã biết, trên facebook sẽ có 2 phần , 1 cho login và 1 cho đăng ký thành viên, và chúng được khéo léo sắp xếp theo cấu trúc html bên dưới.

Xem thêm: Chuyển File Mpg Thanh Mp4 – download Free Mp4 To Mpg Converter 1

CSS

Và không có gì phải giấu diếm ở đây cả, vì toàn bộ đoạn css bên dưới sẽ giúp các bạn định dạng form theo đúng nguyên bản facebook.

Xem thêm: Cách crack Kaspersky Internet Security 2021 Vĩnh Viễn Có Update

html, body, div, span,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend { background: transparent; border: 0; margin: 0; padding: 0; vertical-align: baseline; font-family:”Helvetica Neue”, Helvetica, Arial, sans-serif;}h2 { font-size: 30px; line-height:38px; font-weight:normal; }.loginbox { background: #FBFCFD; padding: 10px; awidth: 490px; margin: 4% auto 0 auto; position: relative; }.loginboxinner { background: #FBFCFD; padding: 5px; position: relative; border: 1px solid #FBFCFD; -moz-box-shadow: inset 0 1px 0 #FBFCFD; -webkit-box-shadow: inset 0 1px 0 #FBFCFD; box-shadow: inset 0 1px 0 #FBFCFD;}.loginheader { height: 20px; }.loginform { margin: 4px auto; text-align:center; }.loginbox h1 { font-size: 30px; letter-spacing: 1px; color: #555; font-weight: normal; padding-top: 10px; }.loginbox p { margin: 7px 0 5px 0; }.loginbox label { display: block; color: #666; letter-spacing: 1px; font-size: 18px; }.loginbox input.mini { awidth:195px; }.loginbox input { padding: 12px 10px; color: #ccc; font-family: Arial, Helvetica, sans-serif; margin-top: 8px; font-size: 15px; border: 1px solid #ccc; awidth: 420px; outline: none;}.loginbox button { background: #5870A8; background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); padding: 10px 20px; font-size: 18px; border: 1px solid #1D3871; letter-spacing: 1px; color: #fff; awidth: 440px; line-height:30px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; -moz-box-shadow: 1px 1px 3px #1D3871; -webkit-box-shadow: 1px 1px 3px #1D3871; box-shadow: 1px 1px 3px #1D3871; cursor: pointer;}.radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }.radius1 { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }.title { font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; color:#8E989E; line-height:28px; font-weight:normal; text-align:center; font-size:16px; }
media screen and (max-awidth: 430px) { body { font-size: 11px; } button, input, select, textarea { font-size: 11px; } .loginbox { awidth: auto; margin: 10px; } .loginbox input { awidth: 95%; } .loginbox button { awidth: 100%; }}#facebook-Bar { background:#45619D; border-bottom: 1px solid #0053A6; box-shadow: 0 0 2px rgba(0, 0, 0, 0.52); min-awidth: 1000px; awidth: 100%; z-index: 1000;}#facebook-Frame { margin-left:auto; margin-right:auto; max-awidth:1000px; height:70px; display:block;}/*——-LOGO———–*/#logo { float: left; height: 70px; position: relative; awidth: 160px;}#logo a { position: absolute; top: 20px; font-size:23px; font-weight:bold; color:#FFF; text-decoration:none; font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;}/*——-Login———–*/#header-main-right { float: right; height: 68px; position: relative; top:5px;}#header-main-right-nav { padding: 4px 6px 4px 4px; position: absolute; right: 0;}#login_form .inputtext { background-color: #FFFFFF; height:16px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; font-size: 13px; margin: 0; padding: 5px 8px 5px 8px; awidth: 166px; border:1px solid #3A518A;}#login_form .inputtext:hover { border-color: #A0A0A0 #B9B9B9 #B9B9B9; border-image: none; border-style: solid; border-awidth: 1px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;}#login_form table tr td { padding: 0 0 0 5px;}#login_form table tr td label { color: #fff; cursor: pointer; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; padding-left: 1px; text-align: left; vertical-align: middle;}.fbbutton { border:1px solid #1D3871; awidth:94px; background-image:-webkit-linear-gradient(top, #637BAD, #4F67A4); font-size:14px; line-height:25px; font-weight:normal; color:#fff; }Bài viết này chỉ mang tính chất tham khảo, mong là các bạn có thể từ nó mà sáng tạo thêm những mẫu form cho website hoặc blog của mình.

Xem thêm bài viết thuộc chuyên mục: Đăng nhập

Khuyễn Mãi Hot