Viết CSS cho trang chủ Website bootstrap
Viết CSS cho trang chủ Website
Viết
CSS cho Header
Trước tiên hết bạn cần phải thêm đoạn code
sau vào trước thẻ </head> của file index.html để chỉ đường dẫn đến file
style.css.
|
1
|
<link href="style.css" rel="stylesheet">
|
Tiếp theo ta viết code CSS cho phần
header như sau:
|
1
2
3
4
5
6
7
8
9
10
|
header{
.logo{
h1{
font-size:
25px;
}
}
.search{
padding: 15px;
}
}
|
Giải thích: Như mình đã nói ở phần trước thì ta đang
sử dụng ngôn ngữ LESS để viết CSS nhanh chóng hơn nên đòi hỏi bạn phải mở phần
mềm Prepros lên và chắc chắn rằng đã add thư mục chứa code website vào project
của Prepros như hướng dẫn ở các phần trước.
- font-size: 25px; phần này sẽ định kích cỡ chữ mà trong trường hợp này là cho thẻ h1.
- padding: 15px; code này dùng để thêm khoảng không giữa các thành phần bên trong div mà ở đây là ô tìm kiếm trong thẻ div “search”.
- Phần menu chính của trang web thì mình đã dùng code do Bootstrap cung cấp nên không cần phải css, nếu các bạn muốn đẹp hơn thì có thể tùy chỉnh nó lại dựa trên các class trong file index.html.
Viết
CSS cho Wrapper
Ở phần này mình copy nội dung trong div
“box-index” ra làm 2 để căng chỉnh khoảng cách giữa các box-index với nhau, sau
này thêm nhiều box nữa cho tiện.
Code của phần Wrapper 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
67
68
|
#wrapper{
.content{
.slider{
img{
width:
100%;
height:
auto;
}
}
.box-index{
h2{
text-transform:
uppercase;
font-size:
23px;
color:
#444;
border-bottom:
3px solid #EEE;
position:
relative;
margin-bottom:
20px;
padding:
5px 0;
&::before{
content:
"";
display:
block;
width:
70px;
background:
#2673BB none repeat scroll 0% 0%;
height:
3px;
position:
absolute;
bottom:
-2px;
left:
0px;
}
}
.item{
margin-bottom:
20px;
h3{
font-size:
16px;
}
}
}
}
.sidebar{
.sidebar-item{
margin-bottom:
30px;
h4.widget-title{
text-transform:
uppercase;
font-size:
20px;
color:
#444;
border-bottom:
3px solid #EEE;
position:
relative;
margin:
0;
margin-bottom:
20px;
padding:
5px 0;
&::before{
content:
"";
display:
block;
width:
70px;
background:
#2673BB none repeat scroll 0% 0%;
height:
3px;
position:
absolute;
bottom:
-2px;
left:
0px;
}
}
.textwidget{
img{
width:
100%;
height:
auto;
}
}
}
}
}
|
Giải thích: Code được chia ra làm 2 phần chính là
content và sidebar mình sẽ giải thích lần lượt các dòng code có trong phần này
để các bạn dễ hình dung.
- img{width: 100%; height: auto;} đoạn này nghĩa là định dạng thẻ hình ảnh cho div chứa nó với chiều rộng là 100% và chiều cao tự động co giãn theo tỷ lệ ảnh làm cho ảnh không bị bóp méo.
- text-transform: uppercase; là đoạn code dùng để viết hoa toàn bộ đoạn text mà cụ thể ở đây là thẻ h2.
- color: #444; đoạn code này dùng để đổi màu cho chữ, nếu các bạn có cài plugin Color Picker cho Sublime Text thì có thể bấm tổ hợp phím Ctrl + Shift + C để mở bảng chọn mã màu.
- border-bottom: 3px solid #EEE; đoạn code này giúp bạn kẻ viền dưới cho thẻ chứa nó, các bạn có thể đổi bottom thành top, left, right tùy theo nhu cầu của mình.
- position: relative; thẻ này là thẻ xác định vị trí bao ngoài cho thành phần, position: absolute; sẽ xác định vị trí tuyệt đối dựa trên thẻ relative gần nhất nhờ các thẻ bottom, top, left, right.
- margin-bottom: 20px; Thẻ này nhằm tạo ra khoảng không bao ngoài bên dưới đối tượng đang được chọn.
- content: “”; thẻ này định nội dung cho phần before của thẻ h2.
- background: #2673BB none repeat scroll 0% 0%; đoạn này nhằm tạo màu nền cho thành phần.
- height: 3px; thẻ định chiều cao cho thành phần.
Ở đoạn CSS trên có 2 thành phần giống
nhau giữa thẻ h2 của box-index và thẻ h4 của tiêu đề sidebar tương đối giống
nhau, các bạn có thể gộp nó lại thành 1 ở đây mình chia ra để các bạn mới học
dễ hình dung.
Viết
CSS cho Footer
Phần này thì code rất đơn giản nên chắc
mình cũng không cần phải giải thích gì
|
1
2
3
4
5
|
footer{
background: #2E2E2E;
color: #fff;
padding: 20px;
}
|
Và đây là thành quả của chúng ta:
No comments
Post a Comment