محبوبترینها
قیمت انواع دستگاه تصفیه آب خانگی در ایران
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
سیگنال در ترید چیست؟ بررسی انواع سیگنال در ترید
بهترین هدیه تولد برای متولدین زمستان: هدیه‌های کاربردی برای روزهای سرد
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1831528777
آموزش ایجاد گوشه های گرد به وسیله تصاویر و 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]
[تعداد بازديد از اين مطلب: 1407]
-
گوناگون
پربازدیدترینها