بخش دوم - آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

ویژه بخش دوم - آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

در صورت مفید بودن این آموزش آن را از طریق کلید G+ (گوگل پلاس ابتدای صفحه ) به اشتراک بگذارید

بخش اول با عنوان "آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5" در سایت فعال شد . در بخش قبلی منو ، لوگو و هدر بالای صفحه را ایجاد کردیم . نوبت میرسد به تصاویر وسط صفحه . به طور کلی این قالب برای فروش خانه مورد استفاده قرار میگیرد و سورس کد اصلی به زبان انگلیسی می باشد که بنده قالب را به فارسی تبدیل کرده و آموزش آن را در سایت جهت مشاهده شما قرار داده ام .
در این بخش میخواهم تصاویر وسط صفحه را که به عنوان یک محصول مورد استفاده قرار می گیرد را ایجاد کنم. دقت داشته باشید که هنوز کدهای مربوط به واکنش گرایی قالب در فایل Css3 قرار نگرفته است .

1. فایل index.html را با ویرایشگر باز کنید . ابتدا یک تگ section دیگر درون تگ Body تایپ می کنم.  از تگ < section > برای تعیین یک بخش یا قسمت مجزا در یک سند وب استفاده می شود . برای مثال می توان به یک بخش متن ، یک عنوان خبری و .... اشاره کرد .
برای نشانه گذاری این تگ از class="listings" استفاده میکنم .
در این بخش من سه ردیف در سه ستون تصویر میخواهم قرار بدهم .
ابتدا یک section ایجاد می کنم.
سپس با استفاده از تگ UL  و نه عدد تگ Li  تصاویر مورد نظر را به عنوان یک لینک قرار میدهم. به تگهای زیر دقت کنید بهتر توضیحات بنده را متوجه می شوید . 

4 آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

هرتگ 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

5 آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

آخرین بروز رسانیپنج شنبه, 28 خرداد 1394 18:09

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا