• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Cách thiết kế giao diện web bằng css mới nhất 2020

ATPMedia Bởi ATPMedia
3 năm cách đây
Trong Kiến thức SEO, Kiến thức xây dựng website, Tài liệu làm web
Trang chủ Kiến thức SEO

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

Thiết Kế Giao Diện Web Bằng Css

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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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).

Cách thiết kế giao diện web bằng css mới nhất 2020Tạ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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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ả:

Cách thiết kế giao diện web bằng css mới nhất 2020

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ó:

Cách thiết kế giao diện web bằng css mới nhất 2020kế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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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).

Cách thiết kế giao diện web bằng css mới nhất 2020Tạ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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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.

Cách thiết kế giao diện web bằng css mới nhất 2020

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ả:

Cách thiết kế giao diện web bằng css mới nhất 2020

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ó:

Cách thiết kế giao diện web bằng css mới nhất 2020hiệ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

 

Tags: bố cục trang web bằng csscode giao dien web htmlcode thiết kế web bằng htmlhướng dẫn thiết kế website bán hàng bằng htmltạo giao diện web đơn giản bằng html và cssthiết kế giao diện web bằng cssthiết kế layout cho website với html5 và css3thiết kế web đơn giản bằng htmlthiết kế website bằng html và css
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Học Thiết Kế Web Online Miễn Phí

Tổng hợp các trang học thiết kế web online miễn phí mới nhất 2020

Cách Thiết Kế Web

​Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.​

Chuyên mục

  • Xây Dựng Website
  • Bảo Mật Website
  • Dịch Vụ Chăm Sóc Website
  • Source Web
  • Tài Liệu Làm Web
  • Khai báo sitemap

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Top Vui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.