با سلام خدمت کاربران عزیز سایت زرین هور امروز می خوایم نحوه ساخت باکس زیبا با 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>

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

3 سال پیش
6117

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

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

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

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

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

آ
آموزش تغییر رنگ اجسام در فتوشاپ،آموزش تغییر رنگ اجسام ،فتوشاپ،آموزش فتوشاپ ،آموزش تغییر رنگ در فتوشاپ،آموزش تغییر رنگ

آموزش تغییر رنگ اجسام در فتوشاپ

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

microsoft

ذخیره چند مورد در کلیپ‌‌برد ویندوز

تغییر آیکون

تغییر آیکون مرورگر با HTML

دستورات پر کاربرد لینوکس،آموزش لینوکس،دستورات مهم لینوکس،آموزش رایگان لینوکس،ترمینال لینوکس،دستورات ترمینال لینوکس همراه آموزش،کدهای ضروری لینوکس

دستورات پر کاربرد لینوکس

کم کننده-حجم-ویدیو-سایت-آنلاین-رایگان-کم-کننده-حجم-ویدیو-حذف-صدا-در-همون-سایت

آموزش کم کننده حجم ویدیو