โดย pprn » 09/07/2018 3:00 pm
- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
- Navigation Bar คือ เมนูลิงค์เป็นส่วนเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์
- Dropdown คือ รายชื่อเมนูที่เมื่อใช้เมาส์กดแล้วจะมีรายการแสดงให้เลือก
รูปแบบโค้ด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<!-- Dropdown -->
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
</div>
</div>
</div>
<!-- Page Content -->
<div class="CSS color">
<button class="w3-button w3-black w3-xlarge" onclick="w3_open()">Text_edit</button>
<div class="w3-container">
</div>
</div>
<script>
function w3_open() {
document.getElementById("Sidebar").style.display = "block";
}
function w3_close() {
document.getElementById("Sidebar").style.display = "none";
}
</script>
</body>
</html>
- อธิบายโค้ด
- - Text_edit คือ ส่วนที่อยากโชว์ข้างๆ slide bar
- CSS color คือ code สีของ CSS
ตัวอย่างโค้ด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
<!-- Page Content -->
<div class="w3-black">
<button class="w3-button w3-black w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
</div>
</div>
<script>
function w3_open() {
document.getElementById("Sidebar").style.display = "block";
}
function w3_close() {
document.getElementById("Sidebar").style.display = "none";
}
</script>
</body>
</html>
- อธิบายโค้ด
- - ☰ คือ html symbols แบบสามขีด (สัญลักษณ์ html)
- w3-black คือ CSS color สีดำ
- function w3_open คือ เมื่อคลิกที่ Sidebar จะมีเปิด slidebar ขึ้นมา
- function w3_close คือ เมื่อคลิกที่ Sidebar จะมีปิด slidebar ขึ้นมา
- button onclick คือ เมื่อกดปุ่มแล้วคลิกจะทำตามเงื่อนไข
ผลลัพธ์
- หน้า slidebar dropdown navigation ก่อนกด
- หน้า slidebar dropdown navigation ก่อนกด
- หน้า slidebar dropdown navigation หลังกด
- หน้า slidebar dropdown navigation หลังกด
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------
[list][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]CSS[/url] ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ [/list] หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
[list]Navigation Bar คือ เมนูลิงค์เป็นส่วนเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์[/list]
[list]Dropdown คือ รายชื่อเมนูที่เมื่อใช้เมาส์กดแล้วจะมีรายการแสดงให้เลือก[/list]
[b][size=150][color=#FF0000]รูปแบบโค้ด[/color][/size][/b]
[list][code]<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<!-- Dropdown -->
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
</div>
</div>
</div>
<!-- Page Content -->
<div class="CSS color">
<button class="w3-button w3-black w3-xlarge" onclick="w3_open()">Text_edit</button>
<div class="w3-container">
</div>
</div>
<script>
function w3_open() {
document.getElementById("Sidebar").style.display = "block";
}
function w3_close() {
document.getElementById("Sidebar").style.display = "none";
}
</script>
</body>
</html> [/code][/list]
[list][u]อธิบายโค้ด[/u]
[list]- Text_edit คือ ส่วนที่อยากโชว์ข้างๆ slide bar
- CSS color คือ code สีของ CSS[/list][/list]
[b][size=150][color=#FF0000]ตัวอย่างโค้ด[/color][/size][/b]
[list][code]<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="Sidebar">
<button onclick="w3_close()" class="w3-bar-item w3-large">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
<!-- Page Content -->
<div class="w3-black">
<button class="w3-button w3-black w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
</div>
</div>
<script>
function w3_open() {
document.getElementById("Sidebar").style.display = "block";
}
function w3_close() {
document.getElementById("Sidebar").style.display = "none";
}
</script>
</body>
</html> [/code][/list]
[list][u]อธิบายโค้ด[/u]
[list]- ☰ คือ html symbols แบบสามขีด (สัญลักษณ์ html)
- w3-black คือ CSS color สีดำ
- function w3_open คือ เมื่อคลิกที่ Sidebar จะมีเปิด slidebar ขึ้นมา
- function w3_close คือ เมื่อคลิกที่ Sidebar จะมีปิด slidebar ขึ้นมา
- button onclick คือ เมื่อกดปุ่มแล้วคลิกจะทำตามเงื่อนไข[/list][/list]
[b][size=150][color=#FF0000]ผลลัพธ์[/color][/size][/b]
[b][list]หน้า slidebar dropdown navigation ก่อนกด[/list][/b]
[list][attachment=0]slidebar.JPG[/attachment][/list]
[b][list]หน้า slidebar dropdown navigation หลังกด[/list][/b]
[list][attachment=1]slid bar dropdown.png[/attachment][/list]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]
[color=#FF00BF][i]_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] , [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url] โดยสามารถศึกษาได้จากบทเรียน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2127-php-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]PHP[/url] ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________[/color][/i]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]