171
تشکر

کدهای آماده CSS که هر طراح وب باید بداند

CSS3

CSS3

در این مطلب به ارائه قطعه کدهای آماده CSS2/CSS3 میپردازیم. پیشنهاد میکنم این مطلب را از دست ندهید و همیشه این مطلب را با خودتان داشته باشید تا در مواقع نیاز بتوانید استفاده کنید.

1- CSS Reset

همیشه در همه پروژه ها ابتدا باید فایل CSS Reset لود شود تا مقدارهای پیشفرض مرورگر برای تگ ها را صفر کنیم تا در همه مرورگرها بدرستی نمایش پیدا کند.

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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  
  margin: 0;  
  padding: 0;  
  border: 0;  
  font-size: 100%;  
  font: inherit;  
  vertical-align: baselinebaseline;  
  outline: none;  
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}  
html { height: 101%; }  
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }  
  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }  
ol, ul { list-style: none; }  
  
blockquote, q { quotes: none; }  
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }  
strong { font-weight: bold; }   
  
table { border-collapse: collapse; border-spacing: 0; }  
img { border: 0; max-width: 100%; }  
  
p { font-size: 1.2em; line-height: 1.0em; color: #333; } 

2- Clearfix کلاسیک

کد زیر را باید پس از عناصر شناور (float) قرار داد تا عناصر بعد این عنصر به درستی در مکان خود قرار بگیرند.

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }  
.clearfix { display: inline-block; }  
   
html[xmlns] .clearfix { display: block; }  
* html .clearfix { height: 1%; } 

3- Clearfix 2011

همانطور که از اسم این کد پیداست کد جدیدتر قطعه بالا است.

.clearfix:before, .container:after { content: ""; display: table; }  
.clearfix:after { clear: both; }  
  
/* IE 6/7 */  
.clearfix { zoom: 1; }  

4- Transparency یا Opacity برای تمام مروگرها

.transparent {  
    filter: alpha(opacity=50); /* internet explorer */  
    -khtml-opacity: 0.5;      /* khtml, old safari */  
    -moz-opacity: 0.5;       /* mozilla, netscape */  
    opacity: 0.5;           /* fx, safari, opera */  
}

5- کد Blockquote Template

توسط کد زیر میتوانید یک تمپلیت زیبا برای نقل قول های خود درست کنید.

blockquote {  
    background: #f9f9f9;  
    border-left: 10px solid #ccc;  
    margin: 1.5em 10px;  
    padding: .5em 10px;  
    quotes: "\201C""\201D""\2018""\2019";  
}  
blockquote:before {  
    color: #ccc;  
    content: open-quote;  
    font-size: 4em;  
    line-height: .1em;  
    margin-right: .25em;  
    vertical-align: -.4em;  
}  
blockquote p {  
    display: inline;  
} 

6- گوشه های گرد با Border-Radius

توسط کدهای زیر میتوانید برای هر یک از گوشه ها یک مقدار مشخص آن را گرد کنید. که به دو صورت نوشته شده است. صورت اول هر چهار خط در یک خط نوشته شده است. اما در صورت دوم برای هر یک از گوشه ها یک خط جداگانه نوشته شده است.

#container {  
    -webkit-border-radius: 4px 3px 6px 10px;  
    -moz-border-radius: 4px 3px 6px 10px;  
    -o-border-radius: 4px 3px 6px 10px;  
    border-radius: 4px 3px 6px 10px;  
}  
  
/* alternative syntax broken into each line */  
#container {  
    -webkit-border-top-left-radius: 4px;  
    -webkit-border-top-rightright-radius: 3px;  
    -webkit-border-bottom-rightright-radius: 6px;  
    -webkit-border-bottom-left-radius: 10px;  
      
    -moz-border-radius-topleft: 4px;  
    -moz-border-radius-topright: 3px;  
    -moz-border-radius-bottomright: 6px;  
    -moz-border-radius-bottomleft: 10px;  
}

7- Media Queryهای عمومی

توسط مدیا کوئری های زیر براحتی میتوانید انواع دستگاه ها را شناسایی کنید.

/* Smartphones (portrait and landscape) ----------- */  
@media only screen   
and (min-device-width : 320px) and (max-device-width : 480px) {  
  /* Styles */  
}  
  
/* Smartphones (landscape) ----------- */  
@media only screen and (min-width : 321px) {  
  /* Styles */  
}  
  
/* Smartphones (portrait) ----------- */  
@media only screen and (max-width : 320px) {  
  /* Styles */  
}  
  
/* iPads (portrait and landscape) ----------- */  
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {  
  /* Styles */  
}  
  
/* iPads (landscape) ----------- */  
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {  
  /* Styles */  
}  
  
/* iPads (portrait) ----------- */  
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {  
  /* Styles */  
}  
  
/* Desktops and laptops ----------- */  
@media only screen and (min-width : 1224px) {  
  /* Styles */  
}  
  
/* Large screens ----------- */  
@media only screen and (min-width : 1824px) {  
  /* Styles */  
}  
  
/* iPhone 4 ----------- */  
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {  
  /* Styles */  
}  

8- Moder font stacks

توسط کدهای زیر میتوانید نمونه های مختلف fontها را که میتوان (پیشنهاد میشود) در یک font-family قرار داد ببینید. که البته برای فونت های انگلیسی است.

/* Times New Roman-based serif */  
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;  
  
/* A modern Georgia-based serif */  
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;  
  
/*A more traditional Garamond-based serif */  
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;  
  
/*The Helvetica/Arial-based sans serif */  
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;  
  
/*The Verdana-based sans serif */  
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;  
  
/*The Trebuchet-based sans serif */  
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;  
  
/*The heavier “Impact” sans serif */  
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;  
  
/*The monospace */  
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; 

9- سفارشی کردن استایل متن های انتخاب شده

توسط کدهای زیر میتوان استایل متن هایی که توسط کاربر انتخاب میشود را سفارشی کرد.

::selection { background: #e2eae2; }  
::-moz-selection { background: #e2eae2; }  
::-webkit-selection { background: #e2eae2; } 

10- مخفی کردن متن H1 برای Logo

امروزه برای قرار دادن لوگوی سایت ها ابتدا یک H1 با مقدار نام سایت قرار میدهند سپس درون H1 عکس را هم قرار میدهند. اینکار برای سئو انجام میشود. اما باید مقدار متن درون H1 را برداشت که با استفاده از کد زیر میتوان اینکار را انجام داد.

h1 {  
    text-indent: -9999px;  
    margin: 0 auto;  
    width: 320px;  
    height: 85px;  
    background: transparent url("images/logo.png") no-repeat scroll;  
} 

11- Polaroid Image Border

توسط کد زیر میتوان یک تمپلیت برای قرار دادن عکس درون یک Box درست کرد, که زیبا است.

img.polaroid {  
    background:#000; /*Change this to a background image or remove*/  
    border:solid #fff;  
    border-width:6px 6px 20px 6px;  
    box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */  
    -webkit-box-shadow:1px 1px 5px #333;  
    -moz-box-shadow:1px 1px 5px #333;  
    height:200px; /*Set to height of your image or desired div*/  
    width:200px; /*Set to width of your image or desired div*/  
}  

12- Anchor Link Pesudo Classes

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

a:link { color: blue; }  
a:visited { color: purple; }  
a:hover { color: red; }  
a:active { color: yellow; }  

13- Fullscreen Backgrouns with CSS3

توسط کد زیر میتوان Backgroundهای یک عنصر را به صورت 100% در آورد.

html {   
    background: url('images/bg.jpg') no-repeat center center fixed;   
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
} 

14- قرار دادن عنصر در وسط از نظر عمودی

توسط کد زیر میتوان یک عنصر را در وسط عنصر والد از نظر عمودی قرار داد. بدون استفاده از JavaScript

.container {  
    min-height: 6.5em;  
    display: table-cell;  
    vertical-align: middle;  
} 

15- نمایش اسکرول عمودی

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

html { height: 101% } 

16- تمپلیتی برای CSS3 Gradient

#colorbox {  
    background: #629721;  
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));  
    background-image: -webkit-linear-gradient(top, #83b842, #629721);  
    background-image: -moz-linear-gradient(top, #83b842, #629721);  
    background-image: -ms-linear-gradient(top, #83b842, #629721);  
    background-image: -o-linear-gradient(top, #83b842, #629721);  
    background-image: linear-gradient(top, #83b842, #629721);  
}

17- تمپلیتی برای @Font-Face

@font-face {  
    font-family: 'MyWebFont';  
    src: url('webfont.eot'); /* IE9 Compat Modes */  
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
    url('webfont.woff') format('woff'), /* Modern Browsers */  
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */  
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */  
}  
      
body {  
    font-family: 'MyWebFont', Arial, sans-serif;  
}

18- کد Box-shadow برای تمام مروگرها

#mydiv {   
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);  
}

19- کد Box-shadow داخلی برای تمام مرورگرها

#mydiv {   
    -moz-box-shadow: inset 2px 0 4px #000;  
    -webkit-box-shadow: inset 2px 0 4px #000;  
    box-shadow: inset 2px 0 4px #000;  
}

20- قرار دادن footer در پایین صفحه

#footer {  
    position: fixed;  
    left: 0px;  
    bottom: 0px;  
    height: 30px;  
    width: 100%;  
    background: #444;  
}

21- استایل دادن به لینک ها بر اساس مقصد آنها

کد های زیر برای هر نوع (http, mail, pdf) مقصد تگ a یک نوع استایل نوشته است, که میتواند خیلی کاربردی باشد. البته میتوان برای تمام فرمت های دیگر هم خودتان بنویسید (بر اساس کد pdf).

/* external links */  
a[href^="http://"] {  
    padding-right: 13px;  
    background: url('external.gif') no-repeat center rightright;  
}  
   
/* emails */  
a[href^="mailto:"] {  
    padding-right: 20px;  
    background: url('email.png') no-repeat center rightright;  
}  
   
/* pdfs */  
a[href$=".pdf"] {  
    padding-right: 18px;  
    background: url('acrobat.png') no-repeat center rightright;  
}  

22- ایجاد Box-shadow برای بالای سایت

توسط کد زیر براحتی میتوان برای بالای سایت ها Box-shadow ایجاد کرد.

body:before {  
    content: "";  
    position: fixed;  
    top: -10px;  
    left: 0;  
    width: 100%;  
    height: 10px;  
  
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);  
    z-index: 100;  
}  

23- استایل دادن به tooltip

حتما پلاگین های jquery زیادی دیدید که برای استایل دادن به tooltip ساخته شده اند. اما HTML5 واقعا در هر کجا که فکر کنید برای طراح امکان سفارشی سازی را انجام داده است. فقط کد زیر را درون استایل کپی کنید و مقدار های tooltip برای عناصر را با استفاده از خصوصیت data-tooltip تعریف کنید.

a {   
    border-bottom:1px solid #bbb;  
    color:#666;  
    display:inline-block;  
    position:relative;  
    text-decoration:none;  
}  
a:hover,  
a:focus {  
    color:#36c;  
}  
a:active {  
    top:1px;   
}  
   
/* Tooltip styling */  
a[data-tooltip]:after {  
    border-top: 8px solid #222;  
    border-top: 8px solid hsla(0,0%,0%,.85);  
    border-left: 8px solid transparent;  
    border-right: 8px solid transparent;  
    content: "";  
    display: none;  
    height: 0;  
    width: 0;  
    left: 25%;  
    position: absolute;  
}  
a[data-tooltip]:before {  
    background: #222;  
    background: hsla(0,0%,0%,.85);  
    color: #f6f6f6;  
    content: attr(data-tooltip);  
    display: none;  
    font-family: sans-serif;  
    font-size: 14px;  
    height: 32px;  
    left: 0;  
    line-height: 32px;  
    padding: 0 15px;  
    position: absolute;  
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);  
    whitewhite-space: nowrap;  
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    -o-border-radius: 5px;  
    border-radius: 5px;  
}  
a[data-tooltip]:hover:after {  
    display: block;  
    top: -9px;  
}  
a[data-tooltip]:hover:before {  
    display: block;  
    top: -41px;  
}  
a[data-tooltip]:active:after {  
    top: -10px;  
}  
a[data-tooltip]:active:before {  
    top: -42px;  
} 

24- نمایش URL تگهای a در زمان چاپ

@media print   {    
  a:after {    
    content: " [" attr(href) "] ";    
  }    
} 
  • etc می‌گه:

    من نمیدونم چرا جذب مطالبت میشم….!؟
    کارت درسته محسن جان ، موفق باشی

    خیلی از این چیزایی که میگی رو بلدم اما تا به حال مثل این مطالب همشون رو جمع نکردم و داکیومنت برای خودم نساختم.

    الان تصمیم گرفتم یک کتابخانه کد در زبانهایی که کار میکنم برای خودم تشکیل بدم و آپدیتش کنم.

    خیلی بلاگ خوبیه از نظر محتوا ولی از لحاظ طراحی اصلاً جذاب نیست برای من! حالا این نظر من بود. یه دستی به سر و روش بکشی بد نیست هرچند که خودت استادی…

  • سحر می‌گه:

    ممنونم از این آموزشتون.

  • B-T می‌گه:

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

    • محسن شفیعی می‌گه:

      بعضی از کدهای CSS دارای پیشوندهای مخصوص هر مرورگر است که باید اونها رو هم لحاظ کنید.
      اگه از دستورات جدید CSS هم استفاده میکنید باید مطمئن باشید که توی همه مرورگرها به خوبی کار میکنه. Can i use

  • میثم می‌گه:

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

  • jamal می‌گه:

    alie ali boud

  • Arman می‌گه:

    سلام .

    خوبه .. ولی باید یه دمو هم میزاشتین .

  • nasrin می‌گه:

    سلام
    تو مدیا کوئری هایی که ارائه کردین چه استایلی باید بذارم؟
    میشه یه نمونه بگین.
    ممنون میشم.

  • Ali Amini می‌گه:

    واقعا عالی بود.
    کارت حرف نداره داداش ؛-)

  • پريسا می‌گه:

    عالی بو عــــــــــــالی خیلی ممنون
    امید وارم کارتون رو بیشتر و بیشتر ادامه بدین

    موفق باشید

  • Arian Tashakkor می‌گه:

    با سلام و عرض ادب
    محسن عزیز یک سوال داشتم :
    بعضی اوقات وقتی از راه حل فوتر بالا برای چسباندن فوتر به پایین صفحه استفاده می کنیم چون

    position : fixed; هست در نتیجه فوتر تحت تاثیر هیچ چیزی قرار نمی گیره برای همین نوشته های content یا در واقع خود content به زیر فوتر می ره و با اضافه شدن متن فوتر به سمپ پایین نمیره و تغییری در ارتفاع صفحه صورت نمی گیره ( امیدوارم منظورم رو رسونده باشم. )

    برای حل این مشکل من سایت های دیگر رو دیدم که از راح حل Sticky Footer استفاده کرده بودن و مشکل حل می شه.

    ولی پس فوتر با position:fixed; به چه دردی می خوره وقتی مشکل سازه ؟

    اگر راه حلش رو می دونید امکانش هست بیان کنید ؟

    با سپاس فراوان
    موفق وسربلند باشید !

    • محسن شفیعی می‌گه:

      سلام، قضیه مربوط به چسباندن فوتر به پایین صفحه برای صفحه هاییه که اونقدر ارتفاع ندارند که ارتفاع نمایشگر رو پر کنند به همین دلیل خب میشه از position:fixed استفاده کرد. چون هیچوقت ارتفاع زیاد نمیشه.
      اما راه حل Sticky Footer من باهاش آشنایی نداشتم که شما لطف کردی و گفتی؛ این راه حل به نظر من بهتره. ولی در صفحه هایی که مطمئنیم ارتفاع صفحه بیشتر از ارتفاع نمایشگر میشه لازم نیست استفاده کنیم و روش Sticky Footer در زمان هایی خوبه که مطمئن نیستیم.

    • Arian Tashakkor می‌گه:

      با سلام و درود فراوان
      محسن عزیز ممنون از پاسخت.

      در واقع اگر در حالتی که position:fixed; هست و ارتفاع زیاد می شه از این position استفاده کنیم مشکل ساز می شه ( اگر منظورتون رو درست فهمیده باشم )

      ولی خوب در حالت عادی برای سایت هایی که ارتفاع دائم تغییر می کنه مثل آپارنت شما از position:relative; ( یا همون حالت پیشفرض ) استفاده می کنید درسته ؟

      فرق این که از sticky footer استفاده نکنیم و جاش از فوتر با position:relative; استفاده کنیم اینه که در در پوزیشن ریلیتیو فوتر به پایین صفحه نمیچسبه ( به المان بالاییش می چسبه ) ولی با تغییر ارتفاع المان بالایی به سمت پایین می یاد. ولی در sticky footer – فوتر به پایین صفحه می چسبه و علاوه بر اون با تغییر ارتفاع هم به سمت پایین حرکت می کنه.

      فکر می کنم درست متوجه شدم.
      ببخشید که کامنت طولانی شد ، فقط جهت اطلاع می خواستم بدونم.

      موفق و سربلند باشید !

    • محسن شفیعی می‌گه:

      بله، در کل حرف شما درسته. ولی یک نکته اونم اینکه مقدار پیشفرض position: static هست.

    • Arian Tashakkor می‌گه:

      با سلام و درود فراوان
      خیلی ممنون محسن جان
      در مورد postition:static; هم پس من اشتباه می کردم. باز هم مممنون از اطلاع :)

      موفق و سربلند باشید !

  • Arian Tashakkor می‌گه:

    سلام به محسن عزیز !
    امیدوارم حالت خوب باشه ! ممنون از مطالب خوبت.
    جسارت بنده رو ببخشید ، چیز خاصی نیست فقط توی بخش :

    قرار دادن footer در پایین صفحه

    کد : bottom : 0px رو به صورت bottombottom:0px قرار دادید.

    باز هم جسارت بنده رو ببخشید.
    موفق و سربنلد باشید !

  • siml می‌گه:

    سلام. ببخشید میشه آموزش نحوه ی تغییر استایل اسکرول بار رو هم قرار بدین؟

  • حافظ می‌گه:

    در کد reset ارائه شده این دو مورد در استایل عمومی اول حتما مشکل ساز میشوند :

    font: inherit;
    border:0;

  • محسن می‌گه:

    سلام.متشکر از مطلب مفیدتون.
    من هر وقت menu می سازم وقتی از ie ورژن قدیم باز میشه ظاهر خوبی نداره و حتی inline هم نیست ،میشه راهنماییم کنید؟

    • م می‌گه:

      سلام. معمولا این مشکل وجود داره. والا من خودم تو این یه مورد بهش اهمیتی نمیدم. یعنی قبل از اینکه باز بشه آلرت میدم که مرورگرش قدیمیه. آخه کیه که دیگه از ie6 استفاده کنه. اونی که واسه پیشرفت مرورگرش کاری نکنه لایق بد دیدن وبسایتا هست. به خدا نمیدونید چه محدودیتی دارم تو این زمینه. یعنی وبسایت که طراحی میکنم حتما رو ie8 هم چک میکنم. کلا از خیلی از خلاقیتهام دست میکشم که کاربرا اذیت نشن. کلا ie کابوس طراحای وبسایته. من تنها تو یه مورد دیدم ie بهتر از فایرفاکسه. اونم وقتی بود که گرید ویو داشتم و صفحه هاش رو با کمک ajax عوض میکردم. ie ارور نمیداد و مثه بچه خوب کار میکرد اما فایرفاکس ارور میداد.هنوزم نفهمیدم چرا. اروری میگیره که آدم دوس داره سرشو بزنه تو دیوار.یعنی چیزای بدیهی رو نمیفهمه لامصب.

      ****اما راهنمایی من :به ul و li اهمیت نده.تو این مورد اگه برات مهمه واقعا، ازشون استفاده نکن. از div استفاده کن، float کن بذارشون کنار هم.همین.

  • امید می‌گه:

    سلام محسن جان میتونیم یه همکاری باهم داشته باشیم ؟


  • نظرات این مطلب بسته است.