Từ những kiến thức đã học trong 21 phần trước của loạt bài Học CSS cơ bản, có thể bạn đã biết qua một số kỹ thuật cơ bản nhưng quan trọng nhất trong việc sử dụng CSS để thiết kế giao diện cho website. Vậy tại sao chúng ta không sử dụng tất cả để thực hành xây dựng một giao diện đơn giản? Bởi vì bạn cần biết rằng Học CSS là một quá trình không bao giờ kết thúcbạn có thể biết tất cả các thuộc tính và cách sử dụng nó, nhưng điều đó không có nghĩa là bạn tự tin rằng mình có thể tạo giao diện trước khi tự mình tạo.
Mặc dù giao diện tôi sẽ hướng dẫn bạn làm ở đây chỉ dừng lại ở mức độ đơn giản, nhưng hãy tin tôi vì chỉ với bấy nhiêu đó thôi, bạn sẽ có thêm kinh nghiệm, từ đó có thể tự học ở các lĩnh vực khác nhau. các tài nguyên khác trên internet.
![[Học CSS] Thực hành tạo layout đơn giản [NEW]](https://thachpham.com/wp-content/uploads/2015/04/hoc-css-basic-layout.png "[Học CSS] Thực hành tạo một bố cục đơn giản 15")
Contents
Tài nguyên bắt đầu
Trước khi bạn bắt đầu làm theo các hướng dẫn này, hãy tải xuống một số tài nguyên cần thiết bên dưới, nó bao gồm 4 hình ảnh và tệp normalize.css để đặt lại CSS.
Tải xuống tài nguyên dành cho người mới bắt đầu
Bắt đầu
Bây giờ làm ơn tạo một thư mục riêng và sao chép tệp normalize.css và thư mục img đi vào. Sau đó, tạo thêm tệp index.html (tệp trang web) và style.css (chứa CSS của trang web).
Tạo các thư mục cần thiết
Bây giờ hãy mở tệp index.html Hãy tiếp tục và bắt đầu viết HTML cho trang web của bạn.
Việc đầu tiên bạn cần viết là viết các thẻ đầu tiên của trang web bằng HTML, khai báo loại tệp, thẻ <html>cái túi <head> và ghép nối <body>.
[html]
[/html]
Thêm thẻ khai báo thông tin
Bây giờ chúng ta sẽ làm từ trên xuống dưới, đầu tiên chúng ta sẽ khai báo các thông tin về tài liệu trang web này như tiêu đề, mô tả và quan trọng nhất là đính kèm hai file style.css và normalize.css để nó đọc. CSS trong đó.
Như chúng ta đã tìm hiểu ở phần đầu, chúng ta sẽ có các thẻ sau để khai báo thông tin cho tài liệu HTML. <head>.
[html highlight=”2-8″]
[/html]
Tạo các khu vực trong trang web
Bây giờ điều quan trọng nhất là bạn phải ước lượng bố cục của trang web như thế nào để tiến hành tạo các thẻ <div> tương ứng với từng bố cục, và phải nắm rõ và tính toán xem có nên đưa thẻ không <div> Thẻ nào thuận tiện nhất cho việc viết CSS.
Bây giờ hãy nhìn vào hình ảnh ở đầu bài viết, bạn sẽ thấy nó có một số thành phần như menu, logo, khung giới thiệu, 3 khung nhỏ và footer. Vì vậy, chúng ta nên tạo
#container: Khung này sẽ bao phủ toàn bộ trang để khi bạn muốn điều chỉnh độ rộng của trang web, bạn sẽ điều chỉnh trong vùng này nó áp dụng cho cả trang.#menu: Khu vực hiển thị menu màu đen bên trái.#content: Khu vực hiển thị nội dung bên phải.#header: Hiển thị logo và slogan của trang web ở phía bên tay phải.#logo: Hiển thị logo.#slogan: Hiển thị khẩu hiệu.
.call-to-action: Hiển thị khung màu xám.row: Khung bao bọc 3 cột bên dưới.#box 1: Cột đầu tiên#box 2: Cột thứ hai.#box 3: Cột thứ ba.
#footer: Chân trang của trang web.
Sau đó, chúng ta sẽ có mã HTML sau trong cặp thẻ <body>.
[html highlight=”2-31″]
[/html]
Lưu ý cho tôi một điều là những nơi tôi viết <!--#xxx--> Các câu lệnh nhận xét HTML để dễ dàng xem sau này khi tài liệu có nhiều thẻ <div> Nó không có ý nghĩa gì trong trình duyệt.
Viết nội dung cho từng phần
Tiếp theo, chúng ta sẽ tạo các thẻ nội dung cho từng phần tử vì không ai viết CSS và các thẻ cùng một lúc mà chỉ nên viết CSS sau khi hoàn thành nội dung HTML.
Cũng giống như cách chúng ta tạo menu dọc ở phần trước, menu sẽ được khai báo bằng thẻ danh sách như sau trong vùng #menu.
[html]
[/html]
Phần #content
Trong phần #content này, chúng tôi có 3 phần nhỏ nữa #header, .call-to-action và .row. Chúng tôi sẽ làm từng việc một:
Phần #header
Trong phần này, chúng tôi sẽ chèn một hình ảnh có tên tplogo2014.png trong thư mục img/ và một khẩu hiệu như thế này:
[html]
Học HTML và CSS cơ bản miễn phí
[/html]
Phần .call-to-action
Trong phần này chúng tôi cũng có một số nội dung đơn giản như sau:
[html]
Bạn sẽ học gì?
Nếu bạn mới làm quen với các trang web, loạt bài này sẽ giúp bạn hình dung rõ hơn về cách làm giao diện trang web tĩnh sử dụng HTML và CSS vì tất cả các giao diện trang web đều sử dụng HTML & CSS để bố cục. về giao diện, giúp bạn làm giao diện trang web của riêng mình.
[/html]
Phần .row
Ở phần này chúng ta sẽ có 3 cột, như vậy bên trong sẽ có 3 phần phụ, ở ví dụ này mình đưa ra 3 cột có nội dung giống hệt nhau nhưng chỉ khác hình ảnh.
[html]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales, faucibus libero ut, posuere felis. Donec không hoàn chỉnh suscipit accumsan. Aenean Hậu quả gia vị velit ut tempor. Nam porta massa trong metus bibendum congue. Sâu xanh da láng. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales, faucibus libero ut, posuere felis. Donec không hoàn chỉnh suscipit accumsan. Aenean Hậu quả gia vị velit ut tempor. Nam porta massa trong metus bibendum congue. Sâu xanh da láng. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales, faucibus libero ut, posuere felis. Donec không hoàn chỉnh suscipit accumsan. Aenean Hậu quả gia vị velit ut tempor. Nam porta massa trong metus bibendum congue. Sâu xanh da láng. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.
[/html]
Trong footer, chúng ta chỉ có nội dung như thế này.
[html]
[/html]
Bây giờ chúng ta có một văn bản HTML thuần túy như được hiển thị.
Được rồi, bây giờ là lúc viết CSS.
Viết CSS cho giao diện
Như mọi khi, khi viết CSS, bạn nên viết từng phần tử theo thứ tự từ lớn nhất đến nhỏ nhất và từ trên xuống dưới để tiện cho công việc.
Đoạn CSS đầu tiên bạn nên viết là thiết lập các thuộc tính cơ bản cho trang web như font style, font color, font size, add box-sizing,… Chúng ta viết đoạn đầu tiên như sau:
/*==Style cơ bản cho website==*/
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
line-height: 1.254em;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #3B8BBA;
}
a:hover,
a:visited {
color: #265778;
}
Chia khung cho các trang web
Bây giờ chúng ta đến phần quan trọng nhất của việc viết CSS cho #container và chia cột theo phần #menu để nó hiển thị ở bên trái như ảnh. Trong ví dụ này, tôi sử dụng khung menu dọc và hiển thị cố định trên trình duyệt, chiều rộng kéo dài toàn bộ cửa sổ.
/*==Lên khung cho website==*/
#container {
padding-left: 150px;
position: relative;
left: 0;
width: 100%;
}
#menu {
position: fixed;
height: 100%;
background-color: #191818;
width: 150px;
left: 0;
}
Lý do ở lại #container tôi có padding-left Đó là vì tôi muốn nó có 150px không gian ở bên trái của trang để tránh bị bỏ sót #menu che đậy. TRỰC TIẾP #menu Tôi sử dụng loại màn hình fixed để nó vẫn ở trên trang.
Kết quả ban đầu là như thế này.
Bây giờ mình sẽ tiếp tục làm cho menu hiển thị đẹp hơn một chút như ảnh demo. Đầu tiên loại bỏ các kiểu danh sách mặc định và loại bỏ lề, đệm.
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
Và thêm chiều cao cho từng mục bên trong menu.
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
Tiếp theo là chuyển các thẻ liên kết sang dạng khối, thêm màu chữ và các kiểu linh tinh.
#menu li a {
display: block;
color: #fff;
padding: 0 1em;
border-bottom: 1px solid #333;
}
Cuối cùng, thêm một kiểu khi di chuột qua từng menu.
#menu li:hover {
background-color: #454545;
}
Kết quả:
Viết CSS chung cho #content
Tiếp theo, chúng ta cần xử lý phần #content Làm gọn gàng nó một chút bằng cách thêm padding để nó trở lại giữa một chút, đồng thời tôi đưa ra nội dung văn bản trong phần. #header và .call-to-action ở đây sẽ được căn giữa.
/*==Trang trí khung content==*/
#content {
padding: 1em 8em;
}
#header,
.call-to-action {
text-align: center;
}
Và thêm màu chữ xấu xí cho câu khẩu hiệu để nó có một chút điểm nhấn, câu khẩu hiệu.
/*==Trang trí header của content==*/
#header{}
#slogan {
color: #8997A0;
font-size: 0.8em;
}
Tiếp theo là phần .call-to-actionTôi sẽ thêm màu nền cho nó và tạo đường viền cho nó để làm cho nó nổi bật một chút.
/*==Call to Action==*/
.call-to-action {
padding: 1.5em 20%;
background: #EFEFEF;
border: 1px solid#E8E8E8;
}
Cuối cùng đến phần chia cột trong .row để nó hiển thị dưới dạng 3 cột. Đầu tiên overflow: auto cho .row để nó có thể xóa float và margin để nó cách xa các phần tử khác hơn một chút.
/*==Chia cột phần content==*/
.row {
overflow: auto;
margin: 1.5em auto;
}
Tiếp theo là viết CSS cho lớp .col bên trong để nó nổi sang bên trái và thêm lề cần thiết để ngăn cách chúng. Phần riêng biệt .row .col:last-child điều đó có nghĩa là tôi chọn cột .row .col cuối cùng trong khu vực này, hãy để nó trôi sang bên phải, xóa margin-right để hiển thị cân bằng hơn.
/*==Chia cột phần content==*/
.row {
overflow: auto;
margin: 1.5em auto;
}
.row .col {
float: left;
width: 31.3333%;
margin-right: 2.99%;
}
.row .col:last-child {
float: right;
margin-right: 0;
}
Và viết CSS cho các hình bên trong sao cho nó nổi bên trái văn bản.
/* Style cho ảnh */
.row .col img {
float: left;
margin-right: 1em;
}
Kết quả là chúng tôi có:
Kết quả sau khi viết CSS cho #content
Phần này rất dễ, chúng tôi chỉ muốn giảm kích thước phông chữ một chút, làm cho màu sáng hơn và thêm một đường viền trên cùng.
/*==Footer==*/
#footer {
font-size: 85%;
border-top: 1px solid #E6E6E6;
color: #838383;
padding: 1em 3em;
}
Kết quả bây giờ giống như hình trên. Đơn giản phải không? : D
Tải xuống mã nguồn
Chúc may mắn!
![Sau khi website bị hack – các công cụ và dịch vụ nên dùng [NEW]](https://thachpham.com/wp-content/uploads/2014/10/sucuri-dashboard.jpg "Sau khi website bị hack – các công cụ và dịch vụ nên dùng [NEW] 5")
![Làm Thế Nào Sửa Lỗi Syntax Error Trong WordPress [NEW]](https://dieuhau.com/wp-content/uploads/2016/10/parse-error-syntax-error.jpg "Làm Thế Nào Sửa Lỗi Syntax Error Trong WordPress [NEW] 6")
![Tổng hợp các website “đỉnh” dành cho web designer và developer [NEW]](https://thachpham.com/wp-content/uploads/2014/09/smash1.jpg "Tổng hợp các website “đỉnh” dành cho web designer và developer [NEW] 7")