طراحی ریسپانسیو – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Wed, 07 Dec 2016 08:32:14 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 آموزش طراحی Table های ریسپانسیو در وب سایت https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-table-%d9%87%d8%a7%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-table-%d9%87%d8%a7%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html#comments Fri, 08 Jul 2016 07:45:22 +0000 http://www.xn--mgbguh09aqiwi.com/?p=20107 یکی از بزرگترین مشکل هایی که پیرامون ریسپانسیو ساختن وب سایت وجود دارد , ساخت جدول ذر این نوع وب سایت ها میباشد .

جداولی که دارای تعداد ستون های زیادی هستند , در موبایل به دلیل پهنای کم ,  بسیار جمع شده و به صورت ناخوانایی در می آیند .

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

ضمنا علاوه بر آموزش این کار , سعی بر ساخت یک جدول ساده , زیبا و شیک را هم داریم …

آموزش طراحی Table های ریسپانسیو در وب سایت

در ابتدا شما کافیست کد های css زیر را در قسمت css وب سایت خود وارد نمایید : ( ترجیحا در بالای css )

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    direction:ltr;
}
th, td {
    border: none;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even){
    background-color: #f2f2f2;
}
.vms-responsive{
    overflow-x:auto !important;
}

حال برای ساخت جدول به شیوه ی معمول در html ادامه دهید , فقط با این تفاوت که از این به بعد , هر جدولی که میخواهید خاصیت ریسپانسیو را داشته باشد , یک تگ پدر div برای آن ایجاد کرده و به آن کلاس vms-responsive را بدهید . مانند مثال زیر :

<div class="vms-responsive">
  <table>
    ...
  </table>
</div>

نکته بسیار مهم : در بالا ( قسمت css ) , قطعه کد های اولی بجز vms-responsive. اجباری نبوده و فقط برای دیزاین جداول شما میباشد . اگر نیازی به دیزاین ندارید و یا خودتان از قبل دیزاین جدول را انجام داده اید , میتوانید تمامی کد ها را بجز کلاس ذکر شده پاک نمایید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی

]]> https://www.xn--mgbguh09aqiwi.com/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-table-%d9%87%d8%a7%db%8c-%d8%b1%db%8c%d8%b3%d9%be%d8%a7%d9%86%d8%b3%db%8c%d9%88-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html/feed 3 قالب آماده سایت شخصی سایت موسیقی G-Music ( به صورت ریسپانسیو ) https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b4%d8%ae%d8%b5%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%88%d8%b3%db%8c%d9%82%db%8c-g-music.html https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b4%d8%ae%d8%b5%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%88%d8%b3%db%8c%d9%82%db%8c-g-music.html#comments Sun, 19 Jan 2014 10:13:47 +0000 http://xn--mgbguh09aqiwi.com/?p=976 ضمن عرض تبریک به مناسبت میلاد مبارک پیامبر ( ص) قالبی بسیار حرفه ای با تکنولوژِی های روز برایتان آماده ساخته ام که امیدوارم مورد توجه عزیزان قرار گیرد .

این قالب مخصوص سایت های شخصی با مضمون موسیقی میباشد .

ویژگیهای قالب :

ریسپانسیو ( نمایش به صورت تمام صفحه در تمامی resolution ها اعم از کامپیوتر , تبلیت و موبایل )

طراحی با استفاده از Html5 و Css3

افکت های فوق زیبا با استفاده از Css3 و Jquery

دارای 4 قسمت مجزا ( موزیک , موزیک ویدیو , درباره و تماس )

نکته : برای درج موزیک  در تگ های Audio از دو فرمت Mp3 و Ogg و برای درج موزیک ویدیو در تگ های Video از دو فرمت Mp4 و Ogg استفاده کنید.

نکته : برای نمایش موزیک و موزیک ویدیو ها در تمامی مرورگرها , حتما هر دو فرمت را برای هر کلیپ قرار دهید.

دموی قالب

پخش اختصاصی

طراحی و کدنویسی : وحید مجیدی

[sdm-download id=”978″ fancy=”0″]

]]> https://www.xn--mgbguh09aqiwi.com/%d9%82%d8%a7%d9%84%d8%a8-%d8%a2%d9%85%d8%a7%d8%af%d9%87-%d8%b3%d8%a7%db%8c%d8%aa-%d8%b4%d8%ae%d8%b5%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d9%85%d9%88%d8%b3%db%8c%d9%82%db%8c-g-music.html/feed 10