2016年9月5日 星期一

w3 css study 00

Ref : http://www.w3schools.com/w3css/w3css_templates.asp


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

//  重點是要include 這個file..
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

//   w3-red     ->  紅色的
<div class="w3-container w3-red">
<h1>London</h1>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

//   w3-green     ->  綠色的 
<div class="w3-container w3-green">
<h1>London</h1>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

</body>
</html>





<div class="w3-text-red">
  <h1>London</h1>
  <p>London is the capital city of England.
</div>

<div class="w3-text-blue">
  <h1>London</h1>
  <p>London is the capital city of England.</p>
</div>


The Container Class

The w3-container class is the most important of the W3.CSS classes.
The w3-container class can be used for all types of HTML container elements like:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.

Containers Provides Equality

The w3-container class is important for providing equality:
  • Common margins
  • Common paddings
  • Common vertical alignments
  • Common horizontal alignments
  • Common fonts
  • Common colors
To use a container, just add a w3-container class to any element:




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

<div class="w3-container">
  <h2>With a Container</h2>
  <p>The w3-container class is one of the most important of the w3.CSS classes. It can provide correct margins, padding, alignments, and more to your HTML elements.</p>
</div>

<div>
  <h2>Without a Container</h2>
  <p>The w3-container class is one of the most important of the w3.CSS classes. It can provide correct margins, padding, alignments, and more to your HTML elements.</p>
</div>

</body>
</html>


w3-teal  這個顏色不錯看

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




w3-cardContainer for any HTML content (With border)
w3-card-2Container for any HTML content (2px bordered shadow)
w3-card-4Container for any HTML content (4px bordered shadow)
w3-card-8Container for any HTML content (8px bordered shadow)
w3-card-12Container for any HTML content (12px bordered shadow)
w3-card-16Container for any HTML content (16px bordered shadow)
w3-card-24Container for any HTML content (24px bordered shadow)

注意看陰影的程度....後面數字越大...陰影越深


Hover Effect

The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as w3-card-4).



<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">

<h2>Shadow on Hover</h2>
<p>The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a "w3-card-4".</p>

<div class="w3-green w3-hover-shadow w3-padding-64 w3-center" style="width:70%">
  <p>Hover over me to display me as a card!</p>
</div>

</body>
</html>


當滑鼠移過去會有陰影的效果....



一個簡單的例子

<!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 class="w3-container">

<h2>Card Example</h2>

<div class="w3-card-8 w3-dark-grey" style="width:50%">

<div class="w3-container w3-center">
  <h3>Friend Request</h3>
  <img src="img_avatar3.png" alt="Avatar" style="width:80%">
  <h5>John Doe</h5>

  <div class="w3-section">
    <button class="w3-btn w3-green">Accept</button>
    <button class="w3-btn w3-red">Decline</button>
  </div>
</div>

</div>

</body>
</html>

有兩個button  和一個圖片
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>

<img src="img_avatar3.png" alt="Avatar" style="width:80%">

然後背景用的是   <div class="w3-card-8 w3-dark-grey" style="width:50%">





另外一個例子

<div class="w3-card-4" style="width:70%">

<header class="w3-container w3-light-grey">
  <h3>John Doe</h3>
</header>

<div class="w3-container">
  <p>1 new friend request</p>
  <hr>
  <img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
  <p>CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.</p><br>
</div>

<button class="w3-btn-block w3-dark-grey">+ Connect</button>

</div>

John Doe 是用header 做出來的

<header class="w3-container w3-light-grey">
  <h3>John Doe</h3>
</header>

圖片  w3-circle 
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">


Border Classes
The W3.CSS border classes can be used on any HTML elements.


<div class="w3-border">
  <p>I have borders.</p>
</div>

<div class="w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>


Panels = Containers

Panels are containers with an added top and bottom margin.


If you want to restrict a responsive image to a maximum size, use the max-width property:

Example

<div class="w3-container">
  <img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
</div>

Image Text

Position the text in an image with the w3-display-classes:



<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
</div>

The w3-hover-opacity class adds transparency to the image on mouse-over:

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">

Displaying Badges

The w3-badge class creates a circular badge.
Updates 9
News  6
Comments 8


<p>Updates <span class="w3-badge">9</span></p> 
<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>

Displaying Tags

The w3-tag class creates a tag/label.
Status Done
Example New!
Comments More Later!

<p>Comments <span class="w3-tag">Done</span></p> 
<p>Example <span class="w3-tag w3-blue">New!</span></p>
<p>Comments <span class="w3-tag w3-teal">More Later!</span></p>

Responsive Classes
W3.CSS includes a responsive, mobile first grid system to handle your layout:



ClassDescription
w3-halfOccupies 1/2 of the window (on medium and large screens)
w3-thirdOccupies 1/3 of the window (on medium and large screens)
w3-twothirdOccupies 2/3 of the window (on medium and large screens)
w3-quarterOccupies 1/4 of the window (on medium and large screens)
w3-threequarterOccupies 3/4 of the window (on medium and large screens)
w3-restDefines the rest of a row
w3-colDefines a column in a 12 column responsive fluid grid (more in a later chapter)


Responsive Rows

Responsive classes must be placed inside a w3-row to be fully responsive.
ClassDescription
w3-rowDefines a padding-less container for responsive classes.
w3-row-paddingDefines a padded container for responsive classes.

The w3-half Class

The width of the w3-half class is 1/2 of the parent element (style="width:50%").
On small screens it resizes to 100%.

w3-half

w3-half

Example

<div class="w3-row">
  <div class="w3-green w3-container w3-half">
    <h2>w3-half</h2> 
  </div>
  <div class="w3-container w3-half">
    <h2>w3-half</h2> 
  </div>
</div>



<div class="w3-row">
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2> 
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2> 
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
    <div class="w3-row">
      <div class="w3-half w3-container w3-red">
        <h2>w3-half</h2> 
        <p>This is a paragraph.</p>
      </div>
      <div class="w3-half w3-container">
        <h2>w3-half</h2> 
        <p>This is a paragraph.</p>
      </div>
    </div>
  </div>
</div>


從下圖可以看得出來  w3-row-padding 多了空白


Screen Resolutions

The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:



12 Column Responsive Fluid Grid

W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!







張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)