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

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

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

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

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

در این قسمت منو هارو اضافه میکنیم و طراحی اون هارو انجام میدیم و در قسمت بعد اونهارو با jquery به صورت responsive در میاریم که در گوشی های موبایل به صورت منوی مخفی در بیان و با زدن دکمه اون منو ها نمایش داده بشن

ما برای ساخت منو ها از تگ های ul, li استفاده میکنیم و درون li ها تگ a رو قرار میدیم.

کدهای زیر رو درون عنصر div هدر قرار بدین.

  <!--put these codes in <div class="header"></div>-->
<div class="items">
<ul>
<li class="hover"><a href="#">خانه</a></li>
<li class="hover"><a href="#">انجمن</a></li>
<li class="hover"><a href="#">ثبت نام</a></li>
<li class="hover"><a href="#">ورود</a></li>
<li class="hover"><a href="#">آرشیو</a></li>
<li class="hover"><a href="#">خوراک</a></li>
<li class="hover"><a href="#">ارتباط با ما</a></li>
</ul>
</div>

خب اگه کدهارو در مرورگر اجرا کنید میبینید که خیلی زشت شده :(

خب حالا قالبمون رو باید آرایش کنیم :D کدهای زیر رو در فایل style.css خود وارد کنید

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

  /*-------------- RESET STYLE ------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
ol, ul {
list-style: none;
}
/*-------------- RESET STYLE ------------------*/
ul {
display: table;
}
.hover>a {
display: table;
color:#fff;
font-family:tahoma;
font-size:16px;
text-decoration:none;
padding:5px 10px;
}
.hover>a:hover {
background-color:rgba(0,0,0,0.3);
}
ul>li {
float: right;
display: table
}

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

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

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

:)

DOWNLOAD SOURCE

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