close
تبلیغات در اینترنت
آموزش طراحی قالب - طراحی هدر - قسمت اول

آموزش طراحی قالب - طراحی هدر - قسمت اول

آموزش طراحی قالب - طراحی هدر - قسمت اول
تعداد بازديد : 39

آموزش طراحی قالب - طراحی هدر - قسمت اول

با سلام خدمت کاربران سایت anonymoushacker

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

این دوره به صورت متنی است و تصویری است و در پایان هر قسمت سورس کد کار گذاشته میشود. :)

در این قسمت هدر سایت را طراحی میکنیم.

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

ابتدا یک پوشه ایجاد کنید. این پوشه اصلی قالبمون می باشد. سپس در پوشه ای که ساختید یک فایل به نام index.html ایجاد کنید. یک فایل استایل هم باید ایجاد کنید به نام style.css سپس فایل index.html را با یک نرم افزار تکست ادیتور مانند نوت پد باز کرده و کد های زیر را در آن بنویسید.

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
</body>
</html>

خب به توضیح کدها میپردازیم

 <link rel="stylesheet" href="style.css"/> 

کد بالا فایل استایلی که در مراحل قبل ساختیم را به صفحه html ما لینک میکند

در ادامه باید div بخش هدر را به صفحه html اضافه کنیم و به اون استایل بدیم.

کد زیر را در قسمت body فایل html اضافه کنید. این کد یک عنصر div را در فایل html ما میسازد.از عنصر div برای قسمت بندی قالب استفاده میشود.

 <div class="header"></div> 

خب میرسیم به بخش استایل دهی به عنصر div که خودم عاشق این بخش طراحی قالب هستم. :)

کدهای زیر را در فایل style.css خود بنویسید.

این کد های میزان height عنصر و background-color آن را تایین میکند.

 body {
margin: 0;
padding: 0;
}
.header {
height: 220px;
background-color: #790000;
}

خب تا اینجای کار هدر رو ساختیم و به اون رنگ دادیم.

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

سورس کد این قسمت را از لینک زیر دانلود کنید.

کانال تلگرامی ما @csslearn

:)

DOWNLOAD SOURCE

نویسنده :
تاریخ انتشار : سه شنبه 18 مهر 1396 ساعت: 7:34
بخش نظرات این مطلب
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی