ساخت هدر در html

در این بخش از آموزش html می خواهیم به سراغ ساخت هدر در html برویم.

برای ساخت هدر  در html ، باید با دستورات و کدهای html آشنا باشید. در این آموزش قصد داریم یک هدر را طراحی کنیم و با css آن را جذاب کنیم.

در مثال زیر ساخت هدر در html را تجربه می کنیم. ما قصد داریم یک هدر ریسپانسیو را ایجاد کنیم.

در ابتدا کدهای html را می نویسیم . سپس در قسمت style کدهای css را می نویسیم.

کد ساخت هدر با html :

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Tahoma;
}
.header {
overflow: hidden;
background-color: lightsteelblue;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover { background-color: #ddd; color: black; }
.header a.active { background-color: dodgerblue; color: white; }
.header-right { float: right; }
@media screen and (max-width: 500px) {
.header a { float: none; display: block; text-align: left; }
.header-right { float: none; }
}
</style>
</head>
<body>
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="padding-left:20px">
<h1>sh711.com</h1>
<p>Responsive Header</p>
<p>how to create a responsive header with CSS.</p>
</div>
</body>
</html>

 

کد html ساخت هدر :

در ابتدا با یک div هدر را  با کلاس header ایجاد می کنیم. سپس آن را به دو بخش تقسیم می کنیم.

بخش سمت چپ یک لینک یا یک دکمه است . در سمت راست نیز یک منو است. این هدر ریسپانسیو است یعنی با تغییر سایز تغییر می کند.

در زیر div اصلی یک div دیگر نیز وجود دارد که باکس است که مطالبی داخل ان  قرار داده ایم که چیز مهمی نیست.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sh711.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
<div style="padding-left:20px">
<h1>sh711.com</h1>
<p>Responsive Header</p>
<p>how to create a responsive header with CSS.</p>
</div>
</body>
</html>

 

کد css ساخت هدر :

در قسمت style کدهای css نوشته شده است که برای ساخت هدر استفاده می شود .بدون کدهای css کدهای html هیچ ارزشی ندارد.

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

از دستور یا متای viewport برای ریسپانسیو کردن استفاده می شود باید این متا را در قسمت head بنویسیم.

<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Tahoma;
}
.header {
overflow: hidden;
background-color: lightsteelblue;
padding: 20px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover { background-color: #ddd; color: black; }
.header a.active { background-color: dodgerblue; color: white; }
.header-right { float: right; }
@media screen and (max-width: 500px) {
.header a { float: none; display: block; text-align: left; }
.header-right { float: none; }
}
</style>

امیدواریم این آموزش برای شما مفید باشد.


نویسنده : هدایت عباسی

عضویت طلایی
ثبت نظر