آموزش W3CSS

آموزش W3.CSS – کارت ها

W3.CSS  کلاس های خاصی برای نمایش containerها بصورت کارت های شبه-کاغذِ سایه دار، داره.

نام کلاس

توضیحات

w3-card

یک container  قاب دار (border) را  برای هر نوع محتوایِ HTMLای استایل دهی می کنه.

w3-card-2

یک container قاب دار (border) و سایه دار با پهنای 2px را برای هر نوع محتوایِ HTMLای استایل دهی می کنه.

w3-card-4

ک container قاب دار (border) و سایه دار با پهنای 4px را برای هر نوع محتوایِ HTMLای استایل دهی می کنه.

w3-card-8

ک container قاب دار (border) و سایه دار با پهنای 8px را برای هر نوع محتوایِ HTMLای استایل دهی می کنه.

w3-card-12

ک container قاب دار (border) و سایه دار با پهنای 122px را برای هر نوع محتوایِ HTMLای استایل دهی می کنه.

مثال

w3css_cards.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
	  <style>
	     div {
		    width : 200px;	
			height : 200px;	
			
		 } 
	  </style>
   </head>
   <body>   
      <header class="w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <div class="w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <br/>
	  <header class="w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
	  <div class="w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
	  <br/>
      <div class="w3-card-4" style="width:550px;">
         <header class="w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         <div class="w3-container" style="width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
	  <br/>
	  <header class="w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
	  <br/>
      <div class="w3-card-12" style="width:255px; height: 230px;">
        <img src="/html5/images/html5-mini-logo.jpg" alt="html5">
           <div class="w3-container">
              <p>Learn HTML5</p>
           </div>
      </div>
   </body>
</html>

خروجی

خروجی کد بالا بصورت زیر خواهد بود.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش W3CSS

Learn W3CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...