ساخت صفحه نمایش محصولات با HTML5 ,Css3
در این اموزش می خواهیم با نحوه ساخت صفحه نمایش محصولات سایت با استفاده از html و Css3 آشنا شویم.شما میتوانید از این صفحه برای نمایش محصولات فروشگاه اینترنتی خودتان نیز استفاده کنید.
شروع ساخت صفحه نمایش محصولات :
قدم اول:ساخت سند html برای ایجاد دو ستون یکی جهت نمایش تصویر محصول و ستون دومی برای نمایش توضیحات رنگ و دکمه خرید محصول خواهد بود.(بر روی تمامی کدهای HTML ستون ها و کابرد هر بخش توضیح داده شده است).
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. Codefriend.ir دوست برنامه نویس من --> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <!-- Left Column / Headphones Image --> <div class="left-column"> <img data-image="red" class="active" src="red ep.png" alt=""> </div> <!-- Right Column --> <div class="right-column"> <!-- Product Description --> <div class="product-description"> <span>Headphones</span> <h1>Beats EP</h1> <p>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</p> </div> <!-- Product Configuration --> <div class="product-configuration"> <!-- Product Color --> <div class="product-color"> <span>Color</span> <div class="color-choose"> <div> <input data-image="red" type="radio" id="red" name="color" value="red" checked> <label for="red"><span></span></label> </div> </div> </div> <!-- Cable Configuration --> <div class="cable-config"> <span>Cable configuration</span> <div class="cable-choose"> <button>Straight</button> <button>Coiled</button> <button>Long-coiled</button> </div> <a href="#">How to configurate your headphones</a> </div> </div> <!-- Product Pricing --> <div class="product-price"> <span>148$</span> <a href="#" class="cart-btn">Add to cart</a> </div> </div> </main> </body> </html>
در قدم دوم می خواهیم یک ظاهر زیبا به صفحه محصولات وب سایت با استفاده از Css اضافه کنیم.از استایل دهی به عناصر پایه شروع میکنیم(عناصری مثل Body,Container)
/* Created on : May 21, 2017, 12:26:44 PM Author : Codefriend.ir */ /* 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; }
قدم سوم استایل دهی به ستون ها یا Columns.دقت داشته باشید که ستون سمت چپ مربوط به نمایش تصویر محصول مدنظرمان است.
/* Columns */ .left-column { width: 65%; position: relative; } .right-column { width: 35%; margin-top: 60px; } /* 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; }
قدم چهارم برای ستون سمت راست جهت نمایش محتوا یا توضیحتات محصول می باشد.
/* 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; }
قدم پنجم رو اختصاص میدیم به ایجاد رنگ برای محصول مدنظر،در این جا ما تنها برای محصول رنگ قرمز را انتخاب کردیم اما شما میتوانید چند رنگ مختلف را جهت نمایش محصول انتخاب کنید.(برای تغییر رنگ آشنایی مقدماتی با jQuery نیاز است.)
/* 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; } /* 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; }
قدم ششم استایل دهی به دکمه افزودن به سبد کالا و نمایش قیمت محصول است.
/* 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; }
و قدم آخر هم واکنش گرایی یا ریسپانسیو کردن صفحه است تا با تمامی نمایشگرها هماهنگ باشد.از دستور media@ برای ایجاد یک اندازه استاندارد برای صفحه نمایش و تعیریف نحوه نمایش عناصر در اندازه استاندارد رو مشخص میکنیم.
/* Responsive */ @media (max-width: 940px) { .container { flex-direction: column; margin-top: 60px; } .left-column, .right-column { width: 100%; } .left-column img { width: 300px; right: 0; top: -65px; left: initial; } } @media (max-width: 535px) { .left-column img { width: 220px; top: -85px; } }
خیلی عالی تا به اینجا توانستیم با ساخت صفحه نمایش محصولات زیبا و بروز رو طراحی کنیم.و در آخر اگر میخواهید برای محصولتان از چندین رنگ استفاده کنید از کدهای جی کوئری زیر میتوانید بهره ببرید.
$(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'); }); });
به همین راحتی.می توانید دموی کامل آموزش را در این صفحه مشاهده کنید.
برچسب:آموزش responsive, آموزش آنلاین رایگان, آموزش برنامه نویسی کامپیوتر مقدماتی, آموزش طراحی سایت واکنش گرا, آموزش کدهای طراحی سایت ریسپانسیو, اموزش ریسپانسیو کردن, اموزش طراحی وب, اموزش واکنش گرایی, اینترنتی, بازار کار برنامه نویسی در ایران, برنامه نویس شدن, برنامه نویسی برای مبتدیان, برنامه نویسی را با چه زبانی شروع کنیم, چگونه برنامه نویسی را یاد بگیریم, چگونه میتوان یک برنامه نویس حرفه ای شد؟, دستور media@, دوره انلاین جاوا اسکریپت, ریسپانسیو کردن, ساخت سند html, ساخت صفحه محصولات در ووکامرس, ساخت صفحه نمایش محصولات, ساخت منوی کشویی در css, سامانه آموزش آنلاین, طراحی, طراحی صفحات وب پیشرفته, طراحی نسخه ریسپانسیو سایت با استفاده از HTML و CSS, طراحی وب, فروشگاه, فیلم آموزش جاوا اسکریپت, کد ریسپانسیو در css, کد ریسپانسیو قالب, منابع آموزش, منابع آموزشی برنامه نویسی, منبع اموزش وب, نمایش محصولات, نمایش محصولات فروشگاه اینترنتی, واکنش گراییساخت منوی ابشاری در css
1 دیدگاه
دستتون درد نکنه واقعا
کارم راه افتاد
مرسی