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

4 دیدگاه 4,064 آموزش HTML5 و CSS3

آموزش طراحی قالب 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 لوگو سایت باکس جستجو و یک منو هم قرار دادم

آموزش font-face@ در css

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

نکته

من تمام کد ها راخل 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 قرار دهید.

آموزش display در CSS

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

.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;

}

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

آموزش خاصیت margin و padding جلسه 12

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

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

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

کاربر پاسخ وردپرس

6 سال پیش

پاسخ

سلام این کد هایی که گفتید داخل فایل به نام …. باشه حتما باید با برنامه‌ی خاصی کد هارو نوشت یا با نود پد هم می شه؟
- زمان الله ابراهیمی ( مدیریت )
  
  6 سال پیش
  
  پاسخ
  
  دوست عزیز سلام خدمت شما فایل استایل هز اسم که دوست داشته باشید قرار بدید مشکل نداره کد های css را با هر ویرایشگری میتوایند بنویسید با خود نوت پد ساده ویندوز موفق باشید
کاربر پاسخ وردپرس

6 سال پیش

پاسخ

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

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