طراحی وب سایت

سوال

سلام داداش سلطان جون

شما توی سایتتون قسمت بالا وقتی موس رو روی مثلا صفحه ی اصلی میبری تغیر رنگ میده این رو یاد بده

حل شد 0
2016-05-14T17:34:58+03:30 2 پاسخ کاربر تازه 0

پاسخ ها ( 2 )

  1. SOLTANE GHALBHA
    -1
    2016-05-14T18:29:16+03:30
    پاسخ

    سلام ، سپهر جان

    به این نوع طراحی ها میگن Hover ، میتونی تنظیم کنی که اگه ماوس روی یک عنصری رفت مثلا رنگش تغییر کنه ، اندازش کوچکتر یا بزرگتر بشه و … .

    برای مثال یک تگ div داریم ، میخوایم وقتی ماوس میره روش رنگش تغییر کنه و اندازش بزرگ بشه ، برای این کار :

    کد Html :

    <div id="beporsam"> www.beporsam.ir </div>

    کد Css :

    #beporsam{color: black}
#beporsam:hover{color:blue;font-size:20px}

     
    که hover یعنی ماوس بره روش ، در کدای css ، آی دی beporsam رو گفتم رنگش سیاه باشه ، و در قسمت hover گفتم وقتی ماوس رفت روش رنگش آبی و فونتش 20 بشه
    موفق باشید

  2. sajjad95
    0
    2016-05-14T18:35:14+03:30
    پاسخ
    این پاسخ ویرایش شد.

    دروود دوست عزیز …
    شما برای این کار باید درون کد html خاصیت css رو تعریف کنید. برای فهمیدن این سری کد ها میتونین از اینسپکت المنت هم کمک بگیرین.
    مثلا :
    کد html:

    <html dir="rtl">
    <head>
    <title>بپرسم</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="beporsam">sajjad_95</div>
    </body>
    </html>

     

    اگه اشنایی کمی با html داشته باشین به راحتی میفهمین که کد بالا با یک id بپرسم تعریف شده است.
    فکر نکنم کد بالا چیز سختی داشته باشه ، فقط در یکی از خط ها فایل style.css تعریف شده که خاصیت های متن درونش قرار گرفته.
    در css میتوان به دو صورت خاصیت ها را تعریف کرد :
    1- به صورت id که مشخصه شروع آن # میباشد.
    2- به صورت class که مشخصه آن . میباشد.
    من باری این خط کد از id استفاده کردم. کار درستی نبود چون برای موارد پر تکرار از کلاس استفاده میشه مثلا همین منو ولی برای قسمت های فیکس و یکتا از id استفاده میشه مثل ستون اصلی سایت ، ستون کناری …
    فایل style.css:

    #beporsam {
padding: 10px;
width: 10%;
background: #F74141;
color: #fff;
text-align: center;
margin: auto;
-webkit-transition: 0.5s;
}
#beporsam:hover{
background: #00BCD4;
border-bottom: solid 7px #2196F3;
border-radius: 10px;
transform: rotate(-10deg);
}

    برای فهمیدن هر خاصیت میتونین توی گوگل سرچ کنید و یا اون رو از فایل style.css پاک کنید و نتیجه رو پیدا کنید.
    اینسپکت المنت مرورگر هم خیلی کمک میکنه اگه بتونی باهاش کار کنی.
    فایل پیوست شده رو ببینید.
    موفقیتتون روز افزون …


    فایل پیوست
    بهترین پاسخ

ارسال یک پاسخ