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
