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

4 سال پیش

امتیاز دهید post

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

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

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

&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         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%;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
   
      &lt;h1&gt;100% Wide Container&lt;/h1&gt;
      
      &lt;div class = "container"&gt;
         &lt;section&gt;Section&lt;/section&gt;
         &lt;aside&gt;Aside&lt;/aside&gt;
      &lt;/div&gt;
      
      &lt;h1&gt;75% Wide Container&lt;/h1&gt;
      
      &lt;div class = "container container-75"&gt;
         &lt;section&gt;Section&lt;/section&gt;
         &lt;aside&gt;Aside&lt;/aside&gt;
      &lt;/div&gt;
      
      &lt;h1&gt;50% Wide Container&lt;/h1&gt;
      
      &lt;div class = "container container-50"&gt;
         &lt;section&gt;Section&lt;/section&gt;
         &lt;aside&gt;Aside&lt;/aside&gt;
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<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>

<section>Section</section>

<aside>Aside</aside>

</div>

<h1>75% Wide Container</h1>

<section>Section</section>

<aside>Aside</aside>

</div>

<h1>50% Wide Container</h1>

<section>Section</section>

<aside>Aside</aside>

</div>

</body>

</html>

مدیا کوئری

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

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

   &lt;body&gt;
      &lt;p&gt;
         If screen size is less than 420px, then it will show lightblue 
         color, or else it will show light pink color
      &lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<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

1	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 و اسکریپت جاوا است و به شما کمک می کند صفحات وب را به روش پاسخگو برای همه دستگاه ها طراحی کنید.

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

   &lt;body&gt;
   
      &lt;div class = "container"&gt;
      
         &lt;div class = "jumbotron"&gt;
            &lt;h1&gt;Tutorials point&lt;/h1&gt; 
            &lt;p&gt;
               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.
            &lt;/p&gt; 
         &lt;/div&gt;
      
         &lt;div class = "row"&gt;
            &lt;div class = "col-md-4"&gt;
               &lt;h2&gt;Android&lt;/h2&gt;
               &lt;p&gt;
                  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.
               &lt;/p&gt;
         &lt;/div&gt;
         
         &lt;div class = "col-md-4"&gt;
            &lt;h2&gt;CSS&lt;/h2&gt;
            &lt;p&gt;
               Cascading Style Sheets, fondly referred to as CSS, is a simple design 
               language intended to simplify the process of making web pages presentable.
            &lt;/p&gt;
         &lt;/div&gt;
      
         &lt;div class = "col-md-4"&gt;
            &lt;h2&gt;Java&lt;/h2&gt;
            &lt;p&gt;
               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.
            &lt;/p&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>

body {

color:green;

}

</style>

</head>

<body>

<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>

<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>

<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>

<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>

</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.

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

امتیاز دهید post

نویسنده مطلب saber

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

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

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

مدیا کوئری

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

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

دیدگاه شما

بدون دیدگاه

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

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

مدیا کوئری

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

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

دیدگاه شما

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

بدون دیدگاه