Từ các kiến thức mà bạn đã biết được ở 21 phần trước trong sê-ri Học CSS cơ bản, bạn có thể đã 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 trang web. Vì sao chúng ta lại không áp dụng tất cả các điều kiện để thực hiện việc xây dựng một giao diện đơn giản chứ?
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 mức giảm ít thôi đã giúp bạn có nhiều kinh nghiệm hơn rồi, từ đó bạn có thể tự học ở nhà
Trang chủ
Dịch vụSản phẩmTin tứcDiễn đànLiên hệ
[/html]Phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
6
Trong phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
6 này chúng ta có 3 phần nhỏ nữa là
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
7,
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
0 và
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
1. Chúng ta sẽ làm từng phần mộtPhần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
7
Ở phần này, chúng ta sẽ chèn một tấm ảnh có tên là
#menu li a {
display: block;
color: #fff;
padding: 0 1em;
border-bottom: 1px solid #333;
}
7 trong thư mục
#menu li a {
display: block;
color: #fff;
padding: 0 1em;
border-bottom: 1px solid #333;
}
8 và một khẩu hiệu như sau[html]
Học HTML và CSS cơ bản miễn phí
[/html]Phần
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
0
Phần này chúng ta cũng có một số nội dung đơn giản như sau
[html]
Bạn sẽ được học những gì?
Nếu bạn là người mới tìm hiểu về trang web thì sê-ri này sẽ giúp các bạn định hình rõ hơn công việc làm một trang web giao diện tĩnh bằng HTML và CSS vì tất cả các trang web giao diện đều sử dụng HTML & CSS để bố cục cục bộ .
[/html]Phần
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
1
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 chang nhau nhé mà chỉ khác hình ảnh thôi
[html]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dui sodales, faucibus libero ut, posuere felis. Donec imperdiet suscipit accumsan. Aenean consequat condimentum velit ut tempor. Nam porta massa trong metus bibendum congue. Pellentesque ultrices vestibulum mattis. 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 imperdiet suscipit accumsan. Aenean consequat condimentum velit ut tempor. Nam porta massa trong metus bibendum congue. Pellentesque ultrices vestibulum mattis. 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 imperdiet suscipit accumsan. Aenean consequat condimentum velit ut tempor. Nam porta massa trong metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.
[/html]Phần
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
5
Phần footer thì chúng ta chỉ đơn giản là có nội dung như thế này thôi
[html]
Copyright © 2015 – Serie học HTML & CSS cơ bản tại www. thachpham. com.
[/html]Bây giờ ta đã có một văn bản thuần HTML như hình
Được rồi, 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
Đ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ữ, kích thước chữ, thêm kích thước hộp,…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 website
Bây giờ ta đến phần lớn nhất là viết CSS cho phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
4 và chia cột cho phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
5 để nó hiển thị bên trái như hình ảnh. Ở ví dụ này, mình sử dụng menu khung dọc và hiển thị cố định trên trình duyệt, chiều dài mở rộng hết 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;
}
Sở dĩ ở
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
4 mình có
#menu li:hover {
background-color: #454545;
}
5 là vì mình muốn nó dư một khoảng trống 150px bên tay trái của trang để đỡ thằng
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
5 che mất. Ở
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
5 Mình sử dụng kiểu hiển thị là
#menu li:hover {
background-color: #454545;
}
8 để nó đứng vững trên trangKết quả ban đầu ta được thế này
Viết CSS cho
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
5
Bây giờ mình sẽ tiếp tục làm cái menu cho nó đẹp hơn một chút giống như ảnh demo vậy. Trước tiên là xóa các kiểu của danh sách mặc định đi và xóa lề, phần đệm
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
And more height for each side item in menu
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
Tiếp đến là chuyển các thẻ liên kết về định dạng khối, thêm chữ màu và kiểu dáng linh tinh
#menu li a {
display: block;
color: #fff;
padding: 0 1em;
border-bottom: 1px solid #333;
}
Cuối cùng là thêm kiểu khi rê chuột vào từng menu
#menu li:hover {
background-color: #454545;
}
Kết quả
Viết CSS chung cho
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
6
Tiếp theo là ta cần xử lý tiếp phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
6 một chút cho nó gọn gàng lại bằng cách thêm phần đệm để nó lùi về giữa một lúc, đồng thời mình cho rằng các nội dung văn bản trong phần
/*==Trang trí menu==*/
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
7 và
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
0 trong đâ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ữ ốp cho thằng slogan để nó có điểm nhấn, slogan mà lị
/*==Trang trí header của content==*/
#header{}
#slogan {
color: #8997A0;
font-size: 0.8em;
}
Tiếp theo là phần
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
0, mình sẽ thêm màu nền cho nó và thêm một cái vách ngăn để 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 là đến phần chia cột trong
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
1 để nó hiển thị thành 3 cột. Trước tiên là thêm
/*==Trang trí khung content==*/
#content {
padding: 1em 8em;
}
#header,
.call-to-action {
text-align: center;
}
6 cho
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
1 để nó có thể xóa số float và lề để nó cách xa các phần tử khác 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
/*==Trang trí khung content==*/
#content {
padding: 1em 8em;
}
#header,
.call-to-action {
text-align: center;
}
8 nằm trong đây để nó nổi qua bên trái và thêm lề cần thiết để cách xa nhau. Riêng phần
/*==Trang trí khung content==*/
#content {
padding: 1em 8em;
}
#header,
.call-to-action {
text-align: center;
}
9 nghĩa là mình chọn cột
/*==Trang trí header của content==*/
#header{}
#slogan {
color: #8997A0;
font-size: 0.8em;
}
0 cuối cùng trong khu vực này để cho nó nổi qua bên phải, xóa
/*==Trang trí header của content==*/
#header{}
#slogan {
color: #8997A0;
font-size: 0.8em;
}
1 để hiển thị cân đối hơn
/*==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;
}
0Và viết CSS note cho mấy cái ảnh bên trong để nó float qua bên trái chữ
/*==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;
}
1Kết quả ta có
Kết quả sau khi viết CSS cho #content
Viết CSS cho
#menu ul li {
line-height: 2.9em;
height: 2.9em;
}
5
Phần này thì dễ rồi, ta chỉ là muốn giảm kích thước chữ xuống một chút, cho màu nhạt hơn và thêm cái viền trên [đỉnh viền]