آموزش ایجاد باکس زیبا با 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>

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