Trong hướng dẫn này, chúng ta sẽ tạo một trang sản phẩm trang web bằng HTML, CSS3 và jQuery. Bạn có thể sử dụng nó để giới thiệu sản phẩm trên trang web cửa hàng của mình
Trong hướng dẫn này, chúng tôi sẽ sử dụng Google Fonts, cụ thể là Roboto. Đảm bảo bao gồm kiểu chữ trước khi bạn bắt đầu
Mục lục ẩn
HTML
CSS
JS
Tải xuống trang web Trang sản phẩm
HTML
Bước đầu tiên là tạo cấu trúc HTML. Đây là những gì chúng ta cần
Hai cột
- Hình ảnh tai nghe [**ở bên trái**]
- Mô tả và tùy chỉnh tai nghe [**ở bên phải**]
- Trong phần này, chúng ta sẽ có nhiều yếu tố hơn [**nút, radio, liên kết**]
Ok, hãy bọc mọi thứ trong một `. lớp container`
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Đây là đánh dấu
HeadphonesBeats EP
The preferred choice of a vast range of acclaimed DJs. Punchy, bass-focused sound and high isolation. Sturdy headband and on-ear cushions suitable for live performance
ColorCable configurationStraight Coiled Long-coiledHow to configurate your headphones148$ Add to cart
Bây giờ, hãy chuyển sang bước tiếp theo, nơi chúng tôi sẽ làm cho nó trông thật tuyệt
CSS
Thêm kiểu dáng cơ bản cho cơ thể
/* Basic Styling */ html, body { height: 100%; width: 100%; margin: 0; font-family: 'Roboto', sans-serif; } .container { max-width: 1200px; margin: 0 auto; padding: 15px; display: flex; }
Lưu ý rằng `. vùng chứa` đã được đặt thành `hiển thị. flex` sẽ căn chỉnh các cột
Bây giờ, hãy thêm một số chiều rộng vào các cột và `vị trí. họ hàng` cái `. cột bên trái`, bởi vì chúng tôi sẽ `định vị. tuyệt đối` các hình ảnh
/* Columns */ .left-column { width: 65%; position: relative; } .right-column { width: 35%; margin-top: 60px; }
Tuyệt vời. Hãy tạo kiểu cho cột đầu tiên, đó là `. cột bên trái`. Cột này có ba hình ảnh, ba tai nghe với các màu khác nhau. Chúng tôi sẽ cung cấp cho họ `độ mờ. 0` và cũng thêm một lớp `. hoạt động` trên chúng với `độ mờ. 1`, mà chúng ta sẽ cần nó sau trong hướng dẫn này
/* Left Column */ .left-column img { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; transition: all 0.3s ease; } .left-column img.active { opacity: 1; }
Tạo kiểu cho `. phải-colum` bây giờ. Bắt đầu bằng `. mô tả sản phẩm` nơi chúng tôi mô tả sản phẩm
/* Product Description */ .product-description { border-bottom: 1px solid #E1E8EE; margin-bottom: 20px; } .product-description span { font-size: 12px; color: #358ED7; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; } .product-description h1 { font-weight: 300; font-size: 52px; color: #43484D; letter-spacing: -2px; } .product-description p { font-size: 16px; font-weight: 300; color: #86939E; line-height: 24px; }
Bây giờ, chúng ta cần định kiểu cấu hình màu sản phẩm
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Ở đây, chúng tôi có ba đầu vào radio, chúng tôi sẽ tạo kiểu cho chúng trông đẹp mắt. Mỗi đầu vào sẽ có một màu phù hợp với màu của tai nghe. Chúng tôi sẽ sử dụng `. đã chọn` để thêm biểu tượng đã chọn trên đầu vào radio đã chọn, `. đã kiểm tra` là một tính năng tuyệt vời mà CSS cung cấp
/* Product Color */ .product-color { margin-bottom: 30px; } .color-choose div { display: inline-block; } .color-choose input[type="radio"] { display: none; } .color-choose input[type="radio"] + label span { display: inline-block; width: 40px; height: 40px; margin: -1px 4px 0 0; vertical-align: middle; cursor: pointer; border-radius: 50%; } .color-choose input[type="radio"] + label span { border: 2px solid #FFFFFF; box-shadow: 0 1px 3px 0 rgba[0,0,0,0.33]; } .color-choose input[type="radio"]#red + label span { background-color: #C91524; } .color-choose input[type="radio"]#blue + label span { background-color: #314780; } .color-choose input[type="radio"]#black + label span { background-color: #323232; } .color-choose input[type="radio"]:checked + label span { background-image: url[images/check-icn.svg]; background-repeat: no-repeat; background-position: center; }
Tốt. Bây giờ, hãy tạo kiểu cho `. phần cấu hình cáp`. Chúng tôi có ba nút và một liên kết. Hãy tạo kiểu cho trạng thái của họ và làm cho họ trông đẹp mắt
/* Cable Configuration */ .cable-choose { margin-bottom: 20px; } .cable-choose button { border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; } .cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus { border: 2px solid #86939E; outline: none; } .cable-config { border-bottom: 1px solid #E1E8EE; margin-bottom: 20px; } .cable-config a { color: #358ED7; text-decoration: none; font-size: 12px; position: relative; margin: 10px 0; display: inline-block; } .cable-config a:before { content: "?"; height: 15px; width: 15px; border-radius: 50%; border: 2px solid rgba[53, 142, 215, 0.5]; display: inline-block; text-align: center; line-height: 16px; opacity: 0.5; margin-right: 5px; }
Điều cuối cùng cần làm là tạo kiểu cho phần cuối cùng của cột này, đó là `. giá sản phẩm`
/* Product Price */ .product-price { display: flex; align-items: center; } .product-price span { font-size: 26px; font-weight: 300; color: #43474D; margin-right: 20px; } .cart-btn { display: inline-block; background-color: #7DC855; border-radius: 6px; font-size: 16px; color: #FFFFFF; text-decoration: none; padding: 12px 30px; transition: all .5s; } .cart-btn:hover { background-color: #64af3d; }
Đáng kinh ngạc. Đây là những gì chúng tôi đã đạt được cho đến nay
Hãy thêm khả năng phản hồi nữa
________số 8JS
Điều cuối cùng chúng ta cần làm là làm cho hình ảnh thay đổi khi chúng ta nhấp vào một màu để màu đầu vào radio đã chọn khớp với màu của tai nghe. Điều này sử dụng jQuery, vì vậy hãy đảm bảo đưa nó vào dự án của bạn. Chúng tôi sẽ sử dụng các thuộc tính dữ liệu để làm việc với
Lưu ý rằng chúng tôi thêm lớp `. đang hoạt động`. Tôi đã đề cập trước đó mỗi khi chúng tôi nhấp vào màu phù hợp
$[document].ready[function[] { $['.color-choose input'].on['click', function[] { var headphonesColor = $[this].attr['data-image']; $['.active'].removeClass['active']; $['.left-column img[data-image = ' + headphonesColor + ']'].addClass['active']; $[this].addClass['active']; }]; }];
Tải xuống trang web Trang sản phẩm
Đáng kinh ngạc. Chúng tôi đã làm ở đây. Hãy sử dụng điều này trong các dự án của bạn. Hãy xem bản demo và cho tôi biết suy nghĩ của bạn trong phần bình luận