طراحی سایت ساناتک
0
تعیین ارتفاع و عرض تصویر در صفحه وب

پیش از این که پیاده سازی آموخته های جدید را در سایت خود آغاز کنیم می خواهیم نگاهی به پیاده سازی افکت های هنری با استفاده از تعریف مقیاس ثابت داشته باشیم.

دیدیم که چگونه می توانیم یک block-level element را با اندازه های مشخص fix کنیم. در اینجا نیز به شما خواهیم آموخت که چگونه از این تکنیک استفاده کنید. زمانی که ادغام یک متن رنگی را در عکس خود با استفاده از این تکنیک مشاهده کردید به زیبایی و اهمیت این کار پی می برید. در اینجا با استفاده از padding متن خود را از بالای صفحه درون div خود فاصله داده ایم:

.sunset {

border: 1px solid black;

color: white;

font-weight: bold;

font-size: 300%;

background: black url(sunset.jpg);

width: 650px;

height: 125px;

padding-left: 50px;

padding-top: 400px;

}

کد HTML برای این افکت از این ساده تر نمی شد:

<div class="sunset">Sunsets are a gift of nature.</div>

یک div سایزبندی شده

یک div سایزبندی شده

تصویر پس‌زمینه برا بخش آدرس یابی یا Navigation

برای زیباسازی بیشتر سایت تصویری برای پس‌زمینه بخش Navigation سایت در نظر گرفتیم.

تصویری دکوری برای بخش Navigation

تصویری دکوری برای بخش Navigation

به نظر می رسد عرض عکس بالا برای بخش Navigation سایت ما مناسب باشد اما ارتفاعی بسیار بیشتر داشته باشد! در فایل CSS به راحتی ارتفاع کادر Navigation را تعریف می کنیم به طوری که بتوانیم از این تصویر پس‌زمینه زیبا برای آن استفاده کنیم.

#navigation {

width: 180px;

height: 484px;

background: #7da5d8 url(backgrounds/nav-bg.jpg) no-repeat;

}

ظاهر جدید بخش Navigation

ظاهر جدید بخش Navigation

تعداد بازدید: 190
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید