آموزش طراحی منو با ابعاد متفاوت با CSS و HTML

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

آموزش طراحی منو با ابعاد متفاوت با2 CSS و HTML

بخشی در سایت راه اندازی شده است با عنوان ««طراحی منو با Html  و Css »» که قرار بر این شده است که هر روز مطالب این قسمت کامل تر و حرفه ای تر شود . البته اگر دوستانی که قول همکاری داده اند به صحبت هایی که کرده اند پایبند باشند  .  10 آموزش اول را به صورت مقدماتی و متوسط و آموزشهای بعدی را میخواهیم به صورت حرفه ای طراحی کنیم مثل آموزش منوی Maga menu که در سایت خود ما فعال می باشد و درست کردن این منو تقریبا همراه با ساخت آموزش حداقل 10 ساعت زمان می برد . با توجه به توضیحاتی که در قسمت بالا به آن اشاره کرده ام در این بخش میخواهم یک منو با ابعاد متفاوت از کوچک به بزرگ طراحی کنم .


 1. ابتدا نوت پد را باز کرده و تگ های تشکیل دهنده صفحه Html  را درون آن تایپ کنید .

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title> آموزش طراحی منو با ابعاد متفاوت </title>
   </head>
                <body >
                </body>
</html>

 



3. تعداد کلیدها یا منو ها 5 عدد می باشد که برای هر کدام یک کلاس تعریف شده است . این 5 خط کد باید بین تگ Body قرار بگیرد  . 

 

<div>
    <button class="button-xsmall pure-button">کوچکترین کلید</button>
    <button class="button-small pure-button">کلید کوچک</button>
    <button class="pure-button">کلید متوسط</button>
    <button class="button-large pure-button">کلید بزرگ</button>
    <button class="button-xlarge pure-button">بزرگترین کلید</button>
</div>

 

من این کد را بین تگ body برای درک بهتر شما عزیزان قرار میدهم . 

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title> آموزش طراحی منو با ابعاد متفاوت </title>
   </head>
                <body >
<div>
    <button class="button-xsmall pure-button">کوچکترین کلید</button>
    <button class="button-small pure-button">کلید کوچک</button>
    <button class="pure-button">کلید متوسط</button>
    <button class="button-large pure-button">کلید بزرگ</button>
    <button class="button-xlarge pure-button">بزرگترین کلید</button>
</div>
                </body>
</html>

 



حال اگر صفحه index.html را بر روی یک مروگر اجرا کنید باید تصاویر منو به شکل زیر نمایش داده شود . 

آموزش طراحی منو با ابعاد متفاوت با CSS و HTML

 

حالا نوبت میرسه به تغییرات ظاهری که باید با استفاده از Css انجام بشه .  
اگر به کدهای بالا دقت کرده باشید تمام کلاس ها دارای یک pure-button هستند . ابتدا دستورات ظاهری را با استفاده از این کد اعمال و سپس برای تغییر اندازه هر کلاس را به صورت کامل تایپ میکنم. 

 

<style scoped>
.pure-button {
    background-color: #e6e6e6;
    border: 0 none rgba(0, 0, 0, 0);
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.8);
    font-family: b yekan;
    font-size: 100%;
    padding: 0.5em 1em;
    text-decoration: none;
}
        .button-xsmall {
            font-size: 70%;
        }
        .button-small {
            font-size: 85%;
        }
        .button-large {
            font-size: 110%;
        }
        .button-xlarge {
            font-size: 125%;
        }
 </style>

  کد کلی صفحه باید به این شکل باشد 

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title> آموزش طراحی منو با ابعاد متفاوت </title>
   </head>
<body >
<div>
<style scoped>
.pure-button {
    background-color: #e6e6e6;
    border: 0 none rgba(0, 0, 0, 0);
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.8);
    font-family: b yekan;
    font-size: 100%;
    padding: 0.5em 1em;
    text-decoration: none;
}
        .button-xsmall {
            font-size: 70%;
        }
        .button-small {
            font-size: 85%;
        }
        .button-large {
            font-size: 110%;
        }
        .button-xlarge {
            font-size: 125%;
        }
</style>
    <button class="button-xsmall pure-button">کوچکترین کلید</button>
    <button class="button-small pure-button">کلید کوچک</button>
    <button class="pure-button">کلید متوسط</button>
    <button class="button-large pure-button">کلید بزرگ</button>
    <button class="button-xlarge pure-button">بزرگترین کلید</button>
</div>
</body>
</html>

 

آموزش طراحی منو با ابعاد متفاوت با2 CSS و HTMLبرای مشاهده دمو کلیک کنید 

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:02

نوشتن دیدگاه

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

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

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