thiết kế giao diện web bằng css là một trong những từ khóa được search nhiều nhất về chủ đề thiết kế giao diện web bằng css. Trong bài viết này, lamweb.vn sẽ viết bài viết Cách thiết kế giao diện web bằng css mới nhất 2020
Cách thiết kế giao diện web bằng css mới nhất 2020
Từ các văn hóa mà bạn đang biết được ở 21 phần trước trong serie Học CSS cơ bản, bạn có thể đang biết qua một số kỹ thuật cơ bản nhưng quan trọng nhất trong việc dùng CSS để design giao diện cho web. Vậy vì sao chúng ta lại k ứng dụng toàn bộ để thực hành xây dựng một giao diện đơn giản chứ? Bởi vì bạn cần biết rằng học CSS là tiến trình k ngừng nghỉ, đủ nội lực bạn thuộc hết các tính chất và phương pháp sử dụng nó, nhưng điều đó không có nghĩa là bạn tự tin mình đủ nội lực làm được một giao diện trước khi tự tay sử dụng một cái.
Mặc dù giao diện mình sẽ chỉ dẫn bạn sử dụng ở đây chỉ là ở mức không khó khăn thôi, nhưng hãy tin mình đi vì chỉ với bấy nhiêu thôi đang 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ông giống trên internet.
Tài nguyên bắt đầu
Trước khi bắt đầu làm theo các chỉ dẫn này thì bạn hãy tải về một số tiền cần thiết dưới đây, nó bao gồm 4 bức hình và file normalize.css để reset CSS.
tải starter resources
khởi đầu
ngày nay 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 quan trọng
ngày nay hãy xây dựng file index.html lên và khởi đầu vạch HTML cho web nhé.
Việc trước nhất bạn cần viết là hãy vạch các thẻ trước nhất nhất của web bằng HTML là khai báo loại tập tin, thẻ
, cặp
và cặp
.
01 02 03 04 05 06 07 08 09 | DOCTYPE html><html lang="vi"><head>head><body>body>html> |
Thêm các thẻ khai báo thông tin
ngày nay chúng ta sẽ giúp từ trên xuống dưới, đầu tiên mình sẽ khai báo thông tin về ebook website này như tiêu đề, mô tả và quan trọng nhất là gắn hai tập tin phong cách.css và normalize.css vào để nó đọc CSS trong đó.
giống như chúng ta vừa mới học ở phần đầu rồi, chúng ta sẽ có các thẻ sau để khai báo thông tin cho ebook HTML tropng cặp thẻ
.
01 02 03 04 05 06 07 08 09 | <head><meta charset="utf-8" /><title>Thach Pham Blogtitle><meta name="description" nội dung="Thực hành tạo layout bằng HTML và CSS cơ bản" /><meta name="author" content="ThachPham" /><meta name="keyword" nội dung="hoc css,css co ban,css layout" /><liên kết type="text/css" rel="stylesheet" href="style.css" /><liên kết type="text/css" rel="stylesheet" href="normalize.css" />head> |
Tạo các khu vực trong website
ngày nay việc cần thiết nhất là bạn phải ước lượng được bố cục của web ntn để tiến hành tạo ra các thẻ
tương ứng với từng bố cục, và phải biết rõ và tính toán nhìn thấy nên cho thẻ
nào lồng vào thẻ nào để tiện lợi nhất cho việc viết CSS.hiện tại bạn hãy Quan sát tấm hì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ẻ
với các id và class giống như sau. lưu ý là sử dụng class hay id thì tùy các bạn nhưng mình like dùng id cho các phần chính mà sẽ hiển nhiên chỉ hiển thị một lần trên web, còn các class mình sẽ có thể tái sử dụng cho nguyên nhân không giống.
#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ó vận 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ị content bên phải.#header: Hiển thị logo và cái slogan của web 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 web.
Vậy thì chúng ta sẽ có mã HTML như sau trong cặp thẻ
.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <body><div id="container"><div id="menu">div><div id="content"><div id="header"><div id="logo">div><div id="slogan">div>div><div class="call-to-action">div><div class="row"><div id="box1" class="col">div><div id="box2" class="col">div><div id="box3" class="col">div>div>div><div id="footer">div>div>body> |
note cho mình một điều là các chỗ mình ghi là các câu lệnh ghi chú trong HTML để bạn dễ Quan sát sau này khi ebook có nhiều thẻ
chứ nó không có ý nghĩa gì trên trình duyệt.
vạch content 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ì k ai vừa viết thẻ vừa viết CSS cả mà chỉ nên vạch CSS sau khi hoàn thành nội dung HTML.
Phần #menu
như phương pháp chúng ta tạo menu dọc ở phần trước, thực đơn sẽ được khai báo bằng một thẻ tạo mục lục như sau trong khu vực #menu.
01 02 03 04 05 06 07 08 09 10 | <div id="menu"><ul><li><a href="#">Trang chủa>li><li><a href="#">Dịch vụa>li><li><a href="#">Sản phẩma>li><li><a href="#">Tin tứca>li><li><a href="#">Diễn đàna>li><li><a href="#">Liên hệa>li>ul>div> |
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 như sau:
01 02 03 04 | <div id="header"><div id="logo"><img src="img/tplogo2014.png" />div><div id="slogan"><h3><a href="https://thachpham.com/series/html-co-ban" data-wpel-link="internal">Học HTMLa> và CSS cơ bản miễn phíh3>div>div> |
Phần .call-to-action
Phần này chúng ta cũng có một số nội dung dễ dàng giống như sau:
01 02 03 04 05 | <div class="call-to-action"><h3>Bạn sẽ được học những gì?h3><p>Nếu bạn là người mới tìm hiểu về web thì serie này sẽ giúp các bạn ảnh dung rõ hơn việc làm một giao diện website tĩnh bằng HTML và CSS vì tất cả giao diện website đều dùng HTML & CSS để lên bố cục cho giao diện, giúp bạn tự làm một giao diện website cho riêng mình.p>div> |
Phần .row
Phần này chúng ta sẽ có 3 cột cần có 3 phần con bên trong nữa, ở gợi ý này thì mình cho 3 cột với content giống y hệt nhau nhé mà chỉ khác hình ảnh thôi.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <div class="row"><div id="box1" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/css-icon.png" alt="CSS" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div><div id="box2" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/url-icon.png" alt="URL" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div><div id="box3" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/html-icon.png" alt="HTML" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div>div> |
Phần #footer
Phần footer thì chúng ta chỉ không khó khăn là có nội dung như này thôi.
01 02 03 | <div id="footer"><p>Copyright © 2015 - Serie học HTML & CSS cơ bản tại www.thachpham.com.p>div> |
hiện giờ ta vừa mới có một văn bản thuần HTML giống như hình.
Okay, hiện tại sẽ là phần viết CSS.
Xem thêm : Tổng hợp các trang học thiết kế web online miễn phí mới nhất 2020
viết CSS cho giao diện
có khi nào cũng vậy, khi viết CSS thì bạn nên viết theo từng nguyên nhân theo thứ tự từ to đến bé và từ trên xuống dưới cho easy sử dụng việc.
Đoạn CSS đầu tiên bạn nên viết đó là xây dựng các tính chất cơ bản cho web 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 | /*==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 web
hiện tại ta sử dụng đến phần đông nhất là vạch CSS cho phần #container và chia cột cho phần #menu để nó hiển thị bên trái giống như hình. Ở ví dụ này mình 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 | /*==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ĩ ở #container mình có padding-left là vì mình mong 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 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.
vạch CSS cho #menu
ngày nay mình sẽ thường xuyên làm cái thực đơn cho nó hiển thị xinh hơn một xíu như hình dùng thử vậy. trước hết là xóa các phong cách của danh mục mặc định đi và xóa margin, padding.
01 02 03 04 05 06 | /*==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.
01 02 03 04 | #menu ul li line-height: 2.9em;height: 2.9em; |
Tiếp đến là chuyển các thẻ link về dạng block, thêm màu chữ và các style linh tinh.
01 02 03 04 05 06 | #menu li a display: block;color: #fff;padding: 0 1em;border-bottom: 1px solid #333; |
Cuối cùng là thêm phong cách khi rê chuột vào từng thực đơn.
01 02 03 | #menu li:hover background-color: #454545; |
Kết quả:
viết CSS chung cho #content
kế tiếp là ta cần giải quyết 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 content 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 | /*==Trang trí khung content==*/#content padding: 1em 8em;#header,.call-to-action text-align: center; |
Và thêm màu chữ bậy bạ cho thằng slogan để nó có điểm click xíu, slogan mà lị.
01 02 03 04 05 06 | /*==Trang trí header của content==*/#header{}#slogan color: #8997A0;font-size: 0.8em; |
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 | /*==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 .row để nó hiển thị thành 3 cột. đầu tiên là thêm overflow: tự động cho .row để nó có thể clear float và margin để nó mẹo xa các phần tử khác một tí.
01 02 03 04 05 | /*==Chia cột phần content==*/.row overflow: auto;margin: 1.5em auto; |
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 để hướng dẫn xa nhau ra. Riêng phần .row .col:last-child nghĩa là mình lựa 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 | /*==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à vạch 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 | /* phong cách cho hình */.row .col img float: left;margin-right: 1em; |
kết quả ta có:
kết quả sau khi viết CSS cho #content
viết CSS cho #footer
Phần này thì easy rồi, ta chỉ là muốn giảm click 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 | /*==Footer==*/#footer font-size: 85%;border-top: 1px solid #E6E6E6;color: #838383;padding: 1em 3em; |
hiệu quả cho đến nay thì y hệt giống như ảnh phía trên đó. dễ dàng phải không nào? ?
tải mã nguồn
Chúc bạn thành công!Từ các văn hóa mà bạn đã biết được ở 21 phần trước trong serie Học CSS cơ bản, bạn đủ nội lực đã 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 để design giao diện cho web. Vậy tại sao chúng ta lại k vận dụng toàn bộ để thực hành xây dựng một giao diện dễ dàng chứ? Bởi vì bạn cần biết rằng học CSS là tiến trình không ngừng nghỉ, đủ nội lực bạn thuộc hết các tính chất và mẹo dùng nó, nhưng điều đó k có nghĩa là bạn tự tin mình đủ nội lực làm được một giao diện trước khi tự tay làm một cái.
Mặc dù giao diện mình sẽ hướng dẫn bạn làm ở đây chỉ là ở mức dễ dàng thôi, nhưng hãy tin mình đi vì chỉ với bấy nhiêu thôi vừa mớ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ông giống trên internet.
Tài nguyên khởi đầu
Trước khi bắt đầu sử dụng theo các hướng dẫn này thì bạn hãy tải về một số tiền cần thiết dưới đây, nó gồm có 4 bức hình và file normalize.css để reset CSS.
đăng starter resources
khởi đầu
bây giờ bạn hãy tạo một thư mục riêng và sao chép file normalize.css và thư mục img vào. Sau đó tạo thêm file index.html (tập tin website) và phong cách.css (chứa các CSS của website).
Tạo các thư mục quan trọng
hiện giờ hãy xây dựng file index.html lên và bắt đầu vạch HTML cho website nhé.
Việc trước hết bạn cần vạch 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ẻ
, cặp và cặp.
01 02 03 04 05 06 07 08 09 | DOCTYPE html><html lang="vi"><head>head><body>body>html> |
Thêm các thẻ khai báo thông tin
bây giờ chúng ta sẽ khiến từ trên xuống dưới, đầu tiên mình sẽ khai báo thông tin về tài liệu web này giống như đầu bài, mô tả và quan trọng nhất là gắn hai tập tin phong cách.css và normalize.css vào để nó đọc CSS trong đó.
giống 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 ebook HTML tropng cặp thẻ
.
01 02 03 04 05 06 07 08 09 | <head><meta charset="utf-8" /><tit>Thach Pham Blogtít><meta name="description" nội dung="Thực hành tạo layout bằng HTML và CSS cơ bản" /><meta name="author" content="ThachPham" /><meta name="keyword" content="hoc css,css co ban,css layout" /><link type="text/css" rel="stylesheet" href="style.css" /><liên kết type="text/css" rel="stylesheet" href="normalize.css" />head> |
Tạo các khu vực trong web
ngày nay việc cần thiết nhất là bạn phải ước lượng được bố cục của web như thế nào để tiến hành xây dựng các thẻ
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ẻ
nào lồng vào thẻ nào để tiện lợi nhất cho việc vạch CSS.hiện nay bạn hãy Nhìn tấm hình ở đầu bài, sẽ thấy nó có một số yếu tố 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ẻ
với các id và class giống như sau. lưu ý là sử dụng class hay id thì tùy các bạn nhưng mình like sử 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 dùng cho nguyên nhân không giống.
#container: Khung này sẽ bao phủ toàn trang để khi bạn mong muốn chỉnh chiều rộng của web 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ị thực đơn màu đen bên tay trái.#content: Khu vực hiển thị content bên phải.#header: Hiển thị logo và cái slogan của web 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ẻ
.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <body><div id="container"><div id="menu">div><div id="content"><div id="header"><div id="logo">div><div id="slogan">div>div><div class="call-to-action">div><div class="row"><div id="box1" class="col">div><div id="box2" class="col">div><div id="box3" class="col">div>div>div><div id="footer">div>div>body> |
lưu ý cho mình một điều là các chỗ mình ghi là các câu lệnh ghi chú trong HTML để bạn dễ Quan sát sau này khi tài liệu có nhiều thẻ
chứ nó không có ý nghĩa gì trên trình duyệt.
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 content cho từng yếu tố vì không ai vừa viết thẻ vừa vạch CSS cả mà chỉ nên viết CSS sau khi hoàn thiện nội dung HTML.
Xem thêm : Hướng dẫn thiết kế web bằng wordpress mới nhất 2020
Phần #menu
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 mục như sau trong khu vực #menu.
01 02 03 04 05 06 07 08 09 10 | <div id="menu"><ul><li><a href="#">Trang chủa>li><li><a href="#">Dịch vụa>li><li><a href="#">Sản phẩma>li><li><a href="#">Tin tứca>li><li><a href="#">Diễn đàna>li><li><a href="#">Liên hệa>li>ul>div> |
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ẽ khiến từng phần một:
Phần #header
Ở phần này chúng ta sẽ chèn một tấm hình tên là tplogo2014.png trong thư mục img/ và một cái slogan giống như sau:
01 02 03 04 | <div id="header"><div id="logo"><img src="img/tplogo2014.png" />div><div id="slogan"><h3><a href="https://thachpham.com/series/html-co-ban" data-wpel-link="internal">Học HTMLa> và CSS cơ bản miễn phíh3>div>div> |
Phần .call-to-action
Phần này chúng ta cũng có một số content dễ dàng như sau:
01 02 03 04 05 | <div class="call-to-action"><h3>Bạn sẽ được học những gì?h3><p>Nếu bạn là người mới tìm hiểu về web thì serie này sẽ làm các bạn ảnh dung rõ hơn việc sử dụng một giao diện web tĩnh bằng HTML và CSS vì tất cả giao diện web đều dùng HTML & CSS để lên bố cục cho giao diện, giúp bạn tự làm một giao diện web cho riêng mình.p>div> |
Phần .row
Phần này chúng ta sẽ có 3 cột cần có 3 phần con bên trong nữa, ở gợi ý này thì mình cho 3 cột với content giống y hệt nhau nhé mà chỉ khác hình ảnh thôi.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | <div class="row"><div id="box1" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/css-icon.png" alt="CSS" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div><div id="box2" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/url-icon.png" alt="URL" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div><div id="box3" class="col"><h2>Lorem ipsum dolor sit ameth2><img src="img/html-icon.png" alt="HTML" /><p>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 in metus bibendum congue. Pellentesque ultrices vestibulum mattis. Aliquam egestas nunc at ullamcorper ultricies. Donec feugiat velit nulla, vel sodales est ullamcorper id.p>div>div> |
Phần #footer
Phần footer thì chúng ta chỉ dễ dàng là có content như này thôi.
01 02 03 | <div id="footer"><p>Copyright © 2015 - Serie học HTML & CSS cơ bản tại www.thachpham.com.p>div> |
hiện giờ ta đang có một văn bản thuần HTML giống như ảnh.
Okay, hiện tại 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 nguyên nhân theo thứ tự từ lớn đến bé và từ trên xuống dưới cho easy sử dụng việc.
Đoạn CSS trước tiên bạn nên viết đó là thiết lập các tính chất cơ bản cho website như kiểu chữ, màu chữ, size chữ, thêm box-sizing,…Ta vạch đoạn đầu tiên giống như sau:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 | /*==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
ngày nay ta làm đến phần lớn nhất là vạch CSS cho phần #container và chia cột cho phần #menu để nó hiển thị bên trái giống như ảnh. Ở gợi ý này mình sử dụng khung thực đơn 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 | /*==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ĩ ở #container mình có padding-left là vì mình mong 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 dùng kiểu hiển thị là fixed để nó đứng cố định trên trang.
hiệu quả ban đầu ta được thế này.
vạch CSS cho #menu
hiện giờ mình sẽ liên tục làm cái thực đơn cho nó hiển thị đẹp hơn một xíu giống như hình demo vậy. trước tiên là xóa các phong cách của danh mục mặc định đi và xóa margin, padding.
01 02 03 04 05 06 | /*==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.
01 02 03 04 | #menu ul li line-height: 2.9em;height: 2.9em; |
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 | #menu li a display: block;color: #fff;padding: 0 1em;border-bottom: 1px solid #333; |
Cuối cùng là thêm style khi rê chuột vào từng thực đơn.
01 02 03 | #menu li:hover background-color: #454545; |
Kết quả:
vạch CSS chung cho #content
kế tiếp là ta cần xử lý tiếp phần #content một xíu cho nó gọn gẽ lại bằng cách thêm padding để nó lùi về giữa một 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 | /*==Trang trí khung content==*/#content padding: 1em 8em;#header,.call-to-action text-align: center; |
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 | /*==Trang trí header của content==*/#header{}#slogan color: #8997A0;font-size: 0.8em; |
kế tiếp 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 | /*==Call lớn 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 .row để nó hiển thị thành 3 cột. đầu tiên là thêm overflow: auto cho .row để nó có thể clear float và margin để nó hướng dẫn xa các phần tử khác một tí.
01 02 03 04 05 | /*==Chia cột phần content==*/.row overflow: tự động;margin: 1.5em tự động; |
kế tiếp là viết CSS cho class .col nằm trong đây để nó float qua bên trái và thêm margin quan trọng để hướng dẫn xa nhau ra. Riêng phần .row .col:last-child nghĩa là mình lựa 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 | /*==Chia cột phần content==*/.row overflow: tự động;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à vạch CSS nốt cho mấy cái hình bên trong cho nó float qua bên trái chữ.
01 02 03 04 05 | /* style cho hình */.row .col img float: left;margin-right: 1em; |
kết quả ta có:
hiệu quả sau khi vạch 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 | /*==Footer==*/#footer font-size: 85%;border-top: 1px solid #E6E6E6;color: #838383;padding: 1em 3em; |
kết quả hiện giờ thì y hệt như ảnh phía trên đó. không khó khăn phải không nào? ?
đăng mã nguồn
Chúc bạn thành công!
Nguồn : https://thachpham.com
