Bài này là bài cuối cùng của phần dựng Theme bằng HTML và CSS, ở bài này mình sẽ hướng dẫn các bạn viết CSS cho Desktop với Menu đa cấp xổ xuống và tạo giao diện cho bài con.
Viết CSS cho Desktop
Mình sẽ lấy kích thước thông dụng nhất của Desktop hiện nay đó là 1366×768, cho nên ta cần phải tạo file desktop.less với nội dung ban đầu như sau:
1
2
3
| @media screen and (min-width: 1366px) { /* Viết code CSS tại đây */} |
Viết CSS cho Header
Tiếp theo ta viết css cho phần header, ở phần này ta sẽ chia 2 phần là site name và top banner, 2 phần này sẽ được float:left với nhau để chúng nằm cùng một hàng vì lúc này màn hình ta đã đủ rộng để chứa nó, code như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| @media screen and (min-width: 1366px) { /* Viết code CSS tại đây */ #header{ .site-title{ .title{ float: left; width: 30%; padding-top: 30px; text-align: left; margin-left: 10% } .top-banner{ width: 50%; float: left; margin-right: 10%; text-align: right; img{ width: 80%; height: auto; } } } } |
Lưu ý: thêm đoạn code này sau thẻ div top-banner để các phần sau không bị đẩy lên trên các phần trước đó: <div style=”clear: both;”></div>
Viết CSS cho Menu
Tiếp theo ta đến phần Menu, trên màn hình Desktop ta sẽ làm menu dạng xổ xuống đa cấp, code của phần này như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| @media screen and (min-width: 1366px) { /* Viết code CSS tại đây */ #header{ .header-menu{ clear: both; background-color: #007f74; border-top: 1px solid #fff; border-bottom: 3px solid #e0e0e0; padding-bottom: 3px; a.mobile-menu{ display: none !important; } > ul{ width: 80%; margin: auto; display: block !important; height: 40px; margin-bottom: 10px; li{ position: relative; display: inline-block; padding: 10px 10px; border-left: solid 1px #006b62; a{ overflow: auto; padding: 10px; border-left: solid 1px #019e90; border-right: solid 1px #019e90; height: 40px; color: #fff; &:hover{ color: #ed1b2e; } } &:hover{ background-color: #00665d; ul{ display: block; } } ul{ position: absolute; top: 42px; left: -30px; z-index: 999; width: 230px; margin: 0; padding: 0; display: none; background-color: #ed1b2e; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; li{ display: list-item; border: none !important; a{ border: none !important; padding: 10px; } } } } } } }} |
Mình xin giải thích một số phần trong css tạo menu:
– Đầu tiên display none nút menu có ở giao diện di động đi và display:block toàn bộ thẻ <ul> của menu lên.
– Tại thẻ <li> của chuyên mục cha ta thiết lập thuộc tính position:relative, thẻ <ul> của chuyên mục con sẽ thiết lập position:absolute để định vị trí ngay dưới chuyên mục cha khi người dùng rê chuột vào chuyên mục cha.
– Ban đầu ta ẩn các chuyên mục con đi, khi nào người dùng rê chuột vào chuyên mục cha (thuộc tính hover xử lý việc rê chuột) thì sẽ display:block thẻ<ul> tương ứng.
Viết CSS cho Wrapper (Thân trang web)
Tiếp đến ta đến phần Wrapper của trang web, ở phần này ta thiết lập một số thuộc tính như code sau:
Giải thích phần Wrapper:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| @media screen and (min-width: 1366px) { /* Viết code CSS tại đây */ #wrapper{ width: 80%; margin: 0 auto; .main-content{ .content{ width: 98.5%; .posts{ overflow: hidden; .post-title{ margin-bottom: 5px; } .thumb{ width: 20%; float: left; img{ width: 100%; } } .posts-exceprt{ width: 80%; float: left; } } } } }} |
– Đặt chiều rộng 80% và margin: 0 auto để đưa Wrapper vào giữa.
– Thuộc tính overflow:hidden là để chiều cao của thẻ div.posts tự động fix theo nội dung bên trong, nếu không có phần này thì phần background của posts sẽ không bao trọn được nội dung, các bạn cứ thử thì sẽ biết.
Viết CSS cho Footer
Cuối cùng là phần Footer, ở phần này mình chỉ có chỉnh sửa chút xíu như code sau các bạn xem nhé:
1
2
3
4
5
6
7
8
9
| @media screen and (min-width: 1366px) { /* Viết code CSS tại đây */ #footer{ .footer-info{ width: 80%; margin: 0 auto; } }} |
Dựng Theme cho trang Danh Mục và Trang Con
Và bây giờ mình sẽ hướng dẫn bạn phần cuối cùng trong công đoạn dựng Theme bằng HTML, CSS đó là thiết kế trang con và trang danh mục cho trang web.
Phần này nó sẽ đơn giản hơn nhiều nếu như ta đã thiết kế xong trang chủ.
Dựng theme cho trang danh mục
Bước 1: Bây giờ ta tạo thêm một file html với tên gọi là category.html
Bước 2: Sau đó tiến hành copy toàn bộ code của file index.html
Bước 3: Ở giao diện chuyên mục gần như khong khác gì trang chủ cho lắm, chỉ cần bỏ đi phần div.featured_cont là xong.
Bước 4: Vì code hơi nhiều nên các bạn down trực tiếp file ở cuối bài để xem nhé.
Dựng theme cho trang con
Bước 1: Tạo một file html với tên gọi là single.html
Bước 2: Copy toàn bộ code của trang category.html vào.
Bước 3: Ở giao diện trang con thì ta sẽ bỏ đi các phần div.featured_cont và div.content
Bước 4: Tạo div mới cho phần hiển thị nội dung bài viết, code của phần div.wrapper như sau:
|
Bước 5: Viết css cho phần wrapper: Tại file style.less mình thêm phần css định dạng cho trang con như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| #wrapper{ .main-content{ .single{ width: 98%; margin: 0 auto; padding: 10px; margin-top: 5px; background: #fff; overflow: hidden; border: 1px solid #dcdcdc; border-radius: 3px; box-shadow: 3px 3px 3px #dcdcdc; margin-bottom: 10px; h1{ margin: 0; padding-bottom: 10px; font-size: 20px; } } .breadcrumbs{ width: 98%; margin: 0 auto; padding: 10px; margin-top: 5px; background: #fff; overflow: hidden; border: 1px solid #dcdcdc; border-radius: 3px; box-shadow: 3px 3px 3px #dcdcdc; margin-bottom: 10px; font-size: 13px; } }} |
Tới đây chúng ta đã hoàn tất việt dựng Theme bằng HTML, CSS, ở bài sau mình sẽ hướng dẫn các bạn ráp Theme vừa thiết kế xong vào Worldpress.