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!







張貼者： 於 沒有留言:

w3 portfolio template

Ref : http://www.w3schools.com/w3css/tryw3css_templates_portfolio.htm




<!-- First Photo Grid-->
  <div class="w3-row-padding"> // 一個row 
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="img_mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container">
      <img src="img_nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
  </div>
 
  <!-- Second Photo Grid-->
  <div class="w3-row-padding">    // 一個row 
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="img_fjords.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container w3-margin-bottom">
      <img src="img_lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
    <div class="w3-third w3-container">
      <img src="img_mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
      <div class="w3-container w3-white">
        <p><b>Lorem Ipsum</b></p>
        <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
      </div>
    </div>
  </div>




====================================================================





<!-- Sidenav/menu -->
<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidenav"><br>
  <div class="w3-container">
    <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding" title="close menu">
      <i class="fa fa-remove"></i>
    </a>
    <img src="img_avatar_g2.jpg" style="width:45%;" class="w3-round"><br><br>
    <h4 class="w3-padding-0"><b>PORTFOLIO</b></h4>
    <p class="w3-text-grey">Template by W3.CSS</p>
  </div>
  <a href="#" class="w3-padding w3-text-teal">HOME</a>
  <a href="#" class="w3-padding">ABOUT</a>
  <a href="#" class="w3-padding">PORTFOLIO</a>
  <a href="#" class="w3-padding">SHOP</a>
  <a href="#" class="w3-padding">CONTACT</a>
 

// 下面的按鈕

  <div class="w3-section w3-padding-top w3-large">
    <a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-block"><i class="fa fa-facebook-official"></i></a>
    <a href="#" class="w3-hover-white w3-hover-text-red w3-show-inline-block"><i class="fa fa-pinterest-p"></i></a>
    <a href="#" class="w3-hover-white w3-hover-text-light-blue w3-show-inline-block"><i class="fa fa-twitter"></i></a>
    <a href="#" class="w3-hover-white w3-hover-text-grey w3-show-inline-block"><i class="fa fa-flickr"></i></a>
    <a href="#" class="w3-hover-white w3-hover-text-indigo w3-show-inline-block"><i class="fa fa-linkedin"></i></a>
  </div>
</nav>




張貼者： 於 沒有留言:

2016年9月4日 星期日

W3 template study

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





<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
  <h3 class="w3-center">ABOUT ME</h3>
  <p class="w3-center"><em>I love photography</em></p>
  <p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <div class="w3-row">
    <div class="w3-col m6 w3-center w3-section">
      <p><b>My Name</b></p><br>
      <img src="https://unsplash.it/235/235?image=91" class="w3-circle" alt="Photo of Me">
    </div>

    <!-- Hide this text on small devices -->
    <div class="w3-col m6 w3-hide-small w3-section">
      <p>Welcome to my website. I am lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">   //  使用了bgimg-2 所指定的圖片
  <div class="w3-display-middle">
      //  使用span tag 來指定這個文字的color 和大小
    <span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
  </div>
</div>

<style>
/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("img_parallax2.jpg");
    min-height: 400px;
}
</style>

/*

Definition and Usage

The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
*/




<!-- Container (Portfolio Section) -->
<div class="w3-content w3-container w3-padding-64">
  <h3 class="w3-center">MY WORK</h3>
  <p class="w3-center"><em>Here are some of my latest lorem work ipsum tipsum.<br> Click on the images to make them bigger</em></p><br>

  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
//  一個row
  <div class="w3-row-padding w3-center">
    <div class="w3-col m3">
    // 當按下這個image
      <img src="img_p1.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p2.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p3.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p4.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
  </div>

//  一個row
  <div class="w3-row-padding w3-center w3-section">
    <div class="w3-col m3">
      <img src="img_p5.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p6.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p7.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>

    <div class="w3-col m3">
      <img src="img_p8.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity">
    </div>
  </div>
</div>


<script>
// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

就會把  img01 的img src 設成你點下去的img src....然後把 style.display 改成 "block"

<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-text-white w3-xxxlarge w3-container w3-display-topright">×</span>
  <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
    <img id="img01" style="max-width:100%">
  </div>
</div>






<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-text-white w3-xxxlarge w3-container w3-display-topright">×</span>
  <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
    <img id="img01" style="max-width:100%">
  </div>
</div>


<!-- Third Parallax Image with Portfolio Text -->
<div class="bgimg-3 w3-display-container">
  <div class="w3-display-middle">
     <span class="w3-xxlarge w3-text-light-grey w3-wide">CONTACT</span>
  </div>
</div>






add google map



<!-- Container (Contact Section) -->
<div class="w3-content w3-container w3-padding-64">
  <h3 class="w3-center">WHERE I WORK</h3>
  <p class="w3-center"><em>I'd love your feedback!</em></p>

  <div class="w3-row w3-padding-32 w3-section">
    <div class="w3-col m4 w3-container">
      <!-- Add Google Maps -->
      <div id="googleMap" class="w3-round-large"></div>
    </div>
    <div class="w3-col m8 w3-container w3-section">
      <div class="w3-large w3-margin-bottom">
      //   <i class="fa fa-map-marker w3-hover-text-black" style="width:30px"></i>  是icon
        <i class="fa fa-map-marker w3-hover-text-black" style="width:30px"></i> Chicago, US<br>
        <i class="fa fa-phone w3-hover-text-black" style="width:30px"></i> Phone: +00 151515<br>
        <i class="fa fa-envelope w3-hover-text-black" style="width:30px"> </i> Email: mail@mail.com<br>
      </div>
      <p>Swing by for a cup of coffee, or leave me a note:</p>
      <div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        <div class="w3-half">  // 只有一半
          <input class="w3-input w3-border w3-hover-light-grey" type="text" placeholder="Name">
        </div>
        <div class="w3-half">  // 只有一半
          <input class="w3-input w3-border w3-hover-light-grey" type="text" placeholder="Email">
        </div>
      </div>
      <input class="w3-input w3-border w3-hover-light-grey" type="text" placeholder="Comment">
      <button class="w3-btn w3-section w3-right">SEND</button>
    </div>
  </div>
</div>



<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798); // 輸入經度和緯度

function initialize() {
var mapProp = {
  center: myCenter,
  zoom: 12,
  scrollwheel: false,
  draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP   //  ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

//  標紀
var marker = new google.maps.Marker({
  position: myCenter,
});

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}

// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
    var navbar = document.getElementById("myNavbar");
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        navbar.className = "w3-navbar" + " w3-card-2" + " w3-animate-top" + " w3-white";
    } else {
        navbar.className = navbar.className.replace(" w3-card-2 w3-animate-top w3-white", "");
    }
}
</script>

張貼者： 於 沒有留言:
訂閱： 文章 (Atom)