21 Đoạn mã HTML & CSS có giá trị dành cho nhà phát triển web

Nhà lập trình web luôn tìm cách cải thiện quy trình làm việc của họ và làm cho cuộc sống của họ dễ dàng hơn. Dưới đây là 21 đoạn mã HTML & CSS hữu ích có thể giúp hợp lý hóa các tác vụ phát triển web hàng ngày. Các đoạn mã này rất thiết thực, tiết kiệm thời gian và có thể dễ dàng tùy chỉnh để phù hợp với nhu cầu của bạn.

Khám phá Bộ sưu tập các đoạn mã thực tế

1. Menu điều hướng đáp ứng

Menu điều hướng đáp ứng là điều cần thiết để có trải nghiệm người dùng liền mạch trên các thiết bị khác nhau. Đây là đoạn mã HTML & CSS đơn giản để tạo menu điều hướng đáp ứng:

<nav class="navbar">
   <a href="#home">Home</a> 
   <a href="#about">About</a> 
   <a href="#services">Services</a> 
   <a href="#contact">Contact</a> 
</nav>
<style>
   .navbar {
      display: flex;
      justify-content: space-around;
      background-color: #333;
      padding: 1rem;
   }

   .navbar a {
      color: white;
      text-decoration: none;
      padding: 0.5rem;
   }

   .navbar a:hover {
      background-color: #ddd;
      color: black;
   }
</style>

2. Đặt lại CSS

Áp dụng đặt lại CSS có thể giúp đảm bảo rằng trang web của bạn trông nhất quán trên các trình duyệt khác nhau. Đây là đoạn mã thiết lập lại CSS đơn giản để bắt đầu:

 * { margin: 0; padding: 0; box-sizing: border-box; }

3. Căn giữa một phần tử theo chiều dọc và chiều ngang

Sử dụng Flexbox để dễ dàng căn giữa một phần tử theo cả chiều dọc và chiều ngang trong vùng chứa của nó:

 .container { display: flex; justify-content: center; align-items: center; height: 100vh; }

4. Chú giải công cụ CSS

Tạo một tooltip đơn giản chỉ sử dụng HTML và CSS:

<span class="tooltip">
   Hover over me 
   <span class="tooltiptext">Tooltip text</span> 
</span>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }

   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      padding: 5px;
      border-radius: 6px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }

   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style> 

5. Các nút sành điệu

Thêm một số nét tinh tế cho các nút của bạn bằng đoạn mã CSS đơn giản này:

<style>
   .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      padding: 10px 24px;
      border-radius: 8px;
      transition: background-color 0.3s;
   }

   .button:hover {
      background-color: #45a049;
   }
</style> 

6. Di chuyển mượt mà lên trên cùng

Triển khai hiệu ứng cuộn mượt mà để điều hướng đến đầu trang web của bạn:

<a href="#top" class="scroll-to-top">Back to Top</a>
<style>
   html {
      scroll-behavior: smooth;
   }

   .scroll-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      text-decoration: none;
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border-radius: 8px;
   }
</style> 

7. Thư viện hình ảnh đáp ứng

Tạo một thư viện hình ảnh đáp ứng bằng CSS Grid:

 <div class="image-gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .image-gallery img { width: 100%; height: auto; }

8. Tiêu đề bảng cố định

Giữ cố định tiêu đề bảng trong khi cuộn qua nội dung bảng:

<table class="fixed-header">
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
   </thead>
   <tbody> <!-- Table Content --> </tbody>
</table>
<style>
   .fixed-header {
      width: 100%;
      border-collapse: collapse;
   }

   .fixed-header thead {
      position: sticky;
      top: 0;
      background-color: #f1f1f1;
   }
</style> 

9. Ảnh nền toàn màn hình

Đặt hình nền toàn màn hình cho trang web của bạn:

body {
      background-image: url('background.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100vh;
   }

10. Chân trang dính

Giữ chân trang của bạn ở cuối trang ngay cả khi không có đủ nội dung để lấp đầy khung nhìn:

 <div class="page-container"> <div class="content-wrap"> <!-- Your main content here --> </div> <footer>Footer content</footer> </div> .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; }

11. Bố cục thẻ

Tạo bố cục thẻ hiện đại để hiển thị nội dung bằng Flexbox:

<div class="card"> <img src="image.jpg" alt="Card image">
   <div class="card-content">
      <h3>Card Title</h3>
      <p>Card description.</p>
   </div>
</div>
<style>
   .card {
      display: flex;
      flex-direction: column;
      width: 300px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
   }

   .card img {
      width: 100%;
      height: auto;
   }

   .card-content {
      padding: 1rem;
   }
</style>

12. Bánh mì vụn

Tạo điều hướng breadcrumb đơn giản bằng HTML và CSS:

<nav class="breadcrumbs">
   <a href="#home">Home</a>
   <a href="#section1">Section 1</a>
   <a href="#section2">Section 2</a>
</nav>
<style>
   .breadcrumbs {
      padding: 1rem;
   }

   .breadcrumbs a {
      text-decoration: none;
      color: #3498db;
   }

   .breadcrumbs a:hover {
      text-decoration: underline;
   }
</style>

13. Đàn accordion đơn giản

Tạo đàn accordion đơn giản bằng HTML và CSS:

<button class="accordion">Section 1</button>
<div class="panel">
   <p>Section 1 content.</p>
</div> <button class="accordion">Section 2</button>
<div class="panel">
   <p>Section 2 content.</p>
</div>
<style>
   .accordion {
      cursor: pointer;
      width: 100%;
      text-align: left;
      outline: none;
      transition: 0.4s;
   }

   .panel {
      display: none;
      overflow: hidden;
      transition: max-height 0.2s;
   }
</style> 

14. Phân trang đơn giản

Tạo điều hướng phân trang đơn giản bằng HTML và CSS:

<nav class="pagination"><a href="#prev">« Prev</a> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#next">Next »</a> </nav>
<style>
   .pagination {
      display: inline-block;
      padding: 1rem;
   }

   .pagination a {
      color: #3498db;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
      transition: background-color .3s;
      border: 1px solid #ddd;
   }

   .pagination a:hover {
      background-color: #f1f1f1;
   }

   .pagination a.active {
      background-color: #3498db;
      color: white;
      border: 1px solid #3498db;
   }
</style>

15. Nhúng video đáp ứng

Tạo nhúng video đáp ứng bằng HTML và CSS:

 <div class="video-container"> 
<iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> 
</div> 
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

16. Trình tải CSS

Tạo một trình tải CSS đơn giản cho trang web của bạn:

 <div class="loader"></div> .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

17. Hiệu ứng cuộn thị sai

Thêm hiệu ứng cuộn thị sai đơn giản vào trang web của bạn:

<div class="parallax"></div>
<style>
   .parallax {
      background-image: url("your-image.jpg");
      min-height: 500px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
   }
</style>

18. Hệ thống lưới Flexbox

Tạo một hệ thống lưới Flexbox đơn giản cho trang web của bạn:

<div class="row">
   <div class="col">Column 1</div>
   <div class="col">Column 2</div>
   <div class="col">Column 3</div>
</div>
<style>
   .row {
      display: flex;
      flex-wrap: wrap;
      margin-left: -15px;
      margin-right: -15px;
   }

   .col {
      flex: 1;
      padding-left: 15px;
      padding-right: 15px;
   }
</style>

19. Chỉ báo cuộn động

Tạo chỉ báo cuộn động để cho người dùng biết họ đã cuộn được bao xa:

 <div class="progress-container"> <div class="progress-bar"></div> </div> .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; }

20. Hiệu ứng bộ lọc CSS

Áp dụng hiệu ứng bộ lọc CSS cho hình ảnh của bạn:

 <img src="your-image.jpg" alt="Your Image" class="filter"> .filter { filter: grayscale(100%); }

21. Tích hợp Google Fonts

Tích hợp Google Fonts vào trang web của bạn:

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> body { font-family: 'Roboto', sans-serif; }

Những 21 đoạn mã HTML và CSS mà tôi chia sẻ dưới đây có thể là nguồn tài nguyên hữu ích để cải thiện dự án phát triển web của bạn và tối ưu hóa quy trình làm việc. Hãy giữ chúng ở một nơi thuận tiện để có thể tham khảo nhanh chóng. Đồng thời, đừng ngần ngại điều chỉnh và sửa đổi chúng để phù hợp với nhu cầu cụ thể của bạn. Đây là một cách hiệu quả để tận dụng những đoạn mã đã có sẵn và thích ứng chúng theo yêu cầu cụ thể của từng dự án.

(Công cụ test code online: Simple Online Code Editor)