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

تبلیغات

طراحی صفحات برای موبایل

فیلم های  2014

 منجمد

پاسخ به انیمیشن ها مسخره بود.


گسل در ستاره های ما

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


انتقام جویان

یک موفقیت بزرگ برای مارول و دیزنی

پا صفحه


 ایجا یک صفحه ی عمومی موبایل

مثال

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body style="max-width:400px">
<!-- Content goes here -->
</body>
</html>

ویژگی استایل  "max-width:400px یک تلفن کوچک شبیه سازی می کند.که بعداّ حذف خواهد شد .


 افزودن تماس

مثال (استفاده از عناصر کلاسیک HTML)

<div class="w3-container">
  <h1>Movies 2014</h1>
</div>

<div class="w3-row">
  <div class="w3-col s3">
    <img src="/img_avatar.jpg">
  </div>
  <div class="w3-col s9 w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

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

مثال (استفاده از عناصر معنایی HTML)

<header class="w3-container">
  <h1>Header</h1>
</header>

<div class="w3-row">
  <div class="w3-col s3">
    <img src="/img_avatar.jpg">
  </div>
  <div class="w3-col s9 w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

<footer class="w3-container">
  <h3>Footer</h3>
</footer>

</body>
</html>
خودتان امتحان کنيد »

 افزودن یک رنگ قالب

مثال های خودتان امتحان کنید

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

اطلاعات بیشتر در مورد رنگ قالب W3.CSS   در W3.CSS Color Themesبخوانید.


 افزودن یک کتابخانه آیکون

مثال

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h1>
  <i class="fa fa-bars"></i> Header
</h1>
خودتان امتحان کنيد »

 این مثال از آیکون های Font Awesome استفاده میکند. شما می توانید از هر آیکون کتابخانه ای استفاده کنید.


 افزودن استایل های بیشتر

مثال

<img class="w3-cicle" src="/img_avatar.jpg" alt="avatar">

<h3 class="w3-text-theme">Frozen</h3>
خودتان امتحان کنيد »

 افزودن  منو کناری

مثال

<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%">
<div class="w3-red">
  <a href="javascript:void(0)" onclick="w3_close()"
  class="w3-closenav w3-right w3-xlarge">X</a>
    <div class="w3-padding-large w3-center">
      <img class="w3-circle" src="/img_avatar.jpg" alt="avatar">
   </div>
  </div>
<br>
<a href="#">Home</a>
<a href="#">Friends</a>
<a href="#">Messages</a>
</nav>

<script>
function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
}

function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
}
</script>
خودتان امتحان کنيد »

 پنهان کردن منو کناری

مثال

<nav class="w3-sidenav w3-card-2 w3-white" style="width:30%;display:none">
خودتان امتحان کنيد »

 منو ثابت ، سر صفحه و پاورقی

مثال

<header class="w3-top">

<nav class="w3-top">

<footer class="w3-bottom">
خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی