Các bài tập đơn giản cắt html css bằng bootstrap năm 2024

Question

Dạo gần đây mình có làm 1 task cắt HTML, CSS và mình cảm thấy nó khá là thú vị. HTML và CSS thì chắc chắn chẳng xa lạ gì với mấy đứa biết code, nhưng khi thực sự bắt tay vào làm mới thấy phát sinh rất nhiều vấn đề, và thay vì phải mò mẫm như mình, mình sẽ hướng dẫn các bạn step-by-step để biến một file PSD thành giao diện web với HTML, CSS.

Bài viết này chỉ sử dụng CSS3 và HTML5, không sử dụng bất kì frameworks nào khác như Bootstrap hay Zurb Foundation. Sử dụng framework lẽ dĩ nhiên nhanh hơn nhiều, nhưng nếu CSS thuần bạn ngon rồi, thì dùng hay ko dùng framework chỉ là chuyện nhỏ, bạn sẽ không bị phụ thuộc vào nó.

Đây là trang web mà hôm nay chúng ta sẽ làm

Các bài tập đơn giản cắt html css bằng bootstrap năm 2024

Để bắt đầu, hãy download file PSD ở đây, sau đó mở nó trong PTS.

Tạo một thư mục với tên project mà bạn thích. Tại đây, tạo 2 thư mục: css (cho các file css) và images (cho ảnh).

Tiếp theo, mở phần mềm để code và tạo 2 file. File đầu tiên là index.html. Đây là giao diện chính của trang web, để nó ở thư mục gốc. Tạo file style.css trong thư mục css, đây là nơi chúng ta sẽ viết css để định dạng giao diện cho file index.html.

Giờ thì bắt đầu với những dòng đầu tiên mà file HTML nào cũng phải có:




  
  Insight
  
  


    Sample text

Trong đoạn code trên có 1 đoạn

a {
    text-decoration: none;
}

0, nó sẽ cần thiết khi mà dùng các trình duyệt cũ như IE8 trở xuống. Nếu không quan tâm đến trình duyệt có thể bỏ qua.

Giờ mở file index.html trên trình duyệt, bạn sẽ thấy 1 dòng chữ "Sample text".

Giờ nhìn vào design và thử chia nó thành các phần. Phía trên cùng, bạn sẽ thấy 1 thanh màu đen với logo và navigation menu. Bạn có thể gọi nó là

a {
    text-decoration: none;
}

1. Tiếp theo là một khối bức ảnh và dòng chữ quảng cáo, hãy gọi nó là

a {
    text-decoration: none;
}

2. Sau đó là một khoảng màu trắng với nội dung chính, chúng ta có thể gọi nó là

a {
    text-decoration: none;
}

3 (hoặc bất cứ tên nào bạn thích). Cuối cùng cũng là dưới cùng _

a {
    text-decoration: none;
}

4.

Giờ hãy bắt đầu với các khối chính




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

Thêm style cho nó. Đầu tiên, sử dụng Eric Meyer tool để reset toàn bộ thuộc tính của các thẻ tag. Chỉ cần copy và dán vào đầu file CSS (tin mình đi, cái này không thừa tí nào đâu, mấy cái margin, padding mặc định làm mình muốn phát điên). Sau đó thêm đoạn này, bạn có thể đọc về nó rõ hơn ở đây:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Giờ, bỏ các gạch chân ở thẻ

a {
    text-decoration: none;
}

5, và lưu ý là đừng bao giờ tự động thêm gạch chân dù là

a {
    text-decoration: none;
}

6,

a {
    text-decoration: none;
}

7,... nếu không được yêu cầu.

a {
    text-decoration: none;
}

Giờ mở PTS và đo chiều rộng của trang, dùng "Rectangular Marquee Tool" hoặc ấn

a {
    text-decoration: none;
}

8.

Theo bảng thông tin hoặc điểm trỏ chuột vào chúng ta thấy được chiều rộng là 1140px, nó cũng là chiều rộng của

a {
    text-decoration: none;
}

9.

Nếu nhìn kĩ hơn, bạn có thể nhận ra phần header và footer có cùng background. Ẩn grid đi bằng cách ấn

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

0 và phóng to design lên để tìm phần tử được lặp lại. Chọn và copy nó bằng cách ấn

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

1.

Sau đó tạo 1 file mới, dán phần vừa copy vào, và lưu nó bằng cách ấn

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

2, chọn lưu vào thư mực images với tên bg-texture.jpg. Tiếp theo enable Eyedropper Tool và click vào footer. Giờ bạn đã có mã màu của khối màu tối, chúng ta sẽ set

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

3 cho nó, trong trường hợp bg-texture.jpg chưa được tải lên.

Thêm vào file css:

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

Giờ refresh trình duyệt, đây là những gì bạn thấy:

Giờ lưu bức ảnh ở khối

a {
    text-decoration: none;
}

2 và đặt tên bg-hero.jpg. Đo chiều cao của bức ảnh đã lưu (465px) và thêm vào file css

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

Giờ bạn đã thêm bức ảnh đó vào giữa khối

a {
    text-decoration: none;
}

2 bằng cách setting 50% - 50%. Thuộc tính

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

6 yêu cầu trình duyệt kéo bức ảnh tới kích thước tối đa theo chiều rộng hoặc chiều cao, nó sẽ giúp bức ảnh ko bị méo.

Đây sẽ là những gì bạn nhìn thấy

Giờ tiếp tục với phần header. Lưu ảnh logo và đặt tên logo.png. Phần code HTML cho header sẽ như thế này:


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

Quay lại trình duyệt

Giờ là lúc tạo style cho các phần tử này. Đo khoảng cách phía trên giữa logo và đầu trang trong PTS, thêm css:

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

Giờ đến slogan

Font chữ là "Time New Roman", size 16px, in nghiêng và màu trắng với opacity 35%.

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}

Tiếp theo đến phần navigation. Mỗi phần tử có một icon riêng. Để tiết kiệm thời gian tải trang, hãy tạo 1 sprite (chứa nhiều ảnh) từ các icon, trình duyệt sẽ chỉ phải load 1 ảnh thay vì 3 ảnh. Để làm được điều đó, tạo 1 file mới trong PTS và ném các icon vào đấy. Lưu dưới tên nav-icons.png.

Tiếp theo là viết css cho phần menu. Bạn cần set menu bên tay trái nên chúng ta sẽ sử dụng

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

7. Các thẻ

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

8 mặc định là sẽ xếp hàng dọc , chúng ta có thể cho nó thành 1 dòng bằng cách thêm

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

9 (hoặc là sử dụng

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

0). Ngăn cách giữa các item trong menu có 1 đường kẻ màu xám, nên thêm

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

1 cho mỗi item.

.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid 
# 2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}

Kết quả thế này

Như bạn thấy, các thành phần đã ở đúng vị trí của nó, nhưng header và background lại bị mất. Đó là do thuộc tính float của các thành phần bên trong header. Bạn chỉ cần sửa 1 chút phần

a {
    text-decoration: none;
}

9 bởi vì nó là phần tử cha của những phần tử đang được dùng

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

3




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

0

Mọi thứ lại hoạt động bình thường

Giờ thêm stype cho menu




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

1

Còn 1 điều cần lưu ý là font chữ, click vào text link để xem font chữ. Nhưng nếu trong máy bạn không có font chữ đấy thì sao? Đừng lo lắng, click vào đấy nó sẽ báo cho bạn là bạn đang thiếu font chữ gì, nhớ click nhiều chỗ trên design để xem luôn kiểu chữ và độ dày nhé

Giờ vào trang Google fonts direction và tìm font đó

chọn kiểu

Giờ chỉ cần copy cái link này và dán vào trong

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

4




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

2

Giờ bạn có thể sử dụng font này trong file Css với thuộc tính

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

5. Vì nó là font chính của trang nên có thể để luôn vào thẻ

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

6




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

3

Giờ refresh lại trình duyệt để thấy sự khác biệt. Được 1/3 rồi đấy, không khó nhỉ?

Thêm một chút hiệu ứng khi di chuột vào menu




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

4

Giờ thêm icon cho các item trong menu bằng cách dùng pseudo-element




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

5

Mỗi item trong menu thì lại có icon riêng, nên chúng ta cần tìm ra vị trí và size của từng icon, dễ nhất là dùng tool này. Upload ảnh lên, click vào icon, nó sẽ trả về size và vị trí của icon đó.

Copy các giá trị và dán vào file CSS




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

6

Vậy là xong cái menu

Tiếp tục với phần

a {
    text-decoration: none;
}

2. Thêm nội dung HTML trước.




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

7

Đo size và độ dày của text, lề và line height trong PTS. Tất cả text đều màu trắng và căn giữa nên có thể thêm

.hero {
    background: 
# 333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

8 vào

a {
    text-decoration: none;
}

2




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

8

Giờ là cách tạo ra button. Mình đã tạo button bằng thẻ tag

a {
    text-decoration: none;
}

5 với class chung là


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

1, và class riêng cho 2 màu là


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

2 và


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

3 cho mỗi màu.




  
  Insight
  
  


    
        
            header is here
        
    
    
        
            hero content is here
        
    
    
        
            middle content is here
        
    
    
        
            footer is here

9

Sử dụng


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

4 để bo tròn góc và


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

5 để đổ bóng cho button.

Giờ đến phần footer. Thêm classs


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

6 cho từng cột, mỗi cột thêm tiêu đề bằng thẻ


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

7 và danh sách các link.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

0

Thêm margin phía trên và phía dưới footer và thêm style cho tiêu đề và danh sách

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

1

Còn phải thêm icon của các mạng xã hội. Bạn có thể cắt nó từ bức ảnh và dán vào code hoặc sử dụng background-image cho link, nhưng tiện nhất là dùng icon font. Để làm được điều này, sử dụng tool sau

Chọn icon bạn cần, chọn size, màu sắc, link đến đâu. Tiếp theo click vào button socicon.zip để download file. Giờ bạn đã có 1 folder font mới trong project, giải nén chúng, sau đó copy HTML, dán vào ngay sau thẻ


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

8. Chỉnh lại size cho phù hợp với design trong


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

9.

Bổ sung nốt phần copyright

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

2

Phù, dài quá phải không, sắp xong rồi, chịu khó đọc tiếp nhé. Giờ ta sẽ bắt tay vào phần cuối cùng là phần nội dung chính của trang.

Nếu nhìn kĩ 3 khối này, sẽ thấy nó giống nhau, chỉ khác nội dung. Vì vậy chúng ta chỉ cần tạo 1 khối, thêm style cho nó, nhân nó lên và thêm nội dung cần thiết. Lưu các bức ảnh trong 3 khối dưới dạng jpg. Giờ, viết HTML và dán những bức ảnh vừa lưu vào. Tạo

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

0 và dán 3 khối

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

1 bên trong.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

3

Một lần nữa, chúng ta thêm

.container {
    width: 1140px;
    margin: 0 auto;
}
.header,
.footer {
    background: 
# 15181f url(../images/bg-texture.jpg) repeat;
    color: 
# fff;
}
.middle {
    background: 
# fff;
}

9 để 3 khối xếp hàng ngang và nhớ thêm

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

3 cho thằng cha.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

4

Đo độ rộng mỗi khối nhỏ là 351px và khoảng cách giữa các khối là 43px. Chúng ta sẽ set

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

4 trừ khối đầu tiên.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

5

Thêm

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

5 và

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

6 phía ngoài các khối nhỏ, thông số cụ thể xem trong PTS, có một chút bo tròn nhỏ ở góc nên cần cả


    
        
        your nice slogan
        
            
                How it works
                Sign up
                Login

4.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

6

Gần xong, còn thiếu vài cái đường gạch ngang phía dưới mỗi khối

Để thêm được cái này, ta lại sử dụng pseudo-selector :after và :before.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

7

Giờ F5 và xem kết quả

Đến khối tiếp theo, ở đây cũng có 3 phần, mỗi phần lại có 1 bức ảnh hình tròn cùng với tiêu đề và ngày. Làm tương tự giống như cái trên. Lấy bức ảnh từ pts và biến nó thành hình tròn bằng cách sử dụng

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

8. Ta sẽ gọi khối to nhất bên ngoài là

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

9, mỗi khối bên trong là

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}

0, và nhớ đừng quên thêm

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

3.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

8

Kết quả

Còn khối cuối cùng ta sẽ dùng

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}

2 cho danh sách các ảnh và thẻ

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}

3 cho phần tiêu đề. Ở đây có 1 cái hiệu ứng là khi di vào ảnh nó sẽ hiện rõ ra, nhưng khi lưu ảnh bạn vẫn phải lưu độ trong suốt 100% nhé, ta sẽ dùng thuộc tính opacity cho cái này.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

9

Vậy là xong rồi đó, giờ bạn đã biết cách chuyển từ file PSD thành HTML rồi chứ? Tất nhiên mỗi trang 1 kiểu, đây chỉ là 1 ví dụ rất nhỏ và đơn giản để bạn hiểu các bước cần thực hiện. Hy vọng bài viết sẽ giúp ích bạn phần nào, có thể down toàn bộ source code ở đây nhé.

mẹo hay Khỏe Đẹp Bài tập Bootstrap Bootstrap 5

Các bài tập đơn giản cắt html css bằng bootstrap năm 2024

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội