ساخت هدر – 6

در این قسمت ما باید با کلاس ها و id که به نظر من اصل زبان css هستند کار کنیم
برای ساخت هیدر یا سر صفحه ما به یک id نیاز داریم من نام اون رو headr گذاشتم این نام دلخواه است به این صورت می نویسیم

#headr{} 

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

ابتدا برای تعیین عرض آن از خاصیت width استفاده می کنیم من اینجا مقدار را برابر 960px قرار دادم

حالا باید ارتفاع را مشخص کنیم که از خاصیت height استفاده می کنیم مقدار آن را 150 پیکسل قرار میدهیم.

حالا کدها را مطابق روبه رو به تگ style خود اضافه میکنیم

#header{
width: 960px;
height: 150px;
}

خاصیت  مهم برای تعیین حاشیه padding است که مقدار آن را برابر صفر قرار میدهیم

خاصیت بعدی رنگ پس زمینه و عکس پس زمینه است که ما اینجا از خاصیت  background-color و background-image برای این دو استفاده می کنیم به صورت زیر وارد میکنیم

background-color: #FF0000;
background-image: none ;

خاصیت بعدی رنگ و اندازه حاشیه کادر هدر است برای این کار از خاصیت border استفاده می کنیم خود این خاصیت از چند حالت تشکیل شده به شرح زیر

border-right و border-left و border-bottomو border-top

خود این چهار حالت  را نیز می توان به صورت زیر برای قرار دادن یک border کامل از خاصیت  border استفاده کرد

خاصیت های border شامل چنیدن حالت خط هستند که ما از نوع solid  و قطر 1px استفاده می کنیم

به شکل زیر می نویسیم

border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;

برای درک بهتر کد هدر ما تا اینجا به شکل زیر بوده است

#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #FF0000;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
}

خب برای دیدن نتیجه کار باید با استفاده از تگ div کد خود را فراخوانی کنیم

<div id=”header”></div>

به شکل زیر این کار را انجام میدهیم

<html >

<head>

<style>
#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #FF0000;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
}

</style>



</head>

<body>
<div id=”header”></div>
</body>

</html>

در پایان کد قالب ما به این شکل خواهد بود

<html>

<head>
<style type=”text/css”>

body{
padding:0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}

p{
font-size: 1em;
color: #333333;
line-height: 1.5em;
background-color:transparent;
}

a{
color: #3399FF;
text-decoration: none;
}

a:hover{
color: red;
}

#header{
width: 960px;
height: 150px;
padding: 0;
background-color: #FF0000;
background-image: none ;
border-right: solid 1px ;
border-left:solid 1px ;
border-top: solid 1px;
}

</style>
</head>
<body>
<div id=”header”></div>
</body>

</html>

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

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