2 سال پیش
1307

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

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

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

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

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

چ
چند برنامه کاربردی ایفون،ایفون،اپلیکیشن ایفون،اپلیکیشن،برنامه های کاربردی،ایفوندار ها،IOS،برنامه ی ایفون،فتوشاپ،اب و هوا،ادیت،رمز عبور،پسورد

چند برنامه کاربردی ایفون

چند برنامه کاربردی ایفون که کمک های به سزایی به ما میکند. امروزه زندگی ما بسیار وابسته به گوشی ها شده و نه ننها حجم زیادی از امورات جاری و روزمره ی ما که بخش زیادی از احساسات و عواطف...

XML

قابلیت ساخت نقشه سایت XML به نسخه‌ی جدید وردپرس افزوده خواهد شد!

قابلیت های جدید فتوشاپ 2020 و نحوه کار کردن با آن ها،قابلیت های جدید،

قابلیت های جدید فتوشاپ ۲۰۲۰ و نحوه کار کردن با آن ها

جست‌وجو با کاراکترهای جایگزین در WORD،جست جو در word،کارکترهای جایگزینی در ورد،

جست‌وجو با کاراکترهای جایگزین در WORD

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون،غیر فعال سازی اندروید و ایفون،

آموزش غیرفعال کردن تصحیح خودکار در کیبورد اندروید و آیفون