Các nhà phát triển 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. Trong bài viết này, chúng tôi sẽ giới thiệu 21 đoạn mã   &   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. HTML CSS  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> .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; }  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> .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; }  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:   .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; }  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> 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; }  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>  </tbody> </table> .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; }  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">  </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> .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; }  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> .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; }  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> .accordion { cursor: pointer; width: 100%; text-align: left; outline: none; transition: 0.4s; } .panel { display: none; overflow: hidden; transition: max-height 0.2s; }  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> .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; }  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> .parallax { background-image: url("your-image.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }  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> .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { flex: 1; padding-left: 15px; padding-right: 15px; }  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; }  21 đoạn mã HTML và CSS hữu ích này có thể giúp bạn nâng cao các dự án phát triển web và hợp lý hóa quy trình làm việc của mình. Giữ chúng ở nơi thuận tiện để dễ dàng tham khảo và đừng ngần ngại sửa đổi và điều chỉnh chúng để phù hợp với nhu cầu cụ thể của bạn.  Cũng được xuất bản   . ở đây

This story contains new, firsthand information uncovered by the writer.

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

184 Stories To Learn About Psychology

72 Stories To Learn About The Essays Of Adam Smith

179 Stories To Learn About Reading

128 Stories To Learn About Charles Dickens

184 Stories To Learn About Psychology

72 Stories To Learn About The Essays Of Adam Smith

179 Stories To Learn About Reading

128 Stories To Learn About Charles Dickens

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps