آموزش طراحی وب پاسخگو در CSS3

3 سال پیش

آموزش طراحی وب پاسخگو در CSS3

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش طراحی وب پاسخگو در CSS3 خواهیم پرداخت.
طراحی وب پاسخگو تجربه ای بهینه، خواندن آسان و ناوبری آسان را با حداقل تغییر اندازه در دستگاه های مختلف مانند دسک تاپ، موبایل و برگه ها فراهم می کند).

نسخه ی نمایشی شبکه انعطاف پذیر

<html>
   <head>
      <style>
         body {
            font: 600 14px/24px "Open Sans", 
               "HelveticaNeue-Light", 
               "Helvetica Neue Light", 
               "Helvetica Neue", 
               Helvetica, Arial, 
               "Lucida Grande", 
               Sans-Serif;
         }
         h1 {
            color: #9799a7;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 6px;
         }
         .container:before, .container:after {
            content: "";
            display: table;
         }
         .container:after {
            clear: both;
         }
         .container {
            background: #eaeaed;
            margin-bottom: 24px;
            *zoom: 1;
         }
         .container-75 {
            width: 75%;
         }
         .container-50 {
            margin-bottom: 0;
            width: 50%;
         }
         .container, section, aside {
            border-radius: 6px;
         }
         section, aside {
            background: #2db34a;
            color: #fff;
            margin: 1.858736059%;
            padding: 20px 0;
            text-align: center;
         }
         section {
            float: left;
            width: 63.197026%;
         }
         aside {
            float: right;
            width: 29.3680297%;
         }
      </style>
   </head>
   
   <body>
   
      <h1>100% Wide Container</h1>
      
      <div class = "container">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>75% Wide Container</h1>
      
      <div class = "container container-75">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
      <h1>50% Wide Container</h1>
      
      <div class = "container container-50">
         <section>Section</section>
         <aside>Aside</aside>
      </div>
      
   </body>
</html>

مدیا کوئری

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

<html>
   <head>
      <style>
         body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
      </style>
   </head>

   <body>
      <p>
         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color
      </p>
   </body>
</html>

نتیجه زیر را ایجاد می کند:

If screen size is less than 420px,then it will show lightblue color, or else it will show light pink color

طراحی وب پاسخگو Bootstrap

Bootstrap محبوب ترین چارچوب طراحی وب مبتنی بر HTML ، CSS و اسکریپت جاوا است و به شما کمک می کند صفحات وب را به روش پاسخگو برای همه دستگاه ها طراحی کنید.

<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
      <style>
         body {
            color:green;
         }
      </style>
   </head>

   <body>
   
      <div class = "container">
      
         <div class = "jumbotron">
            <h1>Tutorials point</h1> 
            <p>
               Tutorials Point originated from the idea that there exists a class 
               of readers who respond better to online content and prefer to learn 
               new skills at their own pace from the comforts of their drawing rooms.
            </p> 
         </div>
      
         <div class = "row">
            <div class = "col-md-4">
               <h2>Android</h2>
               <p>
                  Android is an open source and Linux-based operating system for mobile 
                  devices such as smartphones and tablet computers. Android was developed 
                  by the Open Handset Alliance, led by Google, and other companies.
               </p>
         </div>
         
         <div class = "col-md-4">
            <h2>CSS</h2>
            <p>
               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            </p>
         </div>
      
         <div class = "col-md-4">
            <h2>Java</h2>
            <p>
               Java is a high-level programming language originally developed by Sun 
               Microsystems and released in 1995. Java runs on a variety of platforms,
               such as Windows, Mac OS, and the various versions of UNIX. This tutorial
               gives a complete understanding of Java.
            </p>
         </div>
      </div>
      
   </body>
</html>

نتیجه زیر را ایجاد می کند:

l
Tutorials point
Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.

Android
Android is an open source and Linux-based operating system for mobile devices such as smartphones and tablet computers. Android was developed by the Open Handset Alliance, led by Google, and other companies.

CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.

Java
Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.

منبع.

لیست جلسات قبل آموزش CSS

نویسنده مطلب erfan molaei

آموزش طراحی وب پاسخگو در CSS3

آموزش طراحی وب پاسخگو در CSS3

نسخه ی نمایشی شبکه انعطاف پذیر

مدیا کوئری

طراحی وب پاسخگو Bootstrap

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

آموزش طراحی وب پاسخگو در CSS3

نسخه ی نمایشی شبکه انعطاف پذیر

مدیا کوئری

طراحی وب پاسخگو Bootstrap

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه