Cách xây dựng bố cục lát gạch bằng CSS (Phần 3)

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

---

Trong hướng dẫn này, bạn sẽ tạo lại bố cục lát gạch của phần “Dự án” của trang web trình diễn bằng cách tạo kiểu tám containers HTML <div> với các lớp CSS . Bạn cũng sẽ thêm lớp giả hover vào các phần tử này để chúng thay đổi màu sắc khi user di chuột qua chúng. Thoải mái chuyển đổi thông tin của Sammy nếu bạn muốn cá nhân hóa kích thước. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS / HTML khác.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Thêm và tạo kiểu cho tiêu đề Header

Để bắt đầu, hãy thêm tiêu đề đầu đề “Dự án” vào phần mới trên trang web, đảm bảo không xóa bất kỳ nội dung nào bạn đã thêm từ các hướng dẫn trước. Thêm đoạn mã sau vào sau thẻ đóng </div> cuối cùng trong index.html :

. . . <!--Section 3: Projects-->    <h2 >Projects</h2> . . . 

Dòng đầu tiên của đoạn mã này là comment để gắn nhãn mã bạn sẽ thêm vào để tạo phần thứ ba của trang web. Comment được sử dụng để lưu các ghi chú giải thích về mã của bạn để tham khảo trong tương lai và không được trình duyệt hiển thị cho khách truy cập trang web (trừ khi họ xem mã nguồn của trang web). Dòng thứ hai thêm văn bản tiêu đề “Dự án” và gán cho nó thành phần tiêu đề <h2> .

Tiếp theo, bạn sẽ tạo kiểu cho tiêu đề phần bằng cách tạo một lớp section-heading . Quay lại file styles.css và copy paste đoạn mã sau vào cuối file :

. . .  /*  Section 3  */  .section-heading {   text-align:center;   color:#102C4E;   margin-top: 150px;   margin-bottom:70px;   font-size: 35px; } 

Đoạn mã này xác định kiểu cho lớp section-heading . Vui lòng xem lại các phần trước trong loạt bài hướng dẫn này về cách đặt kích thước của nội dung , phần đệm và lề .

Tiếp theo, bạn sẽ thêm lớp “section-header” vào tiêu đề tiêu đề “Projects” trong file HTML. Quay lại index.html và thêm lớp vào phần tử HTML như sau:

<!--Section 3: Projects—>    <h2 class="section-heading">Projects</h2> 

Lưu cả hai file và tải trang web trong trình duyệt. Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước hướng dẫn của ta Cách xem file HTML offline trong trình duyệt của bạn . Bây giờ tiêu đề phải được căn giữa trên trang và kích thước, vị trí và màu sắc của nó sẽ được điều chỉnh như trong hình ảnh sau:

Thêm và tạo kiểu hộp dự án lát gạch

Đến đây bạn sẽ thêm tám hộp dự án bên dưới tiêu đề phần. Để bắt đầu, bạn sẽ tạo một lớp CSS cho phép ta tạo kiểu cho các containers <div> theo cách cho phép bốn trong số chúng nằm cạnh nhau trên trang web.

Quay lại file styles.css và thêm đoạn mã sau vào cuối tài liệu:

. . . /* Sizing for Project Containers  */  .column-4 {   float: left;   width: 21%;   padding: 10px;   margin:20px;   height: 250px; } 

Trong đoạn mã này, bạn đã xác định column-4 lớp column-4 và chỉ định các giá trị cho phép bốn cột được hiển thị cạnh nhau trên trang:

• float: left; khai báo hướng dẫn phần tử trôi về phía bên trái của containers mà nó nằm bên trong (trong trường hợp này là trang web) trong khi cho phép nội dung xung quanh (trong trường hợp này là các hộp dự án khác) nằm ở phía bên phải của nó.
• width: 21%; khai báo đặt chiều rộng của phần tử thành 21% chiều rộng của containers , trong trường hợp này là trang web. Đặt kích thước (chẳng hạn như chiều rộng) theo phần trăm thay vì pixel có thể hữu ích khi bạn muốn phần tử thay đổi kích thước theo kích thước của containers mà nó bên trong. Tuy nhiên, lưu ý định cỡ động có thể là một quá trình phức tạp — có nhiều phương pháp để tạo các phần tử đáp ứng có thể được triển khai sau khi cài đặt nền tảng trong CSS.
• Nếu bạn muốn tìm hiểu thêm về các khai báo khác, vui lòng xem lại các phần trước trong loạt bài hướng dẫn này về cách đặt kích thước của nội dung , phần đệm và lề .
  

Tiếp theo, bạn sẽ tạo một lớp cho mỗi hộp trong số tám hộp để bạn có thể tạo kiểu cho chúng khác nhau, cũng như thêm hình ảnh nổi bật vào hộp đầu tiên và hộp cuối cùng để phù hợp với trang trình diễn. Để bắt đầu, hãy lưu một hoặc hai hình ảnh để sử dụng làm hình ảnh nổi bật trong folder hình ảnh của bạn. Nếu bạn chưa có hình ảnh, bạn có thể download hình ảnh của rô bốt quay mặt phải và rô bốt quay mặt trái mà bạn đã sử dụng trong trang web trình diễn.

Lưu ý : Để download hình ảnh robot, hãy truy cập liên kết và nhấp vào CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) vào hình ảnh và chọn “Lưu hình ảnh dưới dạng” và lưu nó dưới dạng project-left.jpeg và 'project- right.jpeg 'vào folder hình ảnh của bạn.

Để tạo một lớp cho mỗi hộp dự án, hãy thêm đoạn mã sau vào cuối file styles.css của bạn:

. . .  /* Color and Images for Project Containers  */  .project-1 {   background: url('../images/project-left.jpeg');   background-size: cover; }  .project-2 {   background-color:white; }  .project-3 {   background-color:#209BFF; }  .project-4 {   background-color:#112d4e; }  .project-5 {   background-color:#F9F7F7; }  .project-6 {   background-color:#209BFF; }  .project-7 {     background-color:#ffffff00; }  .project-8 {   background: url('../images/project-right.jpeg');   background-size: cover; } 

Nếu bạn đang sử dụng hình ảnh của riêng mình, hãy đảm bảo bạn đã lưu chúng vào folder hình ảnh của bạn và bạn đã chỉ định đường dẫn file chính xác trong vùng được đánh dấu trong bộ luật cho lớp project-1 và project-8 lớp project-8 .

Hãy tạm dừng một chút để xem lại đoạn mã ta vừa viết. Trong bộ luật cho lớp project-1 và project-8 , bạn đã thêm một hình nền, chỉ định vị trí đường dẫn file của nó và tuyên bố rằng hình nền phải được trang bị để “bao phủ” toàn bộ phần tử.

Trong bộ luật cho project-2 đến project-7 , bạn đã chỉ định các màu nền khác nhau bằng mã màu HTML. Lưu ý bạn đã đặt màu nền trong suốt cho project-7 như một lựa chọn thiết kế, nhưng bạn có thể thay đổi tùy chọn này theo ý muốn. Bạn cũng có thể khám phá các hình nền và màu sắc khác nhau cho từng lớp này bằng cách thử nghiệm các giá trị của chúng.

Tiếp theo, bạn sẽ thêm một bộ luật thay đổi kích thước phông chữ và vị trí của văn bản sẽ được thêm vào các hộp dự án này. Thêm bộ luật sau vào cuối file styles.css :

. . . .project-text {   text-align:center;   font-size:50px; } 

Lưu file styles.css của bạn. Đến đây bạn sẽ thêm các containers <div> vào trang HTML và tạo kiểu cho chúng bằng các lớp CSS mà bạn vừa xác định. Quay lại index.html và thêm đoạn mã sau vào bên dưới dòng này: <h2 class="section-heading">Projects</h2> :

. . . <div class="column-4 project-1"> </div>  <div class="column-4 project-2">   <h2 class="project-text">WEB <br>DESIGN</h2> </div>  <div class="column-4 project-3">   <h2 class="project-text">CHAT <br>BOTS</h2> </div>  <div class="column-4 project-4">   <h2 class="project-text">GAME <br> DESIGN</h2> </div>  <div class="column-4 project-5">   <h2 class="project-text">TEXT <br> ANALYSIS</h2> </div>  <div class="column-4 project-6">   <h2 class="project-text">JAVA <br> SCRIPT</h2> </div>  <div class="column-4 project-7">   <h2 class="project-text">DATA <br> PRIVACY</h2> </div>  <div class="column-4 project-8"> </div> 

Lưu index.html của bạn và reload trong trình duyệt. Bạn sẽ nhận được kết quả như hình sau:

Bạn nên có hai hàng gồm bốn hộp, mỗi hàng được tạo kiểu theo các lớp column-4 và lớp project-x mà chúng đã được chỉ định với thuộc tính lớp. Trong mã HTML, bạn cũng đã thêm nội dung văn bản (chẳng hạn như “CHAT BOTS”) và gán tất cả nội dung văn bản là văn bản project-text. lớp project-text.

Bạn cũng đã thêm phần tử ngắt dòng HTML ( <br> ) để tạo dấu ngắt dòng giữa hai từ trong mỗi hộp. Vui lòng thay đổi văn bản này ngay bây giờ hoặc sau này nếu bạn muốn cá nhân hóa trang web của bạn . Bạn cũng có thể sử dụng phần tử siêu liên kết <a> để liên kết văn bản này với các trang mới mà bạn tạo cho trang web của bạn . Bạn sẽ khám phá tùy chọn này chi tiết hơn ở cuối loạt bài hướng dẫn.

Tiếp theo, bạn sẽ thêm một lớp giả để làm cho các hộp thay đổi màu sắc khi user di con trỏ qua chúng.

Thay đổi màu nội dung với sự tương tác của user

Nếu bạn quay lại trang web trình diễn và di con trỏ qua các hộp trong phần “Dự án”, bạn sẽ nhận thấy rằng chúng thay đổi màu sắc. Sự thay đổi màu này đạt được bằng cách thêm lớp giả hover vào mỗi lớp dự án.

Như bạn có thể nhớ lại nếu bạn đã làm theo hướng dẫn về lớp giả trước đó trong loạt bài này, lớp giả được tạo bằng cách thêm dấu hai chấm và tên lớp giả vào tên của lớp bạn đang cố gắng sửa đổi. Để thêm :hover pseudo-class vào các lớp của dự án, hãy thêm các bộ luật sau vào cuối file styles.css của bạn:

. . .  /* Hover classes for individual project boxes */  .project-2:hover {   background-color:#FEDE00; }  .project-3:hover {    background-color: #FEDE00; }  .project-4:hover {    background-color: #FEDE00; }  .project-5:hover {    background-color: #FEDE00; }  .project-6:hover {    background-color: #FEDE00; }  .project-7:hover {    background-color: #FEDE00; } 

Trong đoạn mã này, bạn đã tạo các lớp hover cho sáu trong tám lớp dự án. Lớp hover này hướng dẫn phần tử thay đổi màu của nó thành mã màu HTML #FEDE00 khi user di con trỏ qua hộp. Lưu ý bạn chỉ thêm lớp di chuột vào các hộp dự án có chứa văn bản (và không thêm vào các hộp dự án chứa hình nền).

Lưu file styles.css và reload index.html trong trình duyệt. Kiểm tra đảm bảo rằng lớp giả hover đang hoạt động bằng cách di con trỏ của bạn qua các hộp dự án. Chúng sẽ thay đổi màu khi con trỏ của bạn lướt qua chúng:

Kết luận

Đến đây bạn đã sắp xếp nội dung HTML trong các hộp sử dụng các lớp CSS và thêm một lớp giả hover để thay đổi giao diện của chúng khi con trỏ của user di chuột qua chúng. Bạn có thể tiếp tục thử nghiệm với các phương pháp này bằng cách thay đổi khai báo kiểu trong các lớp này hoặc thay đổi kích thước và số lượng hộp bạn sử dụng để sắp xếp bố cục trang của bạn .

Trong hướng dẫn tiếp theo, bạn sẽ thêm phần “Việc làm” vào trang web bằng cách sử dụng bảng HTML.

---

---

Các tin liên quan

Cách tạo hộp trích dẫn nổi bật trên trang web của bạn bằng CSS (Phần 6)
2020-10-14
Cách thêm phần sơ yếu lý lịch hoặc lịch sử việc làm vào trang web của bạn bằng CSS (Phần 4)
2020-10-14
Cách xây dựng phần Giới thiệu về bản thân trên trang web của bạn bằng CSS (Phần 2)
2020-10-14
Cách xây dựng nhiều thanh bên cố định xếp chồng với CSS thuần túy và Bootstrap 4
2020-10-14
Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13