W3.CSS

ใครที่จะไปซื้อ GUI จาก THEME FOREST ผมแนะนำให้ใช้ GUI CSS จาก W3C SCHOOL แทน เพราะว่า THEME FOREST มันสลับซับซ้อนเกินไปครับ

THEME FOREST ก็ เอา GUI ของ W3C SCHOOL มาทำนั่นแหละครับ W3.CSS

 

 W3.CSS

 

 

 

 

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

มันจะมีปุ่ม Try IT yourself

ดูรูปดีดีทาง menu ซ้ายมือจะมีตัวอย่าง component เต็มไปหมด

 

 

 w3css website template

 

 

 

 All Menus

 

https://www.w3schools.com/w3css/defaulT.asp

https://www.w3schools.com/w3css/w3css_examples.asp

https://www.tutorialspoint.com/w3css/index.htm

 

 

Font Awesome Introduction

https://www.w3schools.com/icons/fontawesome_icons_intro.asp

Font Awesome Text Icons

https://www.w3schools.com/icons/fontawesome_icons_text.asp

W3.CSS Icons

http://www-db.deis.unibo.it/.../w3css_icons.asp.html...

Font Awesome Form Icons

http://www-db.deis.unibo.it/.../fontawesome_icons_form...

 

 

 

 

W3.CSS Navigation Tabs

https://www.w3schools.com/w3css/w3css_tabulators.asp

มีปุ่ม try it yourself ด้วยนะ run ให้เห็นกันจะจะไปเลย

<div id="London" class="city">

<h2>London</h2>

<p>London is the capital of England.</p>

</div>

<div id="Paris" class="city" style="display:none">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

</div>

<div id="Tokyo" class="city" style="display:none">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</div>

<div class="w3-bar w3-black">

<button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>

<button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>

<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>

</div>

function openCity(cityName) {

var i;

var x = document.getElementsByClassName("city");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

document.getElementById(cityName).style.display = "block";

}

W3.CSS Navigation Tabs

https://www.w3schools.com/w3css/w3css_tabulators.asp

 

 

 

 

 try it yourself

 

 

 mainmenu

 

  

w3css color (Material)

 

https://www.w3schools.com/w3css/w3css_demo.asp

ชอบตรงทีมี DEMO กับ TRY IT นี่แหละ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://www.w3schools.com/css/css_rwd_viewport.asp

What is The Viewport?

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

 

ลองเปิด browser แล้ว resize ดูครับ

ว่า content ข้างในมันเปลี่ยนไปยังไง

เมื่อขนาดเปลี่ยน

When viewing a document in a web browser, the viewport is the region of the browser window which contains the visible portion of the document. If the size of the viewport changes, for example as a result of the user resizing the browser window, then the browser may reflow the document (recalculate the locations and sizes of elements of the document). If the document is larger than the viewport, the user can control the portion of the document which is visible by scrolling in the viewport.[5]

 

ผม REVIEW W3.CSS โดยคร่าวๆที่จำเป็นไปหมดแล้วนะครับขอบอกว่าของ FREE ครับ ใช้ง่ายด้วย

ทำไม่เป็น กดปุ่ม TRY IT เอาแล้วแก้ code ทางซ้ายมือ แล้วดูผลลัพท์ทางด้านขวามือว่าเป็นยังไง ตาม code ที่เราได้แก้ทางซ้ายมือนั่นเองครับ