آموزش طراحی قالب html و css جلسه 2 پاسخ وردپرس

آموزش قبلی

آموزش ساخت منوی آبشاری در html و css قسمت اول

آموزش بعدی

آموزش ویژگی overflow در css

آموزش طراحی قالب html و css

فهرست موضوعات در این آموزش

بنام و یاد خدا سلام ,

در خدمت شما هستم با جلسه دوم آموزش طراحی قالب html و css در وب سایت پاسخ وردپرس.

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

آموزش طراحی header سایت

برای پیاده سازی header کد html زیر را داخل فایل index.html قرار دهید

<header class="header-top">
    <div class="container">
        <div class="logo">
            <img  alt="لوگو" src="images/LOGO-REPLYWP.png">
        </div>
        <div class="menu-and-search">
            <nav class="menu">
              <ul>
                     <li><a href="http://#">تماس با ما</a></li>
                    <li><a href="http://#">تبلیغات</a></li>
                    <li><a href="http://#">راهنمای دانلود</a></li>
                    <li><a href="http://#">نویسندگی</a></li>
                    <li><a href="http://#">درخواست نرم افزار</a></li>
                </ul>
            </nav>
            <div class="search">
                <form role="search" method="get" class="searchform" action="/">
                    <fieldset>
                        <input type="text" name="s" class="search" placeholder="تایپ کنید و سپس اینتر بزنید ..." value="">
                    </fieldset>
                </form>
            </div>


        </div>

    </div>

</header>

</div>

<ul>

<li><a href="http://#">تبلیغات</a></li>

<li><a href="http://#">راهنمای دانلود</a></li>

<li><a href="http://#">نویسندگی</a></li>

<li><a href="http://#">درخواست نرم افزار</a></li>

</ul>

</nav>

</fieldset>

</form>

</div>

</header>

دقت داشته باشید که من توی قسمت بالای header لوگو سایت باکس جستجو و یک منو هم قرار دادم

معرفی تگ های html5 قسمت اول

یک آموزش جذاب دیگه!

نکته

من تمام کد ها راخل header قرار دادم که کد html5 است که یک کلاس هم بهش اختصاص دادم
و منوی بالای باکس جستجو را هم داخل کد nav قرار دادم چون این منو ها برای من مهم بودن

بریم سراغ استایل دهی اگه لان شما کد های بالا داخل مرور گر اجرا کنید مثال تصویر زیر خواهد بود .

من برای پس زمینه header از یک تصویر استفاده کردم که میتوانید برای لینک زیر دریافت نمایید

دانلود پس زمینه و لوگو

برای تعریف تصویر پس زمینه header کد های زیر داخل فایل style.css قرار دهید.

.container{
    width: 1200px;
    margin: 0 auto;

}
.header-top{
    background-image: url(images/bg-header.jpg);
    color: #FFF;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
    float: right;

}

.container{

width: 1200px;

margin: auto;

}

.header-top{

background-image: url(images/bg-header.jpg);

color: #FFF;

background-repeat: no-repeat;

background-size: cover;

height: auto;

width: 100%;

float: right;

}

دقت داشته باشید که من یک کلاس عمومی تعریف کردم بنام container که عرض ۱۲۰۰ px براش در نظر گرفتم

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

آموزش طراحی قالب HTML و CSS جلسه 3

یک آموزش جذاب دیگه!

.logo{
    float: right;
    width: 30%;
    margin-top: 10px;
}
.menu-and-search{
    float: left;
    width: 68%;
}

.logo{

float: right;

width: 30%;

margin-top: 10px;

}

.menu-and-search{

float: left;

width: 68%;

}

من برای تقسم بندی از خاصیت float در css استفاده کردم برای این که منو و باکس جستجو هم یک استایل مناسب بگیرند کدهای زیررا داخل فایل style.css قرار دهید

.menu {
    width: 100%;
    display: block;
    float: right;
}
.menu ul{
    width: 100%;
    float: left;
    padding: 0;
    position: relative;
    top: 2px;
    margin-bottom: 5px;
    margin-right: 13px;
    text-align: right;
    margin-top: 10px;
}
.menu ul li{
    margin-left: 7px;
    float: left;
}
.menu ul li a{
    display: block;
    color: #fff;
    padding: 5px 16px;
    border-radius: 0;
    overflow: hidden;
    font-size: 13px;
    background-color: rgba(58,58,58,0.27);
}
input.search {
    outline: 0;
    margin: 0;
    font-size: 11px;
    border-radius: 2px;
    position: relative;
    top: 5px;
    border-left: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    background-color: #fff;
    height: 40px;
    width: 384px;
    color: #787878;
    padding: 0 10px;
    float: left;
    border: 0;
}
.search fieldset:before {
    content: "\f002";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    float: left;
    padding: 7px 15px 2px 15px;
    color: #fff;
    font-size: 20px;
    position: relative;
    top: 5px;
    margin-right: 0;
    border-radius: 3px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 0;
    background-color: #28BB66;
    width: 22px;
    height: 31px;
}

.menu {

width: 100%;

display: block;

float: right;

}

.menu ul{

width: 100%;

float: left;

padding: ;

position: relative;

top: 2px;

margin-bottom: 5px;

margin-right: 13px;

text-align: right;

margin-top: 10px;

}

.menu ul li{

margin-left: 7px;

float: left;

}

.menu ul li a{

display: block;

color: #fff;

padding: 5px 16px;

border-radius: ;

overflow: hidden;

font-size: 13px;

background-color: rgba(58,58,58,0.27);

}

input.search {

outline: ;

margin: ;

font-size: 11px;

border-radius: 2px;

position: relative;

top: 5px;

border-left: ;

border-bottom-left-radius: ;

border-top-left-radius: ;

background-color: #fff;

height: 40px;

width: 384px;

color: #787878;

padding: 10px;

float: left;

border: ;

}

.search fieldset:before {

content: "\f002";

display: inline-block;

font: normal normal normal 14px/1 FontAwesome;

float: left;

padding: 7px 15px 2px 15px;

color: #fff;

font-size: 20px;

position: relative;

top: 5px;

margin-right: ;

border-radius: 3px;

border-bottom-right-radius: ;

border-top-right-radius: ;

border: ;

background-color: #28BB66;

width: 22px;

height: 31px;

}

بغد از قرار کدهای بالا ما الان باید نتیجه کار مثل تصویر زیر داشته باشیم

آموزش طراحی قالب html و css طراحی footer نمایش

یک آموزش جذاب دیگه!

خوب این جلسه از آموزش طراحی قالب html و css در وب سایت پاسخ وردپرس به پایان رسید اگه این آموزش دوست داشتید به دوستان خود به اشتراک بزارید
تا یکی دیگه از جلسات آموزشی وب سایت پاسخ وردپرس خدا نگهدار

میانگین رتبه 3.5/5 تعداد رای : 6

اشتراک‌ گذاری

با استفاده از روش‌های زیر می‌توانید این صفحه را با دوستان خود به اشتراک بگذارید.

دوره های پیشنهادی

مدرس : زمان الله ابراهیمی

همه دوره ها

انصراف

Fereshte 1398/01/02

سلام این کد هایی که گفتید داخل فایل به نام …. باشه حتما باید با برنامه‌ی خاصی کد هارو نوشت یا با نود پد هم می شه؟

پاسخ

زمان الله ابراهیمی 1398/02/02

دوست عزیز سلام خدمت شما فایل استایل هز اسم که دوست داشته باشید قرار بدید مشکل نداره کد های css را با هر ویرایشگری میتوایند بنویسید با خود نوت پد ساده ویندوز موفق باشید

Fereshte 1398/30/01

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

زمان الله ابراهیمی 1398/31/01

سلام خدمت شما دوست عزیز برای این که بهتر کد ها را بهتر مدیریت کنیم کد های style داخل فایل بنام style.css قرار میدیم یا هر اسم دیگه که دوست داشته باشید فقط تنها نکته باید رعایت بشه با پسوند .cssباشه امید وارم که منظور شما را درست متوجه شده باشم بازم اگه سوال بود در خدمتم دوست عزیز موفق و سر بلند باشید مثل همیشه

منتشر شده در تاریخ:	7 خرداد 1402
دسته‌بندی اصلی	آموزش HTML5 و CSS3
بازدید	4,060
	۴ دیدگاه

آموزش طراحی قالب html و css جلسه ۲

آموزش ساخت منوی آبشاری در html و css قسمت اول

آموزش ویژگی overflow در css

آموزش طراحی قالب html و css

آموزش طراحی header سایت

نکته

دانلود پس زمینه و لوگو

انصراف

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