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

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

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

در بخش اول و دوم قسمت های اصلی قالب طراحی شد . فقط مانده قسمت پایین وب سایت با تگهای مربوط به ریسپانیو کردن قالب . در این بخش Footer را ایجاد کرده و کدهای مربوط به ظاهر قالب را از طریق Css3 ایجاد میکنم .
سعی کرده ام تگهای مربوط به ریسپانسیو در قالب را به طور کامل بررسی کرده و توضیحات آن را به صورت کامل برای کاربران و بازدید کنندگان شرح بدهم تا جای سوالی باقی نماند . (مشاهده دموقالب در مرورگر)

 

1. فایل index.html را با یک ویرایشگر باز کنید . ابتدا تگ <div class="wrapper footer"> را درون تگ Body تایپ می کنم.
سپس می خواهم سه ردیف لینک در فوتر ایجاد کنم به همین دلیل از تگ UL  استفاده می کنم.
کدهای مربوط به صفحه index.html با فوتر تکمیل می شود .

<footer>
        <div class="wrapper footer">
            <ul>
                <li class="links">
                    <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>
                </li>
                <li class="links">
                    <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>
                </li>
                <li class="links">
                    <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>
                </li>
                <li class="about">
                    <p>در بخش اول و دوم قسمت های اصلی قالب طراحی شد . فقط مانده قسمت پایین وب سایت با تگهای مربوط به ریسپانیو کردن قالب .</p>
                    <ul>
                        <li><a href="http://asarayan.com" class="facebook" target="_blank"></a></li>
                        <li><a href="http://asarayan.com" class="twitter" target="_blank"></a></li>
                        <li><a href="http://asarayan.com" class="google" target="_blank"></a></li>
                        <li><a href="#" class="skype"></a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="copyrights wrapper">
            Copyright © 2015 <a href="http://www.asarayan.com" target="_blank" class="ph_link" title="Online SHOPING-AsaRayan">AsaRayan.Com</a>. All Rights Reserved.
        </div>
    </footer><!--  end footer  -->

 

کد کلی صفحه 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  -->
        <footer>
        <div class="wrapper footer">
            <ul>
                <li class="links">
                    <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>
                </li>

                <li class="links">
                    <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>
                </li>

                <li class="links">
                    <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>
                </li>

                <li class="about">
                    <p>در بخش اول و دوم قسمت های اصلی قالب طراحی شد . فقط مانده قسمت پایین وب سایت با تگهای مربوط به ریسپانیو کردن قالب .</p>
                    <ul>
                        <li><a href="http://asarayan.com" class="facebook" target="_blank"></a></li>
                        <li><a href="http://asarayan.com" class="twitter" target="_blank"></a></li>
                        <li><a href="http://asarayan.com" class="google" target="_blank"></a></li>
                        <li><a href="#" class="skype"></a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="copyrights wrapper">
            Copyright © 2015 <a href="http://www.asarayan.com" target="_blank" class="ph_link" title="Online SHOPING-AsaRayan">AsaRayan.Com</a>. All Rights Reserved.
        </div>
    </footer><!--  end footer  -->
              </body>
</html>

حالا نوبت میرسد به تغییرات ظاهری Footer که باید از طریق Css انجام شود . فایل main.css را باز کرده و کدهای زیر را درون آن تایپ کنید . در ادامه کدهای قبلی

/*  footer  */
footer{
    padding-top: 100px;
    background: #41668b;
    direction:rtl;
}
footer .footer > ul{
    overflow: hidden;
}
footer .footer > ul > li{
    display: block;
    float: left;
    list-style: none;
    margin-right: 60px;
}
footer .footer > ul > li:last-child{
    margin-right: 0;
}
footer .footer > ul > li.links{
    width: 197px;
}
footer ul li.links > ul > li{
    display: block;
    width: 100%;
    list-style: none;
    margin-bottom: 27px;
}
footer ul li.links > ul > li:last-child{
    margin-bottom: 0;
}
footer .footer > ul > li.links li a{
    text-decoration: none;
    display: block;
    color: #fff;
    font-family:tahoma, "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: .5px;
    text-align: left;
    line-height: 19px;
}
footer .footer > ul > li.about{
    width: 327px;
}
footer ul li.about p{
    color: #fff;
    font-family:tahoma, "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    line-height: 34px;
    margin-top: -9px;
}
footer ul li.about > ul > li{
    display: inline-block;
    margin-right: 20px;
    margin-top: 30px;
}
footer ul li.about > ul > li:last-child{
    margin-right: 0;
}
footer ul li.about > ul > li a{
    background: url('../img/social_media.png') no-repeat;
}
footer ul li.about > ul > li a.facebook{
    display: block;
    width: 10px;
    height: 18px;
    background-position: 0 0;
}
footer ul li.about > ul > li a.twitter{
    display: block;
    width: 19px;
    height: 18px;
    background-position: -11px 0px;
}
footer ul li.about > ul > li a.google{
    display: block;
    width: 10px;
    height: 18px;
    background-position: -31px 0px;
}
footer ul li.about > ul > li a.skype{
    display: block;
    width: 17px;
    height: 18px;
    background-position: -43px 0px;
}
footer .copyrights{
    display: block;
    text-align: center;
    padding: 40px 0;
    margin-top: 60px;
    color: #fff;
    font-family: tahoma,"lato-regular", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    border-top: 1px solid #82abd4;
}
footer .copyrights a.ph_link{
    font-family:tahoma, "lato-bold", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

 

تا به این مرحله قالب شما باید شبیه تصویر زیر شده باشد . 

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

 

 تا به این مرحله که این قالب بیشتر یک قالب استاتیک بود . حالا کدهای مربوط به ریسپانسیو کردن قالب .من توضیحات کامل را در مورد تگی که برای ریسپانسیو استفاده می شود را میدهم و کاربرد و نحوه استفاده از آن را ، سپس شما باید بخش بخش کدها را وارد کرده و تغییرات را متوجه شوید . 
تگ media برای ریسپانسیو کردن یک قالب مورد استفاده قرار می گیرد . با استفاده از تگ media مقیاس فعلی دستگاه کاربر رو چک میکنیم , اگر کاربر از دستگا های با رزولوشن بالا استفاده کند یکسری کد اعمال می شود . به عنوان مثال شما 3 تا div کنار هم دارین که این 3 تا کنار هم تمام صفحه رو اشغال می کنند . حالا ما می خواهیم مثلا وقتی که رزولیشن کمتر از 500 پیکسل بود div ها برن زیر هم و هر div کل بلوکش رو بگیره !
نکته مهمی که وجود داره اینه که شما تو استایل اصلی باید  طول عنصر ( width ) رو حتما با % تنظیم کنید نه پیکسل . مثلا اگه 3 تا div تو یه ردیف تمام بلوک رو گرفتن به هر کدوم 30% عرض بدید نه 300px .
به طور کلی ما با استفاده از Media Queries میتوانیم تعیین کنیم که صفحه قالبی که ایجاد کرده ایم در هر رزولوشن به چه شکلی نمایش داده شود . برای قالبی که ساخته ایم هم به همین صورت عمل می کنیم . با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا قالب بصورت عادی نمایش داده شود و در رزولوشن های پایین مثل موبایل و تبلت بصورت ریسپانسیو نمایش داده شود . حالا باید این کار رو در کد پیاده کنیم .روش به یک صورت می باشد یعنی فقط باید مشخص کنیم که هدر وقتی کوچیک می شود به چه اندازه ای در بیاید . تصاویر وسط به همین شکل و تا پایان که مربوط به منوهای فوتر می شود .

/*  responsive css */
@media (max-width:1500px){
    .hero{
        height: 800px;
    }
}
@media (max-width: 1150px){
    .wrapper{
        padding: 0 40px;
        max-width: 1020px;
    }
    footer .footer > ul > li{
        margin-right: 5.454545454545455%;
    }

    footer .footer > ul > li.links{
        width: 17.90909090909091%;
    }

    footer .footer > ul > li.about{
        width: 29.72727272727273%;
    }
}
@media (max-width:800px){
    .hero{
        height: 600px;
    }
    .hero .caption{
        width: 92.72727272727273%;
        padding: 0 3.636363636363636%; 
    }
    .hero .caption h3{
        margin: 0;
        left: 0;
    }
    header a.hamburger{
        display: block;
    }
    header nav{
        position: absolute;
        display: none;
        width: 92.72727272727273%;
        top: 95px;
        left: 3.636363636363636%;
        float: none;
        z-index: 20;
        overflow: hidden;
        background: #fff;
        border-top: 5px solid #bfd9f2;
    }
    header nav.active{
        display: block;
    }
    header nav .login_btn{
        float: none;
        display: inline-block;
        width: 100%;
        border: 0;
        margin: 0;
        padding: 20px 0;
        text-align: center;
        background: #f2f3f3;
    }
    header nav ul{
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 0;
    }
    header nav ul li{
        display: block;
        width: 100%;
        float: none;
        margin-left: 0;
    }
    header nav ul li a{
        display: block;
        padding: 25px 0;
        border-bottom: 1px solid #f2f3f3;
        transition: background .2s linear;
        -webkit-transition: background .2s linear;
        -moz-transition: background .2s linear;
        -o-transition: background .2s linear;
    }
    header nav ul li a:active{
        background: #f2f3f3;
    }
    header nav ul li a,
    header nav .login_btn{
        color: #1c3655;
    }
    header nav .login_btn:hover{
        background: #eaebeb;
    }
    header nav ul li:last-child{
        border: 0;
    }
    .listings ul.properties_list li{
        width: 46.36363636363636%;
        margin: 0 7.272727272727273% 7.272727272727273% 0;
    }
    .listings ul.properties_list li:nth-child(3n+0){
        margin: 0 7.272727272727273% 7.272727272727273% 0;
    }
    .listings ul.properties_list li:nth-child(2n+0){
        margin-right: 0;
    }
    footer .footer > ul > li{
        width: 29.6969696969697%!important;
        margin-right: 5.454545454545455%;
        margin-bottom: 100px;
    }
    footer .footer > ul > li:nth-child(3){
        margin-right: 0;
    }
    footer .footer > ul > li.links li a{
        text-align: center;
    }
    footer .footer > ul > li.about{
        text-align: center;
        float: none;
        display: inline;
        margin-right: 100%;
        overflow: hidden;
        border-top: 1px solid #82abd4;
    }
}
@media (max-width:500px){
    .hero .caption h2{
        font-size: 85px;
    }
    .hero .caption h3{
        font-size: 16px;
    }
    .listings ul.properties_list li{
        width: 100%;
        margin-bottom: 60px!important;
    }
    .listings ul.properties_list li:last-child{
        margin-bottom: 0!important;
    }
    .listings ul.properties_list li:nth-child(3n+0),
    .listings ul.properties_list li:nth-child(2n+0){
        margin:0;
    }
    .listings .more_listing_btn{
        display: block;
        width: 100%; 
        padding-left: 0!important;
        padding-right: 0!important;
    }
    footer .footer > ul > li.links,
    footer .footer > ul > li.about{
        float: none;
        width: 100%!important;
        margin-right: 0;
        margin-bottom: 60px;
        padding-bottom: 60px;
    }
    footer .footer > ul > li:last-child{
        padding-bottom: 0;
    }
    footer .footer > ul > li.links{
        border-bottom: 1px solid #82abd4;
    }
}

یکسری کد به عنوان هک css برای درست قرار گرفتن عناصر یک صفحه در تمام مرورگرها مورد استفاده قرار می گیرید که این کدها در فایل reset.css ذخیره شده است . این کدها را درون فایل مورد نظر تایپ کرده و ذخیره کنید . 

html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }

    body {
        line-height:1;
    }

    img{
        max-width: 100%;
    }

    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
        display:block;
    }

    nav ul {
        list-style:none;
    }

    blockquote, q {
        quotes:none;
    }

    blockquote:before, blockquote:after,
    q:before, q:after {
        content:'';
        content:none;
    }

    a {
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
        color: #ffffff;
    }

    /* change colours to suit your needs */
    ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
    }

    /* change colours to suit your needs */
    mark {
        background-color:#ff9;
        color:#000;
        font-style:italic;
        font-weight:bold;
    }

    del {
        text-decoration: line-through;
    }

    abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
    }

    table {
        border-collapse:collapse;
        border-spacing:0;
    }

    /* change border colour to suit your needs */
    hr {
        display:block;
        height:1px;
        border:0;   
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
    }

    input, select {
        vertical-align:middle;
    }

امیدوارم از این آموزش لذت برده باشید . در ادامه فایل سورس قالب را جهت استفاده تصاویر می توانید دانلود و مورد استفاده قرار بدهید . 

(مشاهده دموقالب در مرورگر) | دانلود فایل اصلی قالب

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

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #14 سعید صبح خیز 1396-11-12 10:33
به نقل از طراحی سایت:

سلام خوب شده بزرگوار
نقل قول کردن
0 #13 طراحی سایت 1396-11-11 17:59 نقل قول کردن
0 #12 طراحی سایت 1396-11-11 17:58
عالی بود
تشکر بابت آموزشتون
نقل قول کردن
0 #11 امیررضا 1396-02-31 20:31
خدا امواتت رو بیامرزه !!
نقل قول کردن
0 #10 Guest 1395-05-22 20:25
به نقل از arman:
سلام خداقوت.ممنون از مطالب خوبتون.مندارم یه سایت طراحی می کنم و یه سری سوالات دارم . چه جوری میتونم باهاتون در ارتباط باشم؟

سلام
از طریق همین بخش پاسخگو هستیم دوست من
نقل قول کردن
0 #9 arman 1395-05-22 00:16
مطالبتون خیلی خوب بود و کمک زیادی به من کرد.من ایمیلم هست.لطفا اگر پیام من رو دیدید یه اطلاع بدید.
نقل قول کردن
0 #8 arman 1395-05-22 00:13
سلام خداقوت.ممنون از مطالب خوبتون.مندارم یه سایت طراحی می کنم و یه سری سوالات دارم . چه جوری میتونم باهاتون در ارتباط باشم؟
نقل قول کردن
+1 #7 مهدى باقرى 1395-01-06 12:11
به نقل از رامین:
آقا دم شما گرم. خیلی آقایی. هرجا رفتم مشکلو گفتم گفتن باید بیای توی دوره های ریسپانسیو کردن سایت ما شرکت کنی! چنتا کد که دیگه دوره نمیخاد. خیلی ممنون. سایتتون نامبر وانه

سلام.خواهش ميكنم. با تشكر از همراهى شما.
نقل قول کردن
+1 #6 رامین 1395-01-06 05:06
آقا دم شما گرم. خیلی آقایی. هرجا رفتم مشکلو گفتم گفتن باید بیای توی دوره های ریسپانسیو کردن سایت ما شرکت کنی! چنتا کد که دیگه دوره نمیخاد. خیلی ممنون. سایتتون نامبر وانه
نقل قول کردن
+1 #5 مهدی باقری 1395-01-05 12:03
به نقل از رامین:
داداش فقط یه چیزی... این صفحه رو ببین:

gixx.ir/signup2.php
صفحه حالت ریسپانسیو داره ولی خود فرم تغییر سایز نمیده و توی موبایل از صفحه میزنه بیرون. چکارش کنم داداش؟ دیگه چه چیزی کم داره؟

نقل قول کردن

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

«
  • 1
  • 2
  • 3
»