Video: Bài 29: Cách tạo responsive cho web 2025
Với một khuôn khổ HTML tại chỗ, bạn có thể bắt đầu làm việc trên CSS để tạo các kiểu trang trên trang web của bạn. Cách tốt nhất để kết hợp CSS3 là làm theo các bước sau:
-
Bắt đầu với biểu mẫu mẫu trang.
Cần có tất cả thông tin bạn cần.
-
Kiểm tra CSS của bạn trong một trình duyệt.
Bắt đầu bằng việc thực hiện đơn giản CSS để đảm bảo bạn có đúng tên cho tất cả các phần tử trang. Sau đó, sửa đổi mỗi phần tử theo tài liệu thiết kế của bạn, kiểm tra khi bạn đi.
-
Thực hiện CSS từ sơ đồ của bạn.
Bạn nên thực hiện thiết kế bạn đã tạo, không thiết kế trang. (Điều đó đã xảy ra trong quá trình lập sơ đồ.)
-
Lưu thiết kế.
Đối với các dự án nhiều trang, CSS bên ngoài trong một tệp riêng biệt chắc chắn là con đường để đi. Khi bạn làm việc, hãy lưu CSS theo cách thông thường để trình duyệt có thể đọc nó.
-
Kiểm tra và tinh chỉnh.
Mọi thứ không bao giờ hoàn toàn giống như CSS vì các trình duyệt không tuân thủ các tiêu chuẩn như nhau. Bạn cần phải kiểm tra và tinh chỉnh trên các trình duyệt khác. Nếu người dùng với các công nghệ cũ là mối quan tâm, bạn có thể phải sử dụng một trang tính phụ cho các phiên bản cũ của IE. Bạn cũng có thể muốn thực hiện một phiên bản di động.
-
Lặp lại cho các mẫu khác.
Lặp lại quá trình này cho mỗi mẫu khác mà bạn đã xác định trong biểu đồ trang web của bạn.
Kết quả của quá trình này phải là một số tệp tin CSS mà bạn có thể dễ dàng sử dụng lại trên trang của mình.
Đây là mã CSS cho trang chính:
body {background-color: # 000000;} h1 {text-align: center; phông chữ-gia đình: sans-serif; màu trắng; text-shadow: 0 0 10px đen;} #all {background-color: white; đường viền: 1px màu đen; chiều rộng: 800px; margin-top: 2e; lề trái: tự động; lề phải: tự động; min-height: 600px;} #heading {background-color: # A11204; hình nền: url ("cbBackground. png"); màu sắc: #FFFFFF; chiều cao: 100px; kích cỡ phông chữ: 2e; padding-left: 1em; đáy-dưới: 3px màu đen rắn; margin-top: -1. 5em;} #menu {background-image: url ("cbBackground. Png"); màu nền: # A11204; màu sắc: #FFFFFF; phao: trái; chiều rộng: 100px; min-height: 500px;} #menu li {list-style-type: none; margin-left: -2em; lề phải:. 5e; text-align: center;} #menu a {color: #FFFFFF; hiển thị: khối; đường viền: # A11204 3px ban đầu; text-decoration: none;} #menu a: hover {border: # A11204 3px inset;}. nội dung {border: 3px đôi # A11204; lề: 1 lần; lề trái: 110px; padding-left: 1em; padding-bottom: 1em; padding-phải: 1em; bán kính biên giới: 5px; hộp bóng: 5px 5px 5px xám;}.nội dung h2 {background-color: # A11204; hình nền: url ("cbBackground. png"); màu sắc: #FFFFFF; text-align: right;} #footer {color: #FFFFFF; màu nền: # 000000; biên giới: 1px rắn # A11204; phao: trái; rõ ràng: cả hai; Chiều rộng: 100%; text-align: center;}
