آموزش CSS (قسمت ۵)

آموزش-css-قسمت-۵

همانطور که در آموزش HTML (قسمت 5) از کد media@ مربوط به CSS استفاده کردیم، قرار شد در آموزش بعدی CSS به این مطلب اشاره کنم و با این کد آشنا بشید.بخوام توضیح کوتاهی در مورد کد media@ بدم بهتون، باید بگم از این کد برای رسپانسیو (Responsive) کردن عنصرهای ایجاد شده استفاده می شود.CSS این امکان را می دهد که اندازه صفحه نمایش را کنترل کرده و نسبت به بزرگتر و یا کوچکتر شدن صفحه نمایش، در طراحی خود واکنش نشان دهیم. برای مثال می خواهیم هنگامی که صفحه نمایش موبایل باشد، منوی سایت ما تغییر کرده و به حالت موبایل تبدیل شود.

قبل از تغییر : 

بعد از تغییر : 

کدهای HTML : 

<header>
    <div class="top-menu">
        <ul>
            <li class="active"><a href=""> دکتر کد </a></li>
            <li><a href=""> JQuery آموزش </a></li>
            <li><a href=""> HTML آموزش </a></li>
            <li><a href=""> CSS آموزش </a></li>
        </ul>
    </div>
</header>

کدهای CSS:

<!-- استایل درونی -->
<style>
    body{
        padding: 0px;
        margin: 0px;
        color: #a0a0a0;
    }
    * {
        box-sizing: border-box;
    }

    .top-menu ul{
        list-style: none;
        background-color: #e5e5e5;
        padding: 5px;
    }
    .top-menu ul li{
        display: inline-block;
        padding: 10px;
        background-color: #CD6133;
    }
    .top-menu ul li:hover{
        background-color: #b24d25;
    }
    .top-menu ul li.active{
        background-color: #b24d25;
    }
    .top-menu ul li a{
        color: #F4F4F4;
        text-decoration: none;
    }

    @media screen and (max-width: 600px) {
        .top-menu ul li{
            display: block;
        }
    }
</style>

در کدهای بالا ما توسط لیست ul که مربوط به HTML می باشد یک منو ساده ایجاد کردیم و توسط CSS شکل قرار گیری آن را تغییر دادیم و توسط کد media@ برای آن تعریف کردیم زمانی که اندازه نمایشگر ما کوچکتر از 600 پیکسل شود حالت نمایش منو ما تغییر کند. سعی کردم ساده ترین مثال این مطلب رو بهتون بگم و کدهارو زیاد نکنم تا با مفهوم این موضوع راحت آشنا بشید.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟