محبوبترینها
چگونه با ثبت آگهی رایگان در سایت های نیازمندیها، کسب و کارتان را به دیگران معرفی کنید؟
بهترین لوله برای لوله کشی آب ساختمان
دانلود آهنگ های برتر ایرانی و خارجی 2024
ماندگاری بیشتر محصولات باغ شما با این روش ساده!
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
بارش‌های سیل‌آسا در راه است! آیا خانه شما آماده است؟
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1845173354
آموزش ایجاد گوشه های گرد به وسیله تصاویر و css -
واضح آرشیو وب فارسی:سایت ریسک: آموزش ایجاد گوشه های گرد به وسیله تصاویر و css E-Boy 09 بهمن 1388, 19:00سلام خدمت همه دوستان . یه مدت پیش یکی از دوستان عزیز ( Pouya Saadeghi ) آموزشی در رابطه با گرد کردن گوشه های بلوک ها در صفحات وب در این انجمن قرار دادند . در اون تاپیک قرار شد که یه روزی هم بنده آموزش گرد کردن گوشه ها رو با استفاده از تصاویر در این انجمن قرار بدم و بالاخره امروز یه وقت آزاد گیر آوردم و تصمیم گرفتم که این آموزش رو براتون بنویسم . 1 - اول از هر چیزی نیازمند به ایجاد چهار تصویر به صورت زیر برای گوشه بلوک ها هستیم : () 2 - بهترین روش برای ایجاد این تصاویر تقسیم یک دایره به چهار قسمت مساوی می باشد . من در زیر این کار را به وسیله نرم افزار فتوشاپ انجام دادم . شما می توانید از ابزار Slice Tool در فتوشاپ برای انجام این کار استفاده نمایید : () 3 - حال باید تصاویر را با نام های زیر در پوشه ای به نام images ذخیره نماییم : تصویر سمت راست و بالا : top-r تصویر سمت راست و پایین : bottom-r تصویر سمت چپ و بالا : top-l تصویر سمت چپ و پایین : bottom-l 4 - حال پس از مراحل بالا نوبت به ایجاد فایل html می رسد . فایلی با نام index.html ایجاد نموده و کد های زیر را در آن قرار دهید : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> </head> <body> </body> </html>کد های بالا اجزای اصلی هر صفحه وب ایجاد شده با زبان html می باشند و وجود آن ها در صفحه الزامیست . 5 - حال صفحه ای دیگر با نام style.css ایجاد می نماییم که این صفحه محل قرار گیری کد های css ما می باشد . 6 - پس از ایجاد صفحه style.css کد زیر را به صفحه index.html اضافه می نماییم تا صفحه style.css را به آن پیوند داده باشیم . <link rel="stylesheet" type="text/css" href="style.css" />توجه داشته باشید که کد بالا باید بین تگ های <head> و <head/> قرار بگیرد . 7 - حال نوبت به ایجاد بلوک اصلی که قرار است گوشه های آن را گرد نماییم میرسد . برای این کار دستورات زیر را به میان تگ های <body> و <body/> در صفحه index.html اضافه می نماییم : <div id="block"> </div>8 - حال دو بلوک دیگر در میان بلوک block اضافه می نماییم که یکی در پایین و دیگری در بالای بلوک block قرار می گرید : <div id="rnd-top"></div> <div id="rnd-bottom"></div> 9 - حالا بلوک های block و rnd-top و rnd-bottom را به وسیله css پیکر بندی می کنیم و دستورات css را در فایل style.css اضافه می نماییم . کد های پیکر بندی را در زیر می توانید مشاهده نمایید : #block { background: #C6D 9EA; width: 500px; font: 11px Tahoma; color: #000033; }در کد های بالا توسط دستور background رنگ زمینه بلوک block را تعیین کردیم . توسط width عرض را تعیین نمودیم . و با font اندازه و نوع فونتی که می خواهیم در بلوک block نمایش داده شود را اعلام نمودیم . با color هم رنگ فونت را تعیین مورد نظر را تعیین نمودیم . #rnd-top { background: url(images/top-r.gif) no-repeat right top; }در کد های بالا توسط دستور background آدرس تصویر زمینه بلوک rnt-top را تعیین نمودیم . همچنین توسط norepeat از تکرار تصویر زمینه جلو گیری کردیم . و با top و right هم اعلام نمودیم که تصویر باید در بالا و سمت راست بلوک قرار بگیرد . #rnd-bottom { background: url(images/bottom-r.gif) no-repeat right bottom; }در کد های بالا توسط دستور background آدرس تصویر زمینه بلوک rnt-bottom را تعیین نمودیم . همچنین توسط norepeat از تکرار تصویر زمینه جلو گیری کردیم . و با bottom و right هم اعلام نمودیم که تصویر باید در پایین و سمت راست بلوک قرار بگیرد . 9 - توسط کد های بالا فقط گوشه های سمت راست بلوک مورد نظر تعیین شدند . برای تعیین بلوک های سمت راست باید از دستور <img> در خود فایل index.html به صورت زیر استفاده نماییم : <div class="rnd-top"><img src="images/top-l.gif" alt="" width="30" height="30" /></div> <div class="rnd-bottom"><img src="images/bottom-l.gif" alt="" width="30" height="30" /></div> 10 - حالا می توانیم متن یا محتویات مورد نظر خود را توسط یک تگ <p> در میان دو بلوک rnd-top و rnd-bottom اضافه نماییم . به علت این که برای بلوک block ارتفاعی تعیین نشده ارتفاع این بلوک با توجه به محتویات درون آن تغییر و خواهد کرد . 11 - در آخر کد های ما باید به صورت زیر در آمده باشد : کد های صفحه index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="block"> <div id="rnd-top"><img src="images/top-l.gif" alt="" width="30" height="30" /></div> <p style="text-align: center;"> Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p> <div id="rnd-bottom"><img src="images/bottom-l.gif" alt="" width="30" height="30" /></div> </div> </body> </html>کد های فایل style.css #block { background: #C6D 9EA; width: 500px; font: 11px Tahoma; color: #000033; } #rnd-top { background: url(images/top-r.gif) no-repeat right top; } #rnd-bottom { background: url(images/bottom-r.gif) no-repeat right bottom; } 12 - حالا پوشه ای به نام RND-Block ایجاد نمایید و فایل های index.html و style.css و پوشه images را درون آن قرار دهید . 13 - در این مرحله می توانید با اجرای فایل index.html نتیجه کار خود را ببنید . خروجی باید مانند عکس زیر باشد : () بالاخره تموم شد ، خسته نباشد . امیدوارم از این آموزش نهایت استفاده را ببرید . موفق باشید . Saeed 09 بهمن 1388, 21:56سلام اول از تشکر دوم چرا این همه دردسر !؟؟ :shock: از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده :wink: -moz-border-radius:3px;-webkit-border-radius:3px; موفق باشی :cool: pouya saadeghi 09 بهمن 1388, 22:07سلام اول از تشکر دوم چرا این همه دردسر !؟؟ :shock: از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده :wink: -moz-border-radius:3px;-webkit-border-radius:3px; موفق باشی :cool: اين كد فقط براي موتورهاي webkit و gecko كار ميكنه (chrome,firefox,safari) و جناب اينترنت اكسپلورر فلان فلان شده ازش پشتيباني نميكنه. ملت ايران هم كه هنوز از IE استفاده ميكنن... E-Boy 09 بهمن 1388, 22:14سلام اول از تشکر دوم چرا این همه دردسر !؟؟ :shock: از کد زیر استفاده کن بسیار راحت تر و کوتاهتر کاره بالا رو انجام میده :wink: -moz-border-radius:3px;-webkit-border-radius:3px; موفق باشی :cool: سلام دوست عزیز . برای تشکر می تونید از دکمه تشکر پایین هر پست استفاده کنید . اما درباره کد باید بگم که این کد فقط در مرورگر های نسل موزیلا کار می کنه و در 80 درصد مرورگر های مورد استفاده کاربر ها کار نمی کنه . اما با این روش که بنده گفتم 100 درصد نگم اما در 95 درصد مرورگر های مورد استفاده کاربر ها کار می کنه . همیشه برای این که به یه نتیجه دقیق برسید باید زیاد زحمت بکشید ( یک سخن از خودم که همین الآن گفتم :green: ) . سوالی بود در خدمتم . موفق باشید . echessdesign 13 بهمن 1388, 01:11آموزش خیلی خوبی بود، دستت درد نکنه. لطفا سورس رو هم ضمیمه بفرمایید. E-Boy 13 بهمن 1388, 14:21آموزش خیلی خوبی بود، دستت درد نکنه. لطفا سورس رو هم ضمیمه بفرمایید. سلام خدمت آقای سعیدی عزیز . خواهش می کنم . فایل سورس رو هم به این پست پیوند کردم . ولی انگار دوستان خیلی از این آموزش خوشحال نشدن . 76 بازدید ولی فقط 2 تا تشکر . ( :cry: ) خلاصه از این که به این آموزش نظر دادین خیلی خوشحال شدم و نهایت تشکر رو دارم . موفق باشید . pouya saadeghi 13 بهمن 1388, 15:42ولی انگار دوستان خیلی از این آموزش خوشحال نشدن . 76 بازدید ولی فقط 2 تا تشکر . ( :cry: ) چقدر عجله دارید خوب! این انجمن نسبت به بقیه انجمن ها زیاد شلوغ نیست.:rose: بچه ها کم کم تشکر میکنن:green: (منم دفعه اول با موبایل پست رودیدم که تو قالب موبایل دکمه تشکرنداره) میر حسن 08 اسفند 1388, 11:01واما یه سوال مبتدیانه از محضر بزرگان نمی شد با معرفی کردن چهار image این کار رو انجام بدیم؟ یا با ساختن چهار div? به عبارت دیگه، دلیل اینکه اومدیم و دو تا div قرار دادیم و دو تا image چیه؟
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 1428]
-
گوناگون
پربازدیدترینها