%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (0)

تبلیغات

آموزش W3.CSS

W3.CSS چیست؟

w3.CSS یکی از فریم ورک های CSS است و توسط W3schools پیاده سازی شده است. بعد از لینک کردن فایل W3.CSS به صفحات پروژه تان، می توانید از الگوهای بسیار جذاب آن برای ساخت سایت های واکنشگرا استفاده نمایید.

  • W3.CSS نسبت به دیگر فریم ورک ها مثل Bootstrap از حجم کمتری برخوردار است و در نتیجه سرعت لود صفحات افزایش پیدا خواهد کرد.
  • یادگیری و استفاده از آن نسبت به دیگر فریم ورک ها (Bootstrap) آسان تر است.
  • در پیاده سازی W3.CSS تنها از CSS استفاده شده است. (از JavaScript یا jQuery استفاده نشده)
  • با استفاده  از W3.CSS با سرعت و سادگی بیشتری می توانید طراحی کنید.
  • زمانی که آنرا به صفحه لینک می کنید، بصورت پیش فرض، حالت واکنشگرا را پشتیبانی می کند.
  • سایت تان در تمام مروگرهای اصلی مثل کروم, فایرفاکس, اینترنت اکسپلورر, سافاری و ... بدون مشکل کار خواهد کرد.
  • W3.CSS در تمام دستگاه ها، مثل  کامپیوتر, لپتاپ, تبلت و موبایل کار خواهد کرد.

W3.CSS Responsive


W3.CSS رایگان است.

W3.CSS برای یادگیری و استفاده رایگان است و نیازی به تهیه ی لایسنس نیست.


آسان برای یادگیری

"تا جایی که ممکن است ساده اش کن. ولی نه بیشتر"

آلبرت انیشتین

اولین مثال W3.CSS

<div class="w3-container w3-teal">  
<h1>My Header</h1>
</div>

<img src="/img_car.jpg" alt="Car">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

<div class="w3-container w3-teal">
  <p>My Footer</p>
</div>
خودتان امتحان کنيد »

لینک کردن W3.CSS به صفحات سایت

برای استفاده از W3.CSS در وب سایتتان, کافیست لینک W3.CSS را به صفحه ی وب سایتتان اضافه نمایید:

مثال

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.beyamooz.com/lib/w3.css">
خودتان امتحان کنيد »

و یا میتوانید فایل w3.css را از خود سایت w3schools.com دانلود کرده و در پوشه ای در وبسایتتان قرار دهید.

مثال

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/lib/w3.css">
خودتان امتحان کنيد »

قالب های وب سایتی w3.css

در لینک زیر تعدادی قالب واکنشگرا با w3.css درست شده است و شما آزادید که این قالب هارا تغییر بدید, سیو کنید, به اشتراک بگذارید, استفاده کنید و یا هرکاری که میخواهید با آنها انجام دهید:

قالب آماده واکنشگرا

دیدگاه‌ها  

0 # imaniy 1397-06-03 21:28
نظر شما استاد به عنوان یه حرفه ای برای یادگیری رسپانسیو کردن سایت، کدام روش هست؟ روش w3.css یا لندینگ پیج یا بوت استرپ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1397-06-06 08:22
بوت استرپ نتیجه ی چندین سال کار یک تیم فنی هست و در سال های گذشته کامل و کامل تر شده و با توجه به اینکه از امکانات بیشتری نسبت به W3.CSS برخوردار است حجم آن بیشتر است و یک مقدار لود آن بیشتر طول می کشد. اما آموزش W3.CSS نسبت به آموزش بوتسترپ راحت تر هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-4 # Amt-Amt 1396-12-01 12:50
سلام و خسته نباشد.
من اموزش w3.css رو دنبال کردم و یاد گرفتم و از شما هم تشکر میکنم.
اقا من یک ساید بار ساختم ولی وقتی تو صفحه به سمت پایین حرکت میکنم اون هم همراه با اسکرول به سمت پاین میاد یعنی جاش ثابت نیست .
ایا شما میتونید مشکل منو حل کنید من میخوام این ساید بار سر جاش بمونه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-12-09 09:42
سلام و درود
استایل زیر را برای سایدبار تنظیم کنید:
position: fixed;
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی