طراحی هدر سایت با css

هدایت عباسی آموزش CSS

در این بخش از آموزش css به سراغ طراحی هدر سایت با css میرویم. در مثال زیر یک هدر و منو زیبا را ایجاد کرده ایم که می توانید ان را در پروژه های خود نیز استفاده کنید. پس با ما باشید.

این آموزش متعلق به تاپ سایت 98 میباشد.

طراحی هدر سایت:

برای طراحی هدر ابتدا باید یک header را ایجاد کنیم . ما در مثال زیر یک منو را در بخش هدر سایت ، قرار دادیم.

در قسمت پایین یک هدر را می بینید. این کد را می توانید در یک فایل با پسوند html ذخیره کنید و اجرا نمایید تا خروجی را ببینید.

در این مثال یک هدر همراه با یک منو طراحی کرده ایم.

توضیحات طراحی هدر سایت :

برای طراحی هدر سایت ، بایستی یک div با کلاس header مشخص کنیم.

سپس برای آن ، استایل یا css بنویسیم.

در کلاس هدر ، عرض را 100 در صد و طول آن را 50 پیکسل قرار داده ایم.

سپس رنگ پس زمینه آن را مشخص کرده ایم. رنگ متن را سفید در نظر گرفته ایم.

با دستور padding فاصله داخلی آن را 10 پیکسل گذاشته ایم.

با این دستورات هدر ساخته می شود.

ساخت منو در هدر سایت :

برای ساخت منو در هدر سایت ، چند تگ a یا لینک قرار می دهیم نام کلاس آن را a گذاشته ایم.

حال شروع می کنیم به نوشتن استایل برای منو.

سایز لینک ها را 20 پیکسل می گذاریم. فاصله داخلی یا padding را برای آن مشخص می کنیم. رنگ متن را سفید در نظر می گیریم تا منو واضح باشد .

با دستور text-decoration خط زیر متن های لینک را برمی داریم.

منو ما آماده است. حال برای هاور ، استایل خود را می نویسیم.

یعنی وقتی کاربر روی متن ها قرار گرفت منو تغییر کند . برای این کار کافی است رنگ پس زمینه را تغییر دهید.

<!DOCTYPE html>
<html lang="en">
<head>
<title>TopSite98.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
.header {
width: 100%;
height: 50px;
background: #1abc9c;
color: white;
padding: 10px ;
}
.a{
color: #fff;
padding: 15px 10px;
text-decoration: none;
font-size: 20px;
margin-bottom: 0;
}
.a:hover{
background-color: #ff9900;
color: #fff;
}
.content {padding:20px;}
</style>
</head>
<body>

<div class="header">
<a href="" class="a">html</a>
<a href="" class="a">css</a>
<a href="" class="a">jquery</a>
<a href="" class="a">php</a>
</div>

<div class="content">
<h1>TopSite98.Com</h1>
<p>topsite98</p>
<p>topsite98</p>
<p>topsite98</p>
<p>topsite98</p>
<p>topsite98</p>
</div>

</body>
</html>

امیدواریم این آموزش برای شما مفید باشد. کد بالا تست شده است.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید