CSS Note 4: Thực hành tạo Layout đơn giản

Mặc dù giao diện mình sẽ hướng dẫn bạn làm ở đây chỉ là ở mức đơn giản thôi, nhưng hãy tin mình đi vì chỉ với bấy nhiêu thôi đã giúp bạn có nhiều kinh nghiệm hơn rồi, từ đó bạn có thể tự học ở các tài nguyên khác trên internet.
hoc-css-basic-layout

Tài nguyên bắt đầu

Trước khi bắt đầu làm theo các hướng dẫn này thì bạn hãy tải về một số tài nguyên cần thiết dưới đây, nó bao gồm 4 bức ảnh và file normalize.css để reset CSS.

Bắt đầu

Bây giờ bạn hãy tạo một thư mục riêng và copy file normalize.css và thư mục img vào. Sau đó tạo thêm file index.html (tập tin website) và style.css (chứa các CSS của website).
Tạo các thư mục cần thiết
Tạo các thư mục cần thiết
Bây giờ hãy mở file index.html lên và bắt đầu viết HTML cho website nhé.
Việc trước tiên bạn cần viết là hãy viết các thẻ đầu tiên nhất của website bằng HTML là khai báo loại tập tin, thẻ <html>, cặp <head> và cặp <body>.
01
02
03
04
05
06
07
08
<br />
&lt;!DOCTYPE html&gt;<br />
&lt;html lang=&quot;vi&quot;&gt;<br />
 &lt;head&gt;</p>
<p> &lt;/head&gt;<br />
 &lt;body&gt;</p>
<p> &lt;/body&gt;<br />
&lt;/html&gt;<br />

Thêm các thẻ khai báo thông tin

Bây giờ chúng ta sẽ làm từ trên xuống dưới, trước tiên mình sẽ khai báo thông tin về tài liệu website này như tiêu đề, mô tả và quan trọng nhất là gắn hai tập tin style.css và normalize.css vào để nó đọc CSS trong đó.
Như chúng ta đã học ở phần đầu rồi, chúng ta sẽ có các thẻ sau để khai báo thông tin cho tài liệu HTML tropng cặp thẻ <head>.

Tạo các khu vực trong website

Bây giờ việc quan trọng nhất là bạn phải ước lượng được bố cục của website như thế nào để tiến hành tạo ra các thẻ <div> tương ứng với từng bố cục, và phải biết rõ và tính toán xem nên cho thẻ <div> nào lồng vào thẻ nào để tiện lợi nhất cho việc viết CSS.
Bây giờ bạn hãy nhìn tấm ảnh ở đầu bài, 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. Như vậy chúng ta nên tạo ra các thẻ <div> với các id và class như sau. Lưu ý là sử dụng class hay id thì tùy các bạn nhưng mình thích dùng id cho các phần chính mà sẽ chắc chắn chỉ hiển thị một lần trên website, còn các class mình sẽ có thể tái sử dụng cho thành phần khác.
  • #container: Khung này sẽ bao phủ toàn trang để khi bạn muốn chỉnh chiều rộng của website thì sẽ chỉnh ở khu vực này là nó áp dụng lên toàn trang.
    • #menu: Khu vực hiển thị menu màu đen bên tay trái.
    • #content: Khu vực hiển thị nội dung bên phải.
      • #header: Hiển thị logo và cái slogan của website bên tay phải.
        • #logo: Hiển thị logo.
        • #slogan: Hiển thị slogan.
      • .call-to-action: Hiển thị cái khung màu xám
      • .row: Cái khung bao bọc 3 cột ở dưới.
        • #box 1: Cột thứ nhất
        • #box 2: Cột thứ hai.
        • #box 3: Cột thứ ba.
      • #footer: Phần chân website.
Vậy thì chúng ta sẽ có mã HTML như sau trong cặp thẻ <body>.

Viết nội dung cho từng phần

Tiếp theo là chúng ta sẽ tạo ra các thẻ chứa nội dung cho từng thành phần vì không ai vừa viết thẻ vừa viết CSS cả mà chỉ nên viết CSS sau khi hoàn thành nội dung HTML.

Phần #menu

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 một thẻ tạo danh sách như sau trong khu vực #menu.

Phần #content

Trong phần #content này chúng ta có 3 phần nhỏ nữa là #header, .call-to-action và .row. Chúng ta sẽ làm từng phần một:

Phần #header

Ở phần này chúng ta sẽ chèn một tấm ảnh tên là tplogo2014.png trong thư mục img/ và một cái slogan 

Phần .call-to-action

Phần này chúng ta cũng có một số nội dung đơn giản

Phần .row

Phần này chúng ta sẽ có 3 cột nên có 3 phần con bên trong nữa, ở ví dụ này thì mình cho 3 cột với nội dung giống y hệt nhau nhé mà chỉ khác hình ảnh thôi.

Phần #footer

Phần footer thì chúng ta chỉ đơn giản là có nội dung như này thôi.
hoc-css-basic-layout-02
Okay, bây giờ sẽ là phần viết CSS.

Viết CSS cho giao diện

Bao giờ cũng vậy, khi viết CSS thì bạn nên viết theo từng thành phần theo thứ tự từ lớn đến bé và từ trên xuống dưới cho dễ làm 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 website như kiểu chữ, màu chữ, size chữ, thêm box-sizing,…Ta viết đoạn đầu tiên như sau:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<br />
/*==Style cơ bản cho website==*/<br />
* {<br />
 box-sizing: border-box;<br />
 -webkit-box-sizing: border-box;<br />
 -moz-box-sizing: border-box;<br />
}<br />
body {<br />
 font-family: Helvetica,Arial,sans-serif;<br />
 font-size: 16px;<br />
 line-height: 1.254em;<br />
 margin: 0;<br />
 padding: 0;<br />
}<br />
a {<br />
 text-decoration: none;<br />
 color: #3B8BBA;<br />
}<br />
a:hover,<br />
a:visited {<br />
 color: #265778;<br />
}<br />

Chia khung cho website

Bây giờ ta làm đến phần lớn nhất là viết CSS cho phần #container và chia cột cho phần #menu để nó hiển thị bên trái như ảnh. Ở ví dụ này mình sử dụng khung menu dọc và hiển thị cố định trên trình duyệt, chiều rộng trải dài hết cửa sổ.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<br />
/*==Lên khung cho website==*/<br />
#container {<br />
 padding-left: 150px;<br />
 position: relative;<br />
 left: 0;<br />
 width: 100%;<br />
}<br />
#menu {<br />
 position: fixed;<br />
 height: 100%;<br />
 background-color: #191818;<br />
 width: 150px;<br />
 left: 0;<br />
}<br />
Sở dĩ ở #container mình có padding-left là vì mình muốn nó dư một khoảng trống 150px bên tay trái của trang để đỡ bị thằng #menu che mất. Ở #menu mình sử dụng kiểu hiển thị là fixed để nó đứng cố định trên trang.
Kết quả ban đầu ta được thế này.
hoc-css-basic-layout-03

Viết CSS cho #menu

Bây giờ mình sẽ tiếp tục làm cái menu cho nó hiển thị đẹp hơn một xíu giống như ảnh demo vậy. Trước tiên là xóa các style của danh sách mặc định đi và xóa margin, padding.
01
02
03
04
05
06
07
<br />
/*==Trang trí menu==*/<br />
#menu ul {<br />
 list-style-type: none;<br />
 padding: 0;<br />
 margin: 0;<br />
}<br />
Và thêm chiều cao cho từng mục bên trong menu.
01
02
03
04
05
<br />
#menu ul li {<br />
 line-height: 2.9em;<br />
 height: 2.9em;<br />
}<br />
Tiếp đến là chuyển các thẻ liên kết về dạng block, thêm màu chữ và các style linh tinh.
01
02
03
04
05
06
07
<br />
#menu li a {<br />
 display: block;<br />
 color: #fff;<br />
 padding: 0 1em;<br />
 border-bottom: 1px solid #333;<br />
}<br />
Cuối cùng là thêm style khi rê chuột vào từng menu.
01
02
03
04
<br />
#menu li:hover {<br />
 background-color: #454545;<br />
}<br />
Kết quả:
hoc-css-basic-layout-04

Viết CSS chung cho #content

Tiếp theo là ta cần xử lý tiếp phần #content một xíu cho nó gọn gàng lại bằng cách thêm padding để nó lùi về giữa một chút, đồng thời mình cho các nội dung văn bản trong phần #header và .call-to-action trong đây sẽ được căn giữa.
01
02
03
04
05
06
07
08
09
<br />
/*==Trang trí khung content==*/<br />
#content {<br />
 padding: 1em 8em;<br />
}<br />
#header,<br />
.call-to-action {<br />
 text-align: center;<br />
}<br />
Và thêm màu chữ bậy bạ cho thằng slogan để nó có điểm nhấn xíu, slogan mà lị.
01
02
03
04
05
06
07
<br />
/*==Trang trí header của content==*/<br />
#header{}<br />
#slogan {<br />
 color: #8997A0;<br />
 font-size: 0.8em;<br />
}<br />
Tiếp theo là phần .call-to-action, mình sẽ thêm màu nền cho nó và cho một cái viền để nó nổi bật một tẹo.
01
02
03
04
05
06
07
<br />
/*==Call to Action==*/<br />
.call-to-action {<br />
 padding: 1.5em 20%;<br />
 background: #EFEFEF;<br />
 border: 1px solid#E8E8E8;<br />
}<br />
Cuối cùng là đến phần chia cột trong .row để nó hiển thị thành 3 cột. Trước tiên là thêm overflow: auto cho .row để nó có thể clear float và margin để nó cách xa các phần tử khác một chút.
01
02
03
04
05
06
<br />
/*==Chia cột phần content==*/<br />
.row {<br />
 overflow: auto;<br />
 margin: 1.5em auto;<br />
}<br />
Tiếp theo là viết CSS cho class .col nằm trong đây để nó float qua bên trái và thêm margin cần thiết để cách xa nhau ra. Riêng phần .row .col:last-child nghĩa là mình chọn cột .row .col cuối cùng trong khu vực này để cho nó float qua bên phải, xóa margin-right để hiển thị cân đối hơn.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<br />
/*==Chia cột phần content==*/<br />
.row {<br />
 overflow: auto;<br />
 margin: 1.5em auto;<br />
}<br />
.row .col {<br />
 float: left;<br />
 width: 31.3333%;<br />
 margin-right: 2.99%;<br />
}<br />
.row .col:last-child {<br />
 float: right;<br />
 margin-right: 0;<br />
}<br />
Và viết CSS nốt cho mấy cái ảnh bên trong cho nó float qua bên trái chữ.
01
02
03
04
05
06
<br />
/* Style cho ảnh */<br />
.row .col img {<br />
 float: left;<br />
 margin-right: 1em;<br />
}<br />
Kết quả ta có:
Kết quả sau khi viết CSS cho #content
Kết quả sau khi viết CSS cho #content

Viết CSS cho #footer

Phần này thì dễ rồi, ta chỉ là muốn giảm kích thước chữ xuống một xíu, cho màu nhạt hơn và thêm cái viền trên (border-top).
01
02
03
04
05
06
07
08
<br />
/*==Footer==*/<br />
#footer {<br />
 font-size: 85%;<br />
 border-top: 1px solid #E6E6E6;<br />
 color: #838383;<br />
 padding: 1em 3em;<br />
}<br />
Kết quả bây giờ thì y hệt như hình phía trên đó. Đơn giản phải không nào? 😀

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

#7 Phương pháp xác định nhanh 6 mẫu âm giai trong Guitar Lead

Hình ảnh
Phương pháp xác định nhanh 6 mẫu âm giai trong Guitar Lead Vị trí 6 mẫu âm giai tone C/Am trong Guitar Lead TH1: Chọn nốt C trên dây 6 - Xác định nốt chủ C trên dây 6 ngăn 8 --> Có thể chọn mẫu ngăn 7, hoặc 5 nhưng bắt đầu từ nốt C (để chạy nốt trong mẫu). (trong trường hợp chơi ở đô trưởng). - Nếu chơi ở rê trưởng ta dịch lên 2 ngăn, la trưởng dịch xuống 3 ngăn, tương tự như vậy với các giọng khác, dịch theo quãng. - Từ các âm giai trưởng dịch xuống 3 ngăn sẽ ra thế bấm của âm giai thứ song song với nó. --> Chỉ cần xác định từ âm giai C trưởng là ra hết các âm giai khác. --> Điểm khác biệt của âm giai trưởng và thứ là nốt bắt đầu tương ứng với việc chơi ngón giữa cho âm giai trưởng và ngòn trỏ cho âm giai thứ. TH1: Chọn nốt C trên dây 5 - Nốt C này thuộc 2 mẫu âm giai đầu tiên và ngăn 3. - Tương tự lấy nốt C là nốt bắt đầu khi chạy hai âm giai trên. - Dịch theo quãng để ra các tone khác. - Dịch để suy ra âm giai thứ song song với nó. - Vẫn nốt bắt đầu ...
Đọc thêm

Làm Chủ 7 Mode Trong Guitar Lead [Chơi ở tất cả các Tone]

Hình ảnh
Làm Chủ 7 Mode Trong Guitar Lead [Chơi ở tất cả các Tone] 7 mode Mode 3 : Tone chủ Em: E - G - B Các nốt dừng/nối câu lead (màu đỏ): Tone chủ Em: E - G - B Mode 4:  Tone chủ F:  F - A - C (bậc 4 - 6 -1) Khi chơi chỉ cần nhớ mẫu hình mode, sau đó tìm node vào theo bậc của nó (1,3,5) của hợp âm đó. Mỗi Mode khi xê dịch sẽ lại cho ra các tông khác nhau dùng mode đó.
Đọc thêm

#1 Âm giai trưởng (The major Scale) và Pattern 6/4

Hình ảnh
#1 Âm giai trưởng (The major Scale) và Pattern 6/4 Nguồn:  https://www.youtube.com/watch?v=M7OLG_R4RQo&list=PLYEiBIjLQLwv5xRH_IOhipwizSIko5HPe&index=7 6 - dây 6 ; 4 - 4 ngón 1 - 4 tương ứng từ trở đến út. Phần mềm đánh nhịp: metronome 80 - 120 Âm giai trưởng có 7 nốt: C D E F G A B C Cấu trúc: 2 2 1 vs 2 2 2 1 --> âm giai trưởng. 2 - 1 cung - 2 ngăn; 1 - nửa cung - 1 ngăn. Thăng, giáng để đáp ứng quy tắc 2 2 1 vs 2 2 2 1. Bậc âm giai là thứ tự các nốt trong âm giai: Do đó vị trí các bậc trên cần đàn của một âm giai như sau: VD: 1 - 2: 2 ngăn (1 cung); 3 - 4: 1 ngăn (nửa cung); 7 - 1: 1 ngăn (nửa cung).
Đọc thêm