3 سال پیش
1553

آموزش ایجاد سایت با بک گراند ویدیویی

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

بک گراند ویدیویی

۱-اول از همه یک new folder با نام دلخواه مثلا bg می سازیم.
۲-در داخل فولدر دو فولدر دیگر با نام های cssوvideo ایجاد می کنیم.

۳-در داخل فولدر اصلی با نام bg یک فایل با فرمت html می سازیم و آن را با برنامه note pad ++ ویرایش می کنیم.

در داخل این فایل کد های زیر را می نویسیم:

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/style.css">
		<title>zarrinhoor.com</title>
	</head>
	<body>
		<video class="video" autoplay muted loop>
			<source src="video/video.mp4">
		</video>	
	</body>
</html>

بعد از این وارد فایل css که در فولدر css ساخته ایم می شویم که ما نام آن را style گذاشته ایم.
در داخل فایل css می نویسیم:

.video{
	position:fixed;
	z-index:1;
	width:auto%;
	height:auto%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	min-height:100%;
	min-width:100%;
	
}

بعد از این کار در داخل فایل html و در بالای تگ <video> می نویسیم:

<div class="content">
		<h1>زرین هور بهترین سایت ایران در آموزش  رایگان</h1>
		<p>.............................................................
		............................ متن دلخواه ....................................
		................................................................
		</p>
	</div>

بعد از این وارد فایل cssمی شویم و می نویسیم:

.content{
	position:relative;
	color:#fff;
	width:800px;
	padding: 1em;
	margin:0 auto;
	z-index:2;
}

نکته: در این آموزش فایل ویدیویی ما در داخل فولدر، به نام video.mp4 بود.

ویدیوی آموزشی در زیر:

به زودی…

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

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

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

ش
شیائومی،شیائومی در ایران،موبایل های شیائومی،برند شیائومی،لاک شدن موبایل های شیائومی در ایران،پشتیبان های شیائومی در ایران

محدود کردن گوشی های شیائومی در ایران – موبایل های شیائومی قفل میشوند؟

چند روز پیش کاربری در کوبا که موبایل شیائومی داشت گزارش کرده بود که موبایل او به طرز عجیبی قفل شده است. از دیروز خبر قفل شدن موبایل های شیائومی در ایران هم گذاشته شده است. دیروز در سایت XDA...

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان،نصب ابزارهای کالی لینوکس

نصب ابزارهای کالی لینوکس روی سایر توزیع های دبیان(اوبونتو،مینت و …)

آموزش،ترفند،آموزش اتصال قالب،قالب های HTML،HTML،HTML و PHP، آموزش اتصال HTML به PHP انواع روش های اتصال HTML به PHP

آموزش اتصال قالب HTML به PHP

19ترفند گوگل،مرورگر،قابلیت های سرچ گوگل،ترفند گوگل،چگونه سرچ کنیم،قابلیت های گوگل که نمیدانیم

چرا گوگل بهترین موتور جست‌‌ و جو جهان شده؟

آموزش 2 ترفند مخفی ویندوز 10،آموزش 2 ترفند مخفی ویندوز 10

آموزش ۲ ترفند مخفی ویندوز ۱۰