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

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: Home About Services Contact .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: Hover over me Tooltip text .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: Back to Top 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: .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: Header 1 Header 2 Header 3 .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: Footer content .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: Card Title Card description.

.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: Home > Section 1 > Section 2 .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: Section 1 Section 1 content.

Section 2 Section 2 content.

.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: « Prev 1 2 3 4 Next » .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: .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: .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: .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: Column 1 Column 2 Column 3 .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: .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: .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: 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