ساخت قالب صفحه ورود در html

اچ تی ام ال
اچ تی ام ال

ساخت قالب صفحه ورود

بعد از مدتی وقفه در کنار شما هستیم تا با آموزش طراحی و اجرای یک قالب ساده برای صفحه ی ورود به سایت در کنار شما باشیم.

این قالب به صورت شخصی تنها برای اشتراک برای شما طراحی شده و در چند رنگ مختلف آماده ی استفاده ی شما می باشد.

 

موضوع :

قالب صفحه ورود به سایت چند رنگ با HTML

 

قبل از ارائه ی کدها می توانید دموی این قالب را ببنید :

 

برای استفاده از این قالب ها تنها کد مورد نظر خود را دریافت کرده و در فایلی با پسوند .html قرار دهید و آن را استفاده کنید.

قالب صفحه ورود به سایت ( آبی : #۳۳۵a9a )

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#335a9a;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

 

قالب صفحه ورود به سایت ( قرمز : #۳۳۵a9a )

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#cf000f;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

 

قالب صفحه ورود به سایت ( سبز : #۲۶a65b )

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#26a65b;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

 

قالب صفحه ورود به سایت ( زرد : #f9bf3b )

<html>
	<head>
		<meta charset="utf-8" />
		<title>LoginForm</title>
		<style type="text/css">
			body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:#f9bf3b;}
			.login{margin:200px auto;padding:20px;width:300px;border:3px dashed #333333;background:#ffffff;box-shadow:0px 0px 200px #000000;}
			.login input{display:block;padding:5px;font-family:tahoma;font-size:13px;margin:20px auto;outline:none;border:1px solid #000000;width:200px;}
			.login input[type="submit"]{border-left:10px solid #000000;cursor:pointer;}
			.login input[type="checkbox"]{display: inline;width:30px;text-align:center;margin:0px;}
			.login .remember{text-align:center;}
		</style>
	</head>
	<body>
		<div class="login">
			<form action="" method="">
				<input type="text" name="username" placeholder="Username" required="true" />
				<input type="password" name="password" placeholder="Password" required="true" />
				<input type="submit" value="Login" />
				<div class="remember">
					<input type="checkbox" name="remember" id="remember" />
					<label for="remember">Remember</label>
				</div>
			</form>
		</div>
	</body>
</html>

 

اما شاید بگید من رنگ خاصی را مد نظر دارم، حالا چیکار کنم ؟!

راه حل : خب در ششم کدهای بالا بخش خاصیت های تگ body را مشاهده کنید؛ سپس خاصیت background را با رنگ دلخواه خود البته به صورت هگزا دسیمال پر کنید.

کد مورد نظر :

body{margin:0px;padding:0px;font-family:tahoma;font-size:13px;background:/*Your Color Hex Code*/;}

برای بدست آوردن رنگ های خاص و کد رنگ آنها می توانید از این سایت هم استفاده کنید.

موفق و سربلند باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]