3 سال پیش
4963

آموزش ایجاد باکس زیبا با html و css

با سلام خدمت کاربران عزیز سایت زرین هور امروز می خوایم نحوه ساخت باکس زیبا با html و css را به شما آموزش بدهیم.

باکس زیبا

اول از همه برای ساخت باکس در فایل html خودمان یک div ایجاد می کنیم:

<div class="box-saka">

</div>

بعد از این کار کد های زیر را داخل تگ div خودمان می گذاریم:

<style>
	.box-saka
	{
	width:500px;
	height:700px;
	background:#456321;
	color:fff;
	border:2px dotted #fff;
	border-radius:4px;
	box-shadow: # 2f3c4a 2px 0px 2px 2px (rgb 0 15 2 3);

	}

</style>

و هم اکنون باکس ما ساخته شد:

۱- تگ style برای سبک دادن به  هست که لازم نیست یک فایل دیگر برای کد های css بسازید.

۲- وارد کد های css می شویم–> کد width برای عرض دادن  است.

۳- height برای ارتفاع  است.

۴- background برای تنظیم رنگ پس زمینه است.

۵-color برای رنگ متن داخل است.

۵-border برای دادن حاشیه است که با پیکسل مشخص می شود dotted برای نوع حاشیه است که ما نقطه گذاری کرده ایم شما می توانید dashed یا هر چیز دیگری بگذارید.

۶- border-radius برای خم کردن گوشه ها است که با پیکسل مشخص می شود.

۷- box-shadow برای سایه دادن است که باعث زیبایی باکس می شود.

همچنین می توانید به کلاس هم دستور hover یا شناور بودن موس روی آن  بدهید که به صورت زیر است:

<style>
	.box-saka:hover
	{
	width:500px;
	height:700px;
	background:#456321;
	color:fff;
	border:2px dotted #fff;
	border-radius:6px;
	box-shadow: # 2f3c4a 4px 1px 4px 4px (rgb 0 15 2 3);

	}
	

</style>

با تشکر از شما که با ما همراه بودید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب پر بازدید

ش
شخصی سازی محیط CMD،ترفندهای ویندوزی،تنظیمات cmd ،آشنایی با cmd،شخصی سازی ویندوز،کار با تنظیمات cmd،خط فرمان ویندوز،تم های cmd

شخصی سازی محیط CMD

با سلام و وقت بخیر خدمت شما همراهان گرامی امروز آموزش شخصی سازی محیط CMD را داریم. جهت اجرای cmd مراحل زیر را به ترتیب دنبال کنید: ۱- روی آیکون ذره بین که در کنار منو استارت قرار دارد کلیک...

آشنایی،معرفی و انواع پسوند دامنه ها،پسوند دامنه ها،انواع هاست و دامنه،آشنایی با لینک سایت ها،توضیح انواع دامنه ها،آشنایی با urlها،اجزای لینک ها،

آشنایی،معرفی و انواع پسوند دامنه ها

آشنایی با الگوریتم های مختلف رمز نگاری و رمز گشایی در جهان

آشنایی با الگوریتم های مختلف رمزنگاری و رمزگشایی در جهان

CPU

راهنمای جامع انتخاب پردازنده(CPU) برای کامپیوتر

ترفند های جذاب گوگل که نمی دانستید،قابلیت های مخفی گوگل،ترفند های کاربردی،ترفند،گوگل،راز های عجیب گوگل،ترفند های سرچ گوگل،عجایب گوگل،قابلیت های کاربردی گوگل

ترفند های جذاب گوگل که نمی دانستید!