TIP : CSS ปิดการแสดงผลข้อความ โดยใช้เครื่องมือ "ตรวจดูส่วนประกอบ"

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

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 18091
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

TIP : CSS ปิดการแสดงผลข้อความ โดยใช้เครื่องมือ "ตรวจดูส่วนประกอบ"

โพสต์โดย thatsawan » 07/01/2015 12:29 pm

จากบทความที่เเล้วได้ทำการแนะนำเครื่องมือช่วยในการพัฒนาเเละปรับแต่ง CSS พร้อมทั้งกับวิธีการใช้งานเบื้องต้นกันไปเเล้ว ในส่วนของตัวอย่างการใช้งานในเรื่องรายละเอียดต่างๆ ของเครื่องมือ จะขอเริ่มต้นการเเนะนำการใช้งานของ เครื่องมือ "ตรวจดูส่วนประกอบ" กันก่อน โดยบทความนี้จะยกตัวอย่างการ ปิดการแสดงผลของส่วนแสดงผลข้อความ ซึ่งจะมีขั้นตอนง่ายๆ ดังนี้ค่ะ
7-1-2558 12-18-42.jpg
7-1-2558 12-18-42.jpg (69.84 KiB) เปิดดู 616 ครั้ง

ผลลัพท์ที่ได้ค่ะ
1. ให้ทำการเปิดการใช้งานเครื่องมือค่ะ
- คลิกขวา เลือกที่ "ตรวจดูส่วนประกอบ"
- หาตำแหน่งของ Class โดยการคลิกที่เครื่องมือ
7-1-2558 12-23-51.jpg
7-1-2558 12-23-51.jpg (912 ไบต์) เปิดดู 616 ครั้ง

- *ในตัวอย่างเราจะปิดการเเสดงผลข้อความของหน้าจอ ขนาดมือถือ เราก็จะใช้เครื่องมือ
7-1-2558 12-24-08.jpg
7-1-2558 12-24-08.jpg (1.18 KiB) เปิดดู 616 ครั้ง
เพื่อให้เครื่องมือจำลองหน้าจอมือถือให้เราค่ะ
- ที่นี่ให้เรานำเมาส์ไปคลิกให้เกิดกรอบของข้อความตำแหน่งของที่เราจะทำงาน สังเกตุช่องทางด้านซ้ายมือจะแสดงเเท็ก HTML ที่เรียกใช้งาน

7-1-2558 12-05-28.jpg
7-1-2558 12-05-28.jpg (141.14 KiB) เปิดดู 616 ครั้ง

2.เมื่อเราได้ตำแหน่งของ Class ที่นี่ลองมองมาทางซ้ายมือค่ะ เราจะเห็นคุณสมบัติของ Class นั้นๆ ที่นี่เราก็จะหา Class ของ ที่เราจะทำการปิดเเล้ว เราสามารถที่จะเพิ่มคุณสมบัติลงไปในช่องทางด้านซ้ายมือได้เลยค่ะ จากนั้นดูการแสดงผลตัวอย่าง
7-1-2558 12-09-14.jpg
7-1-2558 12-09-14.jpg (129.32 KiB) เปิดดู 616 ครั้ง


** เสร็จเเล้วค่ะ เพียงเเค่ 2 ขั้นตอนในการใช้งานเครื่องมือช่วยพัฒนาเเละปรับเเต่ง CSS **

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 9 และ บุคคลทั่วไป 0 ท่าน