Trong hướng dẫn này, chúng ta sẽ tạo Giỏ hàng bằng HTML và CSS3. Chúng tôi sẽ sử dụng Google Fonts cho hướng dẫn này, cụ thể hơn là “Roboto. ”
Mục lục
HTML
Bước 1. Hãy tạo cấu trúc HTML của chúng ta
Trước tiên, chúng tôi cần một div vùng chứa mà chúng tôi sẽ gọi là “. giỏ hàng”
Bên trong vùng chứa, chúng tôi sẽ có một tiêu đề và ba mục sẽ bao gồm
- hai nút — nút xóa và nút yêu thích
- Hình ảnh sản phẩm
- tên sản phẩm và mô tả
- các nút sẽ điều chỉnh số lượng sản phẩm
- Tổng giá
CSS
Đảm bảo rằng bạn bao gồm phông chữ chúng tôi sử dụng cho hướng dẫn này
Bây giờ, hãy thêm một số phong cách cho cơ thể của chúng ta với các dòng sau
Tuyệt vời, bây giờ hãy tạo Giỏ hàng của chúng ta có kích thước 750×423 và tạo kiểu cho nó trông thật đẹp. Lưu ý rằng chúng tôi đang sử dụng flexbox, vì vậy chúng tôi đặt nó để hiển thị flex và tạo cột hướng flex, vì theo mặc định, hướng flex được đặt là hàng
Trình tạo mẫu email trực tuyến
Với Bưu thiếp, bạn có thể tạo và chỉnh sửa các mẫu email trực tuyến mà không cần bất kỳ kỹ năng viết mã nào. Bao gồm hơn 100 thành phần giúp bạn tạo các mẫu email tùy chỉnh nhanh hơn bao giờ hết
Dùng thử miễn phíSản phẩm khác.shopping-cart { width: 750px; height: 423px; margin: 80px auto; background: #FFFFFF; box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10); border-radius: 6px; display: flex; flex-direction: column; }Tiếp theo, hãy tạo kiểu cho mục đầu tiên, đó là tiêu đề, bằng cách thay đổi chiều cao thành 60px và tạo cho nó một số kiểu dáng cơ bản, và ba mục tiếp theo là các sản phẩm trong giỏ hàng, sẽ làm cho chúng có chiều cao 120px mỗi mục và đặt chúng hiển thị linh hoạt
.title { height: 60px; border-bottom: 1px solid #E1E8EE; padding: 20px 30px; color: #5E6977; font-size: 18px; font-weight: 400; } .item { padding: 20px 30px; height: 120px; display: flex; } .item:nth-child(3) { border-top: 1px solid #E1E8EE; border-bottom: 1px solid #E1E8EE; }Bây giờ chúng tôi đã tạo kiểu cấu trúc cơ bản cho giỏ hàng của mình
Hãy tạo kiểu cho các sản phẩm của chúng ta theo thứ tự
Các yếu tố đầu tiên là các nút xóa và yêu thích
Tôi luôn yêu thích hoạt hình nút trái tim của Twitter, tôi nghĩ nó sẽ trông rất tuyệt trên Giỏ hàng của chúng ta, hãy triển khai nó
Chúng tôi đặt lớp “đang hoạt động” khi chúng tôi nhấp vào nút để tạo hoạt ảnh cho nó bằng jQuery, nhưng đây là phần tiếp theo
.is-active { animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards; } @keyframes animate { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: right; } }Tiếp theo, là hình ảnh sản phẩm cần lề phải 50px
.image { margin-right: 50px; } Let’s add some basic style to product name and description. .description { padding-top: 10px; margin-right: 60px; width: 115px; } .description span { display: block; font-size: 14px; color: #43484D; font-weight: 400; } .description span:first-child { margin-bottom: 5px; } .description span:last-child { font-weight: 300; margin-top: 8px; color: #86939E; }Sau đó, chúng ta cần thêm một yếu tố số lượng, trong đó chúng ta có hai nút để thêm hoặc xóa số lượng sản phẩm. Đầu tiên, tạo CSS và sau đó chúng tôi sẽ làm cho nó hoạt động bằng cách thêm một số JavaScript
.quantity { padding-top: 20px; margin-right: 60px; } .quantity input { -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300; } button[class*=btn] { width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer; } .minus-btn img { margin-bottom: 3px; } .plus-btn img { margin-top: 2px; } button:focus, input:focus { outline:0; }Và cuối cùng, đó là tổng giá của sản phẩm
________số 8_______Hãy cũng làm cho nó phản hồi nhanh bằng cách thêm các dòng mã sau
Tạo trang web với Trình tạo trực tuyến của chúng tôi
Với Ứng dụng Khởi động và Ứng dụng Trang trình bày, bạn có thể tạo trang web không giới hạn bằng trình chỉnh sửa trang web trực tuyến bao gồm các thành phần, mẫu và chủ đề được mã hóa và thiết kế sẵn
Try Startup App Try Slides AppSản phẩm khác@media (max-width: 800px) { .shopping-cart { width: 100%; height: auto; overflow: hidden; } .item { height: auto; flex-wrap: wrap; justify-content: center; } .image img { width: 50%; } .image, .quantity, .description { width: 100%; text-align: center; margin: 6px 0; } .buttons { margin-right: 20px; } }Đó là nó cho CSS
JavaScript
Hãy làm cho trái tim sinh động khi chúng ta nhấp vào nó bằng cách thêm đoạn mã sau
* { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; background-color: #7EC855; font-family: 'Roboto', sans-serif; } 0Mát mẻ. Bây giờ hãy làm cho các nút âm lượng hoạt động
* { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; background-color: #7EC855; font-family: 'Roboto', sans-serif; } 1Và đây là phiên bản cuối cùng của chúng tôi
Hướng dẫn đã xong. Tôi hy vọng bạn thích nó và học được điều gì đó mới. Nếu bạn có bất kỳ câu hỏi nào, ping tôi