آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش نوار پیمایش در CSS

دوره های مرتبط با این مقاله

آموزش Navigatuion

داشتن نوار پیمایش که استفاده از آن آسان باشد، برای هر وب سایتی مهم است.
با CSS می توان منوهای کسل کننده HTML را تبدیل به نوارهای پیمایش زیبا و جذاب کرد.

نوار پیمایش – لیست لینک ها

نوار پیمایش نیاز به HTML استاندارد بعنوان پایه اش دارد.
ما در مثال هایمان، نوار پیمایش را از روی لیست استاندارد HTML می سازیم.
اساساً نوار پیمایش لیستی از لینک هاست که استفاده از این عنصرها بسیار مناسب است:

نمونه یک

    
امتحان کنید

‎حالا بیایید bulletها و marginها و padding را از لیست حذف کنیم:

نمونه دو

        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
امتحان کنید

مثال بالا توضیح می دهد:
list-style-type:none — بولت ها را حذف می کند. نوار پیمایش نیاز به لیستmarker ها ندارد.
تنظیم marginها و padding روی 0، تنظیمات پیش فرض مرورگر را حذف می کند.
کد موجود در مثال بالا، کدی استاندارد است که هم در نوارهای پیمایش افقی و هم عمودی بکار می رود.

نوار پیمایش عمودی

برای ساختن نوار پیمایش عمودی، فقط به استایل کردن عنصرها نیاز داریم، بعلاوه کد بالا:

نمونه سه

      a ‎ {
            display: block;
            width: 60px;
        }
امتحان کنید

مثال بالا توضیح می دهد:
display:block — لینک ها را بصورت عنصرهای block نمایش می دهد و کل ناحیه لینک را قابل کلیک می کند.
width:60px — عنصرهای block، کل پهنای موجود پیش فرض را اشغال می کند. ما قصد داریم px 60 پهنا تعیین کنیم.
نکته مهم: همیشه پهنای عنصرها را در نوار پیمایش عمودی تعیین کنید.اگر پهنا را حذف کنید، IE می تواند نتایج غیر منتظره ای تولید کند.

نوار پیمایش افقی

دو راه برای ایجاد نوار پیمایش افقی وجود دارد. استفاده از list itemهای inline و floating.
هر دو متد بخوبی کار می کند، اما اگر می خواهید لینک ها دارای یک سایز باشند، باید از متد floating استفاده کنید.

List Itemهای Inline

یک راه ساختن نوار پیمایش افقی، تعیین عنصرها بصورت inline است، بعلاوه کدهای استاندارد بالا:

نمونه چهار

        li{
            display:inline;
        }
امتحان کنید

مثال بالا توضیح می دهد که:
display:inline — بطور پیش فرض ، عنصرهایی block هستند. در اینجا ما break های خط را قبل و بعد از هر list item حذف می کنیم تا آنها را روی یک خط نمایش دهیم.

list itemهای Floating

در مثا بالا، لینک ها پهناهای متفاوتی دارند.برای همه لینک هایی که قر ار است پهنای مساوی داشته باشند، عنصر را حرکت دهید و پهنایی بر ای عنصرتعیین کنید:

نمونه پنج

        li{
            float: left;
        }

        a{
            display: block;
            width: 60px;
        }
امتحان کنید

مثال بالا نوضیح داد که:
float:left — از float بر ای حرکت دادن عنصرهای block در کنار یکدیگر استفاده کنید
display:block — لینک ها را بصورت عنصرهایی نمایش می دهد که کل ناحیه لینک را قابل کلیک می کند، و به ما اجازه تعیین پهنا را می دهد
width:60px— از انجاییکه عنصرهای block، کل پهنای موجود را اشغال می کنند، نمی توانند در کنار هم حرکت کنند. ما پهنای لینک ها را px60 تعیین می کنیم.

  • 5157
  •    2222
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .