Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)

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 phần “Giáo dục” và phần “Kỹ năng” (hoặc phần thứ năm) của trang web trình diễn bằng cách sử dụng bảng HTML và các lớp CSS. Hãy tự ý chuyển thông tin của Sammy ra nếu bạn muốn cá nhân hóa trang web của bạn . 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.

Để xây dựng các phần này, bạn sẽ tạo một lớp CSS tạo kiểu cho hai hộp nội dung có kích thước bằng nhau có thể nằm cạnh nhau trên trang web. Sau đó, bạn sẽ thêm một bảng bên trong mỗi hộp, nơi bạn sẽ thêm nội dung văn bản.

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 .

Tạo và tạo kiểu cho hai bảng có kích thước bằng nhau

Trước tiên, hãy copy paste đoạn mã sau vào cuối file styles.css của bạn:

. . .  /* Fifth section */  .column-2a {   float: left;   width: 45%;   padding: 40px;   padding-left:70px;   padding-right: 70px;   padding-bottom:60px;   height:450px;   margin:30px;   margin-right:30px;   margin-bottom: 40px;   background-color:white; } 

Đoạn mã này tạo lớp column-2a , giống như lớp column-2 mà bạn đã tạo để tạo kiểu cho phần “Giới thiệu” trong hướng dẫn trước của loạt bài này, ngoại trừ thuộc tính chiều cao của nó được đặt thành 450px. Nếu bạn thay đổi lượng nội dung trong ô này, bạn có thể cần phải điều chỉnh độ cao cho phù hợp, nếu không nó có thể bị tràn hoặc bị cắt. 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ề .

Lưu file styles.css trước khi bạn tiếp tục.

Tiếp theo, quay lại index.html và dán đoạn mã sau vào sau thẻ đóng </div> cuối cùng:

. . .  <!--Section 5: Education and Skills-->  <div class="column-2a">   <h2>Education</h2>     <table class="table-style">       <tr>         <td>Barnacle Bootcamp</td>         <td>2020</td>       </tr>       <tr>         <td>Seaweed University</td>         <td>2019-2020</td>       </tr>       <tr>         <td>Highwater High School</td>         <td>2018-2019</td>       </tr>       <tr>         <td>Middle-Sized Pond Middle School</td>         <td>2017-2018</td>       </tr>       <tr>           <td>Minnow Elementary School</td>         <td>2016-2017</td>       </tr>           <tr>         <td>Phytoplankton Preschool</td>         <td>2015-2016</td>       </tr>     </table> </div> 

Đoạn mã này tạo một cột bằng cách sử dụng lớp “column-2a” và chèn một bảng được tạo kiểu với lớp table-style đã tạo trong hướng dẫn trước . Bên trong bảng, bạn đã đặt nội dung Lịch sử giáo dục của bạn . Thẻ <tr> mở ra một hàng bảng trong đó ba bộ dữ liệu bảng sau (được đánh dấu bằng <td> ) được chèn vào. Để đọc thêm về cách hoạt động của bảng HTML, vui lòng truy cập hướng dẫn của ta Cách tạo bảng bằng HTML

Lưu file và reload trình duyệt của bạn để kiểm tra xem bảng có hiển thị chính xác không. Bạn sẽ có bảng như ảnh chụp màn hình sau:

Tiếp theo, bạn sẽ thêm bảng thứ hai liệt kê các kỹ năng của Sammy. Quay lại index.html và dán đoạn mã sau vào sau </div> đóng cuối cùng:

. . .    <div class="column-2a">      <h2>Skills</h2>     <table class="table-style">       <tr>         <td>Social Media</td>         <td>⭐⭐⭐⭐⭐</td>       </tr>       <tr>         <td>Public Speaking</td>         <td>⭐⭐⭐⭐⭐</td>       </tr>       <tr>         <td>Internet Ethics Ambassador</td>         <td>⭐⭐⭐⭐</td>       </tr>       <tr>         <td>Content production</td>         <td>⭐⭐⭐⭐⭐</td>       </tr>       <tr>         <td> HTML</td>         <td>⭐⭐⭐</td>       </tr>       <tr>         <td> CSS</td>         <td>⭐⭐⭐</td>       </tr>     </table>   </div> 

Đoạn mã này hoạt động giống hệt như đoạn mã trước đó: nó tạo một cột bằng cách sử dụng lớp column-2a và chèn một bảng được tạo kiểu với lớp table-style . Lưu ý bạn đang sử dụng biểu tượng cảm xúc để tạo hình ảnh ngôi sao. Bạn có thể sử dụng bất kỳ biểu tượng cảm xúc nào làm nội dung văn bản HTML.

Lưu file và reload trình duyệt của bạn để kiểm tra xem bảng có hiển thị chính xác không. Đến đây bạn sẽ có hai bảng hiển thị cạnh nhau như trong hình ảnh ở đầu hướng dẫn này.

Kết luận

Đến đây bạn đã thêm nội dung văn bản bằng cách sử dụng các bảng được tạo kiểu. Bạn có thể thử nghiệm với việc định cỡ và thêm hàng và cột để tùy chỉnh bảng cho các mục đích khác nhau. Trong hướng dẫn tiếp theo, bạn sẽ tạo một hộp nội dung với một trích dẫn lớn trên trang web .

---

---

Các tin liên quan

Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
Cách hiểu và tạo quy tắc CSS
2020-10-12
So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Tích hợp và sử dụng các khung CSS với Vue.js
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23