Tìm hiểu cách tạo biểu mẫu đăng nhập mạng xã hội bằng CSS
Biểu mẫu đăng nhập mạng xã hội đáp ứng
Tự mình thử »
Cách tạo một biểu mẫu đăng nhập mạng xã hội
Bước 1] Thêm HTMLSử dụng một
yếu tố để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi. Sau đó, thêm đầu vào hoặc liên kết mạng xã hội cho từng trườngVí dụ
Đăng nhập bằng phương tiện truyền thông xã hội hoặc thủ công
hoặc
Đăng nhập bằng Facebook
Đăng nhập bằng Twitter
Login with Google+
Hoặc đăng nhập thủ công
Đăng ký
Bạn quên mật khẩu?
Bước 2] Thêm CSS
Ví dụ
* {kích thước hộp. hộp viền}
/* tạo kiểu cho vùng chứa */
. vùng chứa {
vị trí. tương đối;
bán kính đường viền. 5px;
màu nền. #f2f2f2;
phần đệm. 20px 0 30px 0;
}
/* đầu vào kiểu và nút liên kết */
đầu vào,
. btn {
chiều rộng. 100%;
phần đệm. đường viền 12px;
. none;
bán kính đường viền. 4px;
lề. 5px 0;
độ mờ. 0. 85;
hiển thị. inline-block;
font-size. 17px;
chiều cao dòng. 20px;
trang trí văn bản. không ai;
}
đầu vào. di chuột,
. btn. di chuột {
độ mờ. 1;
}
/* thêm màu thích hợp vào các nút fb, twitter và google */
. fb {
màu nền. #3B5998;
màu. trắng;
}
.twitter {
màu nền. #55ACEE;
màu. trắng;
}
.google {
màu nền. #dd4b39;
màu. trắng;
}
/* tạo kiểu cho nút gửi */
input[type=submit] {
màu nền. #04AA6D;
màu. màu trắng;
con trỏ. con trỏ;
}
input[type=submit]. hover {
background-color. #45a049;
}
/* Bố cục hai cột */
. col {
float. trái;
chiều rộng. 50%;
lợi nhuận. tự động;
phần đệm. 0 50px;
lề trên. 6px;
}
/* Xóa số float sau các cột */
. hàng ngang. sau {
nội dung. "";
hiển thị. bảng;
xóa. cả hai;
}
/* đường thẳng đứng */
. vl {
vị trí. tuyệt đối;
trái. 50%;
biến đổi. translate[-50%];
đường viền. 2px solid #ddd;
chiều cao. 175px;
}
/* văn bản bên trong đường thẳng đứng */
. vị trí {
bên trong. tuyệt đối;
trên cùng. 50%;
biến đổi. translate[-50%, -50%];
màu nền. #f1f1f1;
đường viền. 1px solid #ccc;
bán kính đường viền. 50%;
phần đệm. 8px 10px;
}
/* ẩn một số văn bản trên màn hình vừa và lớn */
. hide-md-lg {
hiển thị. không;
}
/* vùng chứa dưới cùng */
. vùng chứa dưới cùng {
căn chỉnh văn bản. trung tâm;
màu nền. #666;
bán kính đường viền. 0px 0px 4px 4px;
}
/* Bố cục đáp ứng - khi màn hình rộng dưới 650px, hãy đặt hai cột xếp chồng lên nhau thay vì đặt cạnh nhau */
@media screen và . 650px] {
. col {
chiều rộng. 100%;
lề trên. 0;
}
/* ẩn đường thẳng đứng */
. vl {
hiển thị. none;
}
/* hiển thị văn bản ẩn trên màn hình nhỏ */
. hide-md-lg {
hiển thị. chặn;
căn chỉnh văn bản. trung tâm;
}
}
Mẹo. Đi tới Hướng dẫn Biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML
Mẹo. Truy cập Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu
Tìm hiểu cách tạo thẻ hồ sơ bằng CSS
Giám đốc điều hành & người sáng lập, ví dụ
đại học Harvard
Liên hệ
Tự mình thử »
Bước 1] Thêm HTMLVí dụ
John Doe
Giám đốc điều hành & người sáng lập, ví dụ
đại học Harvard
Liên hệ
Bước 2] Thêm CSS
Ví dụ
.card {
box-shadow. 0 4px 8px 0 rgba[0, 0, 0, 0. 2];
chiều rộng tối đa. 300px;
lề. tự động;
căn chỉnh văn bản. trung tâm;
}
.title {
màu. màu xám;
cỡ chữ. 18px;
}
nút {
đường viền. không;
phác thảo. 0;
hiển thị. inline-block;
đệm. 8px;
màu. màu trắng;
màu nền. #000;
căn chỉnh văn bản. trung tâm;
con trỏ. con trỏ;
chiều rộng. 100%;
cỡ chữ. 18px;
}
a {
trang trí văn bản. không;
cỡ chữ. 22px;
màu. đen;
}
. di chuột, một. di chuột {
độ mờ. 0. 7;
}