Chuyển tới nội dung
Home » เรียนสร้างเว็บ lesson 4 : สร้างเมนูหลัก Vertical navigation | ชิดขวา html

เรียนสร้างเว็บ lesson 4 : สร้างเมนูหลัก Vertical navigation | ชิดขวา html

เรียนสร้างเว็บ lesson 4 : สร้างเมนูหลัก Vertical navigation


นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูเพิ่มเติม

ทุกเว็บไซต์จะขาดเมนูสำหรับเชื่อมโยงลิงค์ไปแต่ละหน้าไม่ได้ บทนี้จะสอนการแปลงร่างจากเมนูแนวตั้ง ให้เป็นเมนูแนวนอน (Vertical navigator) พร้อมทั้งกำหนด Alignment ของ Navigator ชิดซ้าย กึ่งกลาง ชิดขวา
เรียนรู้โครงสร้าง HTML สำหรับ Navigator
CSS selector แบบกำหนด Child node ช่วยกำหนดแท็กลูกหลายๆตัวพร้อมกัน
CSS property display : inlineblock กำหนดเมนูแนวนอน
CSS propery textalign : [value] จัดตำแหน่ง Alignment
รายละเอียด
http://iamtum.com/sourcesupporter

เรียนสร้างเว็บ lesson 4 : สร้างเมนูหลัก Vertical navigation

ขนาด จูออน ยังชิดขวา !!!


นำแสดงโดย @pleplejung เหวอออออ

ขนาด จูออน ยังชิดขวา !!!

จัดข้อมูลชิดซ้าย อยู่ตรงกลาง จัดชิดขวา MS Excel


โดยมาก เวลาทำตารางงานกับ ms excel ตัวอักษรมักจะอยู่ในตำแหน่งที่เราไม่ค่อยเห็นด้วยเสมอ ดังนั้นผู้ใช้งาน จึงจำเป็นต้องคอยจัดข้อมูลให้ชิดซ้าย อยู่ตรงกลาง หรือจัดชิดขวาในตารางงาน MS Excel อยู่บ่อย ๆ

จัดข้อมูลชิดซ้าย อยู่ตรงกลาง จัดชิดขวา MS Excel

HTML.2 สอนขยายตัวหนังสือง่ายๆ โดยการใช้ h tag ด้วยภาษา HTML


คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกันนะครับ ไล่ตั้งแต่ h1, h2, h3 ,h4, h5, h6
ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง
โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา
จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

HTML.2 สอนขยายตัวหนังสือง่ายๆ โดยการใช้ h tag ด้วยภาษา HTML

การออกแบบ Dashboard ด้วย Bootstrap 4 | สร้างเว็บแบบเข้าใจง่ายๆ สไตล์ลพ.ภูริ – Ep.11


เจริญพรผู้มีบุญทุกท่าน
VDO นี้จะสอน Bootstrap 4 ที่เป็น CSS library ที่นิยมมากที่สุดในโลก ซึ่งช่วยในการตกแต่งเว็บไซท์ ทำให้เว็บของเรามีความเรียบร้อย สวยงาม น่าใช้งาน และทำได้อย่างรวดเร็วยิ่งขึ้น เพราะช่วยให้เราลดการเขียน CSS เอง ลงไปได้มาก
เหตุที่ทำVDOนี้ออกมา ก็เนื่องจากมีน้องๆหลายคนอยากเขียนเว็บเป็น และช่วงนี้มีเวลาเนื่องจากเป็นภาวะที่ต้องอยู่บ้านกัน เพราะ Covid19 ระบาด จึงอยากแบ่งปันความรู้ที่หลวงพี่พอจะมีอยู่บ้าง เพื่อเป็นธรรมทาน เป็นวิทยาทาน ให้แก่ผู้ที่สนใจอยากก้าวเข้ามาสู่โลกของการเขียนโปรแกรม พัฒนาเว็บแอปพลิเคชัน เพื่อสร้างประโยชน์แก่ตนเอง สังคม ประเทศชาติ และพระพุทธศาสนาของเรานะ
บุญรักษา,
ภูริวโร
สารบัญเวลา
0:00 Intro
0:12 ตัวอย่างที่ 2 ในหัวข้อ Dashboard + อธิบายเนื้อหาว่าใช้คำสั่งไหนบ้าง
2:03 ตัวอย่างโค้ดการส้ราง Dashboard
3:09 การนำ JavaScript มาใช้ในโค้ด
3:40 การสร้างแถบเมนูข้างบนด้วยคำสั่ง Navbar
9:52 การสร้างแถบเมนูด้านข้างด้วยคำสั่ง List group
13:45 การปรับขนาดของแถบเมนูด้านข้างให้ดูเหมาะสม
13:44 การปรับขนาดแถบเมนูด้านข้าง
14:36 การสร้าง Breadcrumb
15:41 การใส่ Card ในคอลัมน์
17:47 การใส่รูปภาพ
19:41 การใส่ข้อความ
20:45 เพิ่ม Spacing โดยการใส่ Margin \u0026 Padding
21:30 การใช้งานคำสั่ง Colors \u0026 Text
24:07 การใช้งานคำสั่ง Padding
25:27 การสร้าง Progress Bar โดยใช้คำสั่ง Progress
27:44 การปรับระดับ Progress Bar โดยใช้คำสั่ง Sizing
28:27 การปรับสีให้ Progress Bar
30:53 การสร้าง Card รูปภาพและใส่ข้อความ
36:30 การสร้าง Items Manager
41:06 การสร้าง Dropdowns
43:47 การสร้างตาราง
47:35 การสร้างตัวคั่นหน้า โดยใช้คำสั่ง Pagination
48:53 การสร้าง Card รูปภาพและภาพสไลด์โชว์(โดยใช้คำสั่ง Carousel)
52:36 การสร้าง Footer (ส่วนล่างสุด)
57:28 การสร้าง Modal
1:00:54 Think Less Meditate More ทิ้งทุกอย่างวางทุกสิ่งแล้ว\”นั่งสมาธิกัน\”
(อนุโมทนากับน้องกาน ที่ช่วยทำสารบัญเวลาให้ด้วยนะ)
Slide การสอน Bootstrap 4
https://docs.google.com/presentation/d/1EjwH719PfCOkuP8C5gw7ff5clDgWrJxUe6oqLJgQHw/edit?usp=sharing
Code
https://github.com/purivaro/learnphp
Playlist ทั้งหมด
สร้างเว็บด้วย PHP \u0026 MySQL แบบง่ายๆ เน้นความเข้าใจ สไตล์ลพ.ภูริ
https://www.youtube.com/playlist?list=PLpIeia4uHe4KCVFw1B7UYs3uYOWICFKoe

การออกแบบ Dashboard ด้วย Bootstrap 4  | สร้างเว็บแบบเข้าใจง่ายๆ สไตล์ลพ.ภูริ - Ep.11

นอกจากการดูหัวข้อนี้แล้ว คุณยังสามารถเข้าถึงบทวิจารณ์ดีๆ อื่นๆ อีกมากมายได้ที่นี่: ดูวิธีอื่นๆWki

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *