آموزش طراحی کلید برای وب سایت با Html و Css

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

menu

هیچ وب سایتی را نمی توان بدون منو و کلیدهای ارتباطی پیدا کرد . منظورم از کلیدهای ارتباطی همان ادامه مطلب ، دانلود ، صفحه بعدی یا از این قبیل کلیدها می باشد . کدنویسی این کلیدهای معمولا با HTML و CSS انجام می شود و در صورتیکه نیاز به تنظیمات و افکت داشته باشد از زبان های برنامه نویسی دیگر استفاده می شود . 
من برای این مقاله آموزشی چند کلید با رنگهای مختلف را آماده کرده ام و میخواهم طی چند مرحله ساده 4 کلید برای شما طراحی کنم. 
طراحی این کلیدها نیاز به هیچ برنامه خاصی ندارد و فقط کافیست کدها را در یک برنامه ویرایشی مثل نوت پد کپی کرده و با نام Index.html ذخیره کنید .  در مثال ها تگ ها معرفی و در مورد کاربرد آن توضیح داده نمی شود و کاربرانی که می خواهند با کاربرد هر تگ آشنا شوند باید از آموزشهای مقدماتی CSS شروع کنند. 

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

 

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

 



2. من دستورات css را درون فایل اصلی یعنی index.html قرار میدهم  .
2.1. هر 4 کلید دارای یک رنگ خاص می باشد به همین دلیل برای هر کدام یک کلاس با یک نام تایپ میکنم  

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title>آموزش طراحی منو</title>
   </head>
<body >
<div>
    <button class="button-success pure-button">بخش آموزش </button>
    <button class="button-error pure-button">فروشگاه آسارایان</button>
    <button class="button-warning pure-button">تماس با ما</button>
    <button class="button-secondary pure-button">محصولات فروشگاه</button>
</div>
</body>
</html>

 



3. حالا نوبت میرسه به کدهای Css که مربوط به فونت ، رنگ هر کلید ، فاصله و انحنای لبه های کادر می شود .
4. بین تگ div  یک استایل ایجاد کرده و کدهای css را داخل آن تایپ میکنم .
یکسری از مشخص ها به صورت ثابت برای هر 4 کلید می باشد که در قسمت اول تایپ شده است

 

<style scoped>
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 13px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            line-height: 30px;
            font-family: tahoma;
            font-size: 15px;
        }
        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }
        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }
        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }
        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }
    </style>

 



 

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

 

<!doctype html>
   <head>
           <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
           <title>آموزش طراحی منو</title>
   </head>
<body >
<div>
    <style scoped>
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 13px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            line-height: 30px;
            font-family: tahoma;
            font-size: 15px;
        }
        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }
        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }
        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }
        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }
    </style>
    <button class="button-success pure-button">بخش آموزش </button>
    <button class="button-error pure-button">فروشگاه آسارایان</button>
    <button class="button-warning pure-button">تماس با ما</button>
    <button class="button-secondary pure-button">محصولات فروشگاه</button>
</div>
</body>
</html>

 



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

نوشتن دیدگاه

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

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

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