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)

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 “Việc làm” của trang web trình diễn (hoặc phần thứ tư) bằng cách sử dụng các bảng HTML và các lớp CSS. 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.

Để xây dựng phần này, bạn sẽ thêm và tạo kiểu cho tiêu đề phần, thêm và tạo kiểu cho một cột rộng cũng như thêm và tạo kiểu cho một bảng HTML bên trong cột.

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 Ngắt phần và Tiêu đề Phần

Để bắt đầu, hãy tạo một lớp sẽ thêm khoảng trống giữa nội dung trong phần “Dự án” trước đó và phần “Việc làm” này. Thêm comment CSS sau và bộ luật CSS vào cuối file styles.css của bạn:

. . .  /* Section 4 */  /* Add space between sections */ .section-break {   margin:50px;   height:500px; } 

Trong đoạn mã này, bạn đã thêm một comment CSS gắn nhãn các bộ luật CSS cho “Phần 4” và một comment CSS giải thích mục đích của lớp section-break . Bạn sẽ gán lớp này cho một <div> trống trong index.html , nó sẽ cung cấp cho nó chiều cao 500 pixel và lề 50 pixel. Mặc dù <div> sẽ ẩn nhưng chiều cao của nó sẽ hoạt động như một dấu ngắt phần bằng cách đẩy nội dung tiếp theo 500 pixel xuống trang.

Quay lại index.html của bạn và thêm đoạn mã sau:

. . .  <!--Section 4: Employment—>  <div class="section-break"> </div> <h2 class="section-heading">Experience</h2> 

Đoạn mã này thêm một chú thích HTML để gắn nhãn mã HTML được sử dụng cho phần thứ tư của trang web và thêm một containers <div> được chỉ định lớp section-break mà bạn vừa tạo. Đoạn mã cũng thêm tiêu đề phần “Trải nghiệm” và tạo kiểu cho nó bằng cách sử dụng section-heading lớp mà bạn đã tạo trong hướng dẫn trước Cách tạo một bố cục lát bằng CSS .

Lưu ý : Nếu bạn chưa theo dõi loạt bài hướng dẫn này , bạn có thể thêm lớp section-heading vào file styles.css của bạn bằng cách thêm đoạn mã sau vào cuối file :

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

Lưu index.html của bạn và tải nó trong trình duyệt. Đến đây bạn sẽ có một tiêu đề phần có tên “Trải nghiệm” sau dấu ngắt phần:

Tạo kiểu cho một cột và bảng rộng

Tiếp theo, bạn sẽ tạo các lớp cho phép bạn tạo kiểu cho cột màu trắng rộng và bảng bạn sẽ đặt bên trong nó. Thêm đoạn mã sau vào cuối file styles.css :

. . .  /* Wide column */ .column-1 {   width: 90%;   height: auto;   padding-top:70px;   padding-left:70px;   padding-bottom:70px;   margin:auto;   margin-bottom:50px;   margin-top: 75px;   background-color:white; }  /* Table formatting */ .table-style {   width:100%;   border-spacing: 24px; } 

Trong bộ luật đầu tiên, bạn đã khai báo một số luật kiểu cho column-1 lớp column-1 . Lưu ý bạn đã chỉ định width theo tỷ lệ phần trăm để cột sẽ thay đổi kích thước theo chiều rộng của khung nhìn. Bạn đã chỉ định height thành auto , điều này sẽ cho phép bảng điều chỉnh chiều cao của nó theo nhu cầu chiều cao của nội dung HTML bạn đặt bên trong. Bạn cũng đã tạo một luật để làm cho màu nền của <div> được gán cho lớp này là white .

Nếu bạn muốn tìm hiểu thêm về các khai báo khác trong bộ luật này, 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ề .

Trong bộ luật thứ hai, bạn đã xác định kiểu table-style lớp và khai báo một số luật . Khai báo width:100% làm cho chiều rộng của bảng chiếm toàn bộ chiều rộng của containers mà nó nằm trong đó, đây sẽ là cột rộng mà bạn đang tạo. border-spacing:24px; khai báo đặt 24 pixel không gian giữa các ô của bảng, cho phép nội dung của bảng chiếm chiều rộng của cột. Nếu bạn không bao gồm luật này, mỗi ô trong bảng sẽ gần nhau hơn nhiều.

Thêm cột và bảng

Đến đây bạn sẽ thêm cột và bảng vào file HTML. Lưu file styles.css của bạn, quay lại index.html và thêm đoạn mã sau ngay dưới dòng mã HTML <h2 class="section-heading">Experience</h2> :

. . .  <div class="column-1">   <h2>Employment</h2>   <table class="table-style">      <tr>       <td>Freelance designer</td>       <td>Seven Seas</td>       <td>2015-present</td>    </tr>     <tr>       <td>Associate Sea Creature</td>       <td>Small Pond Productions</td>       <td>2019-2020</td>    </tr>    <tr>       <td>Associate Surfer</td>       <td>Open Watery Web</td>       <td>2018-2019</td>    </tr>    <tr>       <td>Open Web Advocate</td>       <td>Kiddie Pool Kubernetes</td>       <td>2017-2018</td>    </tr>    <tr>       <td>Assistant Shark</td>       <td>Small Pond Pictures</td>       <td>2016-2017</td>    </tr>   </table>  </div> </div> 

Trong đoạn mã này, bạn đã thêm một containers <div> được tạo kiểu theo lớp column-1 và đặt một bảng HTML bên trong được tạo kiểu với lớp table-style . Bên trong bảng, bạn đã đặt nội dung Lịch sử việc làm. 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 cả hai file và reload trang web trong trình duyệt. Trang web bây giờ sẽ có một cột rộng duy nhất chứa một bảng có bốn hàng và ba cột như hình ở đầu hướng dẫn này.

Lưu ý ba phần tử <td> đầu tiên được chèn vào giữa bộ <tr> mở và đóng đầu tiên. Bạn có thể tiếp tục thêm các hàng bằng cách sử dụng cùng một hàng trong bảng và định dạng dữ liệu và chiều cao của cột sẽ điều chỉnh tương ứng vì bạn đã đặt height thành auto cho lớp column-1 . Hoặc, bạn có thể thêm các cột bổ sung bằng cách thêm các phần tử <td> bên trong các hàng <tr> .

Kết luận

Đến đây bạn đã tạo và tạo kiểu một bảng bằng CSS để hiển thị nội dung lịch sử việc làm trong một bố cục có cấu trúc. 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ẽ tiếp tục khám phá các khả năng bố trí bảng bằng cách tạo một bảng cho “Học vấn” và “Kỹ năng”.

---

---

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 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 xây dựng bố cục lát gạch bằng CSS (Phần 3)
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