سلام.
واقعا پوزش می خوام که اینقدر دیر دارم آموزش رو می زارم:19:
خوب کجای کار بودیم.
حالا فهمیدم اینجای کار:31:
حالا ااااااااااااا.
این آموزش هم فرق زیادی با پست قبلی نداره فقط یه خرده تغییر باید توی کد HTML ایجاد کنید.
مزیت این کار اینه که نیاز نداره دوتا DIV تعریف کنید یکی هم کافیه.
این صورت:
[html]<div class="Vista Live"></div>[/html]این کار هم کلاس ها رو با هم ادغام می کنه به این طریق که کلاس مادر+فاصله+کلاس بعدی ( همون بچه دیگه ).
ولی شما یک کار دیگه انجام بدید که اونم تغییر اندازه ی Padding هست که باید از قبلی یه خورده باید بزرگتر باشه ( 72 رو می کنیم 76 ).
حالا صفحه مون اینجوری تغییر می کنه.
[html]<html>
<head>
<Title>Amin eHelp --- Sample 3</Title>
<Style>
.Vista {
Border:none;
Background-Image:url("Vista.png");
Padding:76px 0px 0px 0px;
Background-Repeat: no-Repeat;
}
.Live {
Background-Position:0px -80px;
}
</Style>
</head>
<Body>
<div class="Vista Live"></div>
</Body>
</html>[/html]
آموزش آخر که مهمترین آموزش هست!!!
همونطور که گفتم پر کاربرد ترین آموزشهای این دوره هست.
توی این آموزش یک دستور دیگه اضافه می شه که تقریبا تمام کارهایی که مربوط به بک گراند ) Background ( می شه رو باخودش داره.
این نوع نوشتن دستور هست. به این شکل:
[html]Background: Transparent | Color | URL | Repeat | Scroll | Position[/html]در این دستور زیاد لازم نیست به ترتیب تعریفشون کنید شما حتا می تونید بعضی از دستور ها رو هم نزارید.
برای کار ما همین هم کافیه زیر :
[html]Background:url("Vista.png") 0px -158px no-repeat;[/html]همون طور که می بینید ما این دستور ها رو به ترتیب درونش به کار بردیم.
[html]Background-Image:url("Vista.png");
Background-Position:0px -158px;
Background-Repeat: no-Repeat;[/html]این کد علاوه بر این که کار مارو سریعتر راه می ندازه بلکه بهینه سازی هم در کدمون انجام می گیره.
پس صفحه ی ما به این شکل تغییر می کنه.
[html]<html>
<head>
<Title>Amin eHelp --- Sample 4</Title>
<Style>
.Vista {
Border:none;
Background:url("Vista.png") 0px -158px no-repeat;
Padding:76px 0px 0px 0px;
}
</Style>
</head>
<Body>
<div class="Vista"></div>
</Body>
</html>[/html]خوب دیدید که این چقدر بدرد بخور تره.
بالاخره آموزشمون به پایان خودش رسید.
دوستان هر کس از شما مشکلی داشت این جا مطرح کنید. تا در اصرع وقت جوابتون رو بگیرید.
راستی من نمونه ای از این آموزش ها رو واستون توی آدرس زیر گذاشتم می تونید دانلودش کنید.
کد:
http://amin.ehelp.googlepages.com/AmineHelp---CSSSample.rar
امید وارم خوشتون آمده باشه خدا حافظ...