ایجاد بلوک ها ، موضوعات سطون راست 10

قبل از شروع آموزش این بخش من یه اشتباهی در تعیین فونت قالب داشتم چون اکثر قالب هایی که توی اینترنت هست با فونت  Tahoma نوشته میشه من اون رو به Arial نوشتم همین جا فونت رو تغییر میدیدم و بعد می ریم سراغ آموزش

برای تغییر فونت به استایل میریم و در بخش body فونت رو عوض می کنیم به شکل زیر

body{
padding:0px;
margin: 0px;
font-family: Tahoma;
background-color: #DDDDDD;
color: #333333;
}

خب حالا میریم سراغ آموزش این بخش

ابتدا باید یک سطون سمت راست ایجاد  کنیم و بعد سطون را در تگ دایو warp یعنی بدنه قالب قرار دهیم برای ایجاد یک سطون به یک id نیاز داریم من نامش را menu گذاشتم به شکل زیر

#menu{

}

حالا یک تگ div در درون تگ دایو warp قالب ایجاد میکنیم

<div id=”warp”>
    <div id=”menu”>



    </div>

</div>

به قسمت استایل رفته و وارد بخش menu شوید ابتدا عرض سطون را تعیین می کنیم که از خاصیت width استفاده می کنیم که من اینجا مقدارش را 220قرار دادم

#menu{
width: 220px;
}

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

#menu{
width: 220px;
float: right;
}

و برای اینکه سطون ما به پایین ترین بخش از قالب یعنی فوتر یا پاصفحه نچسبد از خاصیت  margin-bottom استفاده میکنیم که مقدارش برابر 20 پیکسل است

#menu{
width: 220px;
float: right;
margin-bottom: 20px;
}

کار ساخت سطون سمت راست پایان یافت حالا بایستی ما بلوک ها را که در این سطون ایجاد می شوند را ایجاد کنیم برای این کار ما نیاز داریم یک کلاس جدید بسازیم من نامش را box  گذاشتم و به شکل زیر کار می کنیم

.box{

}

طبق معمول به بخش بدنه قالب رفته و یک تگ دایو درون تگ دایو menu ایجاد کنید

<div id=”warp”>
    <div id=”menu”>
         <div class=”box”>

         </div>
    </div>

</div>

برای راحتی کار چند لینک به تگ دایو box قرار می دهید و برای اینکه لینک ها از هم فاصله بگیرند از تگ <br> در پایان هر لینک استفاده می کنیم

<div id=”warp”>
    <div id=”menu”>
         <div class=”box”>
  <a href=”#”>لینک شماره یک</a><br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
         </div>
    </div>

</div>

حلا به قسمت استایل box رفته و برای اینکه متن لینک ها به سمت راست منتقل شود از خاصیت direction استفاده می کنیم همچنین مقدار عرض بلوک width را برابر 200 قرار می دهیم

.box{
direction: rtl;
width: 200px;
}

حالا برای اینکه بلوک ها به هم نچسبند از خاصیت margin-top استفاده میکنیم و همچنین برای اینکه متن لینک ها به پایین بلوک نچسبد از خاصیت padding-bottom استفاده می کنیم

.box{
direction: rtl;
width: 200px;
margin-top: 10px;
padding-bottom: 10px;
}

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

.box{
margin-top: 10px;
width: 200px;
direction: rtl;
padding-bottom: 10px;
background-color: #BBBBBB;
border: solid 1px;
}

هر بلوکی یک موضوع دارد ما می خواهیم یک هدر یا تیتر برای بلوک خود ایجاد می کنیم برای این کار به یک کلاس به نام titr نیاز داریم

.titr{}

 

و طبق معمول یک تگ دایو درون تگ دایو box ایجاد می کنیم به شکل زیر

         <div class=”box”>
         <div class=”titr”>موضوع بلوک</div>
  <a href=”#”>لینک شماره یک</a><br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
  <a href=”#”>لینک شماره یک</a> <br />
         </div>

حالا به استایل titr رفته و خاصیت متن ضخیم  bold را مانند زیر قرار می دهیم

.titr{
 font-weight: bold;
}

برای اینکه متن ما به وسط منتقل شود از خاصیت text-align و برای اینکه عنوان بلوک با لینک ها فاصله پیدا کند از خاصیت margin-bottom استفاده می کنیم

.titr{
 font-weight: bold;
 text-align: center;
 margin-bottom: 5px;
 text-align: center;
}

اندازه فونت را برابر 0.8  می دهیم همچنین یک رنگ برای آن تعیین میکنیم

.titr{
 font-weight: bold;
 text-align: center;
 margin-bottom: 5px;
 text-align: center;
 font-size: 0.8em;
color: #669933;

}

و برای بک گراند آن از خاصیت background-image و یک عکس در قسمت src قرار می دهیم

.titr{
 font-weight: bold;
 text-align: center;
 margin-bottom: 5px;
 text-align: center;
 font-size: 0.8em;
 color: #669933;
 background-image: url(http://s1.picofile.com/file/7509379351/headers.gif);
}

و با استفاده از خاصیت height برای عنوان بلوک خود ارتفاع را قرار می دهیم به اندازه 20 پیکسل

.titr{
 font-weight: bold;
 text-align: center;
 margin-bottom: 5px;
 text-align: center;
 font-size: 0.8em;
 color: #669933;
 background-image: url(http://s1.picofile.com/file/7509379351/headers.gif);
 height: 20px;
}

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

.box a{

}

این یعنی لینک های کلاس box  برای فاصله گرفتن متن از بلوک می توانید از فاصله اچ تی ام ال یعنی &nbsp; استفاده کنید این خاصیت چون  در تمام مرورگر ها به خوبی نمایش می یابد استفاده می شود به شکل زیر که ما از دو فاصله استفاده کرده ایم

         <div class=”box”>
         <div class=”titr”>موضوع بلوک</div>
 &nbsp;&nbsp;<a href=”#”>لینک شماره یک</a><br />
 &nbsp;&nbsp;<a href=”#”>لینک شماره یک</a> <br />
 &nbsp;&nbsp;<a href=”#”>لینک شماره یک</a> <br />
 &nbsp;&nbsp;<a href=”#”>لینک شماره یک</a> <br />
 &nbsp;&nbsp;<a href=”#”>لینک شماره یک</a> <br />
         </div>

اما چون هدف ما کار با ابزار css است از خاصیت margin-right برای حرکت  لینک ها استفاده می کنیم سپس یک رنگ برای لینک ها تعیین می کنیم و اندازه فونت لینک ها را برابر 0.8 قرار می دهیم

.box a{

 margin-right: 10px;

 color: #333366;
 font-size: 0.8em;
}

سپس برای اینکه لینک ها کمی با فاصله از هم جدا باشند از خاصیت line-height استفاده می کنیم و مقدار آن را برابر 1.3 قرار می دهیم

.box a{
 color: #333366;
 font-size: 0.8em;
 line-height: 1.3em;

}

و برای اینکه جلوه بهتری به لینک ها بدهیم خاصیت hover یعنی همان رفتن روی لینک وتغییر رنگ آن را به شکل زیر به استایل اضافه می کنیم

.box a:hover{
   color: #FF0000;
}

تا اینجا ساخت بلوک ما پایان یافت اگر دقت کرده باشید در هرسایتی از چند بلوک برای نمایش موضوعات ، لینک ها و یا نظر سنجی ها استفاده می کنند حالا چگونه ما این کار را انجام دهیم ؟

کار بسیار ساده ای است فقط کافی است تگ دایو box را کپی کنید و جای گذاری کنید البته در تگ دایو menu به شکل زیر

<div id=”warp”>
<div id=”menu”>

           <div class=”box”>
           <div class=”titr”>موضوع بلوک</div>
        <a href=”#”>لینک شماره یک</a><br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
           </div>
                    <div class=”box”>
           <div class=”titr”>موضوع بلوک</div>
        <a href=”#”>لینک شماره یک</a><br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
        <a href=”#”>لینک شماره یک</a> <br />
           </div>

    </div>

</div>

در پایان کد کلی این بخش به صورت زیر است

 

 

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

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