نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

شناور ساختن عناصر و تراز عمودی

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

خاصیت Float

از این خاصیت برای شناور کردن عناصر و قرار دادن آن ھا در کنار یکدیگر استفاده می شود و یکی از سه مقدار را می
پذیرد :
None : مقدار پیشفرض (ھیچ)
Left : عنصری که این خاصیت برای آن تخصیص یابد در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود
قرار خواھد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواھند شد.
Right : عنصری که این خاصیت برای آن تخصیص یابد در سمت راست صفحه و یا در سمت راست عنصر پدر
خود قرار خواھد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواھند شد.
خاصیت float برای ایجاد و تنظیم بخش navigation ( منوی سایت ) مناسب است
مثال : (ایجاد بخش منوی بالای سایت با استفاده از float )

کد html :

<h1> espinas. com </h1>
<ul class="aida">
<li> <a href="#"> Home Page </a> </li>
<li> <a href="#"> Tutorials </a> </li>
<li> <a href="#"> About Us </a> </li>
</ul>

و کد Css زیر:

H1 {
 Float: left;
 Margin-top: 0;
 }.
 navi {
 Float: right;
 Margin: 0;
 List-style: none;
 }.
 navi li {
 Float: left;
 }.
 navi a {
 Display: block;
 Margin-left: 15px;
 Padding: 15px;
 Border: 1px solid #ccc;
 Color: #233;
 Text-decoration: none;
 }.
 navi a: focus , . navi a: hover {
 Background: #aaa;
 Color: #fff;
 }

خاصیت Clear

خاصیت clear وابسته به خاصیت float بوده و برای کنترل خاصیت float به کار می رود. و یکی از چھار مقدار زیر را می
گیرد:
مقدار پیشفرض : none
Left : تاثیر خاصیت left:float را از بین می برد؛ یعنی باعث می شود که تاثیر element floated left (عنصری
که خاصیت left float به آن دادیم) بر روی عناصر دیگر از بین برود.
Right : تاثیر خاصیت right :float را از بین می برد.
Both : تاثیر ھر دو خاصیت left:float و right:float را بین می برد.
یک توضیح ساده برای خاصیت clear این است که این خاصیت برای cancel کردن تاثیر یک یا تعداد بیشتری از عناصر
floated بر روی دیگر عناصراستفاده می شود. تاثیر یک عنصر floated بر روی دیگر عناصر این است که عناصر ھمجوار
این عنصر به صورت شناور در کنار این عنصر قرار خواھند گرفت. به منظور از بین بردن تاثیر عنصر floated بر روی عناصر
ھمجواراز خاصیت clear استفاده می کنند.
اگر خاصیت clear برای عنصری تعریف شود این عنصر در کنار عنصر floated شناور نخواھد شد.

مثال :

<h1>sitedp.com</h1>
 <ul class="navi">
 <li> <a href="#"> Home Page </a> </li>
 <li> <a href="#"> Tutorials </a> </li>
 <li> <a href="#"> About Us </a> </li>
 </ul>
 <h2> Javascript and Web Design Tutorials </h2>

و کد Css زیر:

H1 {
 Float: left;
 Margin-top: 0;
 }.
 navi {
 Float: right;
 Margin: 0;
 List-style: none;
 }.
 navi li {
 Float: left;
 }.
 navi a {
 Display: block;
 Margin-left: 15px;
 Padding: 15px;
 Border: 1px solid #ccc;
 Color: #233;
 Text-decoration: none;
 }.
 navi a: focus , . navi a: hover {
 Background: #aaa;
 Color: #fff;
 }H
 2 {
 Clear: both;
 }

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند