Thiết kế trang chi tiết sản phẩm html css
|
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 HTMLBướ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
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
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 CSSThê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 quá. 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 |
