1. فایل index.html را با ویرایشگر باز کنید . ابتدا یک تگ section دیگر درون تگ Body تایپ می کنم. از تگ < section > برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود . برای مثال می توان به یک بخش متن ، یک عنوان خبری و .... اشاره کرد .
برای نشانه گذاری این تگ از class="listings" استفاده میکنم .
در این بخش من سه ردیف در سه ستون تصویر میخواهم قرار بدهم .
ابتدا یک section ایجاد می کنم.
سپس با استفاده از تگ UL و نه عدد تگ Li تصاویر مورد نظر را به عنوان یک لینک قرار میدهم. به تگهای زیر دقت کنید بهتر توضیحات بنده را متوجه می شوید .
هرتگ Li از یک تگ A به عنوان لینک ، یک لینک تصویر و یک تگ span class="price" برای قیمت تشکیل شده است . من یک نمونه را ایجاد و از روی آن 8 کپی میگیریم .
<li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">2500 تومان </span> <div class="property_details"> <h1> <a href="#">تهران میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li>
من کد نه تصویر را رای شما قرار میدهم تا به فایل Index.html اضافه کنید .
<section class="listings"> <div class="wrapper"> <ul class="properties_list"> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">2500 تومان </span> <div class="property_details"> <h1> <a href="#">تهران میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$1000</span> <div class="property_details"> <h1> <a href="#"> ارومیه میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$500</span> <div class="property_details"> <h1> <a href="#"> فارس میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$2500</span> <div class="property_details"> <h1> <a href="#"> یزد میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$1000</span> <div class="property_details"> <h1> <a href="#"> همدان میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$500</span> <div class="property_details"> <h1> <a href="#">کردستان میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$2500</span> <div class="property_details"> <h1> <a href="#">بندر عباس میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$1000</span> <div class="property_details"> <h1> <a href="#">قم میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">$500</span> <div class="property_details"> <h1> <a href="#">شیراز میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> </ul> </div> </section> <!-- end listing section -->
تا این مرحله کد Index.html باید شبیه کد زیر باشد
<!DOCTYPE html> <html> <head> <title>آموزش طراحي قالب ريسپانسيو با استفاده از Css3 و Html 5</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="/css/reset.css"> <link rel="stylesheet" href="/css/main.css" /> </head> <body> <section class="hero"> <header> <div class="wrapper"> <a href="#"><img src="/img/logo.png" class="logo" alt="" titl=""/></a> <a href="#" class="hamburger"></a> <nav> <ul> <li><a href="#">صفحه اصلي </a></li> <li><a href="#">فروشگاه </a></li> <li><a href="#">بخش آموزش</a></li> <li><a href="#">درباره ما</a></li> <li><a href="#">نقشه سايت</a></li> </ul> <a href="#" class="login_btn">ورود</a> </nav> </div> </header><!-- end header section --> <section class="caption"> <h2 class="caption">Find You Dream Home</h2> <h3 class="properties">فروشگاه اينترنتي آسارايان - طراحي قالب - ريسپانسيو</h3> </section> </section><!-- end hero section --> <section class="listings"> <div class="wrapper"> <ul class="properties_list"> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">2500 تومان </span> <div class="property_details"> <h1> <a href="#">تهران میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">2000 تومان </span> <div class="property_details"> <h1> <a href="#"> ارومیه میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">5000 هزار تومان</span> <div class="property_details"> <h1> <a href="#"> فارس میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">7500تومان</span> <div class="property_details"> <h1> <a href="#"> یزد میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">10000 تومان </span> <div class="property_details"> <h1> <a href="#"> همدان میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">1500 تومان </span> <div class="property_details"> <h1> <a href="#">کردستان میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_1.jpg" alt="" title="" class="property_img"/> </a> <span class="price">8000 تومان </span> <div class="property_details"> <h1> <a href="#">بندر عباس میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_2.jpg" alt="" title="" class="property_img"/> </a> <span class="price">4500 تومان </span> <div class="property_details"> <h1> <a href="#">قم میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> <li> <a href="#"> <img src="/img/property_3.jpg" alt="" title="" class="property_img"/> </a> <span class="price">9000 تومان </span> <div class="property_details"> <h1> <a href="#">شیراز میدان ولیعصر بلوار کشاورز مجتمع بهار</a> </h1> <h2>2 kitchens, 2 bed, 2 bath... <span class="property_size">(288ftsq)</span></h2> </div> </li> </ul> </div> </section> <!-- end listing section --> </body> </html>
حالا نوبت میرسد به تغییر شکل ظاهری این قسمت. فایل main.css را با یک ویرایشگر باز کنید . کدهای این بخش را در قسمت زیر قرار میدهم . سعی کنید تگ ها را خط به خط وارد کنید تا تغییرات کاملا برای شما مشخص باشد . تعداد این تگها به 800 خط میرسد که بنده نمی توانم به صورت خط به خط توضیحات مربوطه را برای شما تایپ کنم . این بخش نیاز به تمرین و دقت دارد .
/* listings section */ .listings{ padding: 100px 0; } .listings ul.properties_list{ list-style: none; overflow: hidden; } .listings ul.properties_list li{ display: block; width: 30.90909090909091%; height: auto; position: relative; float: left; margin: 0 3.636363636363636% 3.636363636363636% 0; } .listings ul.properties_list li img.property_img{ width: 100%; height: auto!important; vertical-align: top; } .listings ul.properties_list li .price{ position: absolute; top: 10px; left: 10px; padding: 15px 20px; background: #ffffff; color: #514d4d; font-family: "lato-bold", Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 1px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; } .listings ul.properties_list li:nth-child(3n+0){ margin-right: 0; } .listings ul li .property_details{ width: 87.64705882352941%; padding: 2.941176470588235% 5.882352941176471% 4.117647058823529% 5.882352941176471%; border-bottom: 1px solid #f2f1f1; border-left: 1px solid #f2f1f1; border-right: 1px solid #f2f1f1; transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; } .listings ul li:hover .property_details{ border-bottom: 1px solid #95badf; border-left: 1px solid #95badf; border-right: 1px solid #95badf; } .listings ul li .property_details h1{ color: #666464; font-family: "lato-bold", Helvetica, Arial, sans-serif; font-size: 16px!important; font-weight: bold; margin-bottom: 5px; line-height: 28px; } .listings ul li .property_details h1 a{ text-decoration: none; color: #666464; } .listings ul li .property_details h2{ color: #9d9d9d; font-family: "lato-regular", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 26px; font-weight: normal; } .listings ul li .property_details .property_size{ color: #676767; } .listings .more_listing{ display: block; width: 100%; text-align: center; margin: 84px 0 22px 0; } .listings .more_listing_btn{ text-decoration: none; padding: 20px 40px; border: 2px solid #bfd9f1; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; color: #afcbe6; font-family: "lato-regular", Helvetica, Arial, sans-serif; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; text-align: center; transition: all .2s linear; -webkit-transition: all .2s linear; -moz-transition: all .2s linear; -o-transition: all .2s linear; } .listings .more_listing_btn:hover{ color: #a0c3e5; border: 2px solid #a0c3e5; }
حالا قالب را در مرورگر باز کنید . همان فایل index.html