วิธีการสร้างการอ้างอิงเนื้อหา CSS-Based

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน.

ในแบบฝึกหัดวันนี้เราจะเรียนรู้วิธีสร้าง a หีบเพลงเนื้อหาแนวนอนและแนวตั้งเพียงแค่ใช้ CSS3. มีปลั๊กอิน jQuery จำนวนมากที่สามารถทำงานนี้ให้คุณได้ แต่สิ่งที่คุณต้องทำหากผู้เข้าชมปิด Javascript จากนั้นหีบเพลงจะไม่ทำงานอย่างถูกต้อง ถ้าหีบเพลงของคุณหมดจดใน CSS แล้วมันจะทำงานสำหรับผู้เข้าชมทั้งหมดของคุณ.

เรากำลังจะสร้าง ตามแนวนอน และ แนวตั้ง หีบเพลงเนื้อหา เมื่อคลิกที่ข้อความพาดหัวสไลด์จะเปิดขึ้นเพื่อแสดงเนื้อหาเต็มและนี่คือตัวอย่างด่วน (ภาพหน้าจอ) ลักษณะที่ปรากฏ.

ชอบสิ่งที่คุณเห็น? ให้การเข้ารหัสเริ่มต้น!

1. การเตรียม HTML และเนื้อหา

เริ่มต้นด้วยการที่เราจะสร้าง HTML สำหรับหีบเพลง.

โครงสร้างต้องการภาชนะ div แล้วมี มาตรา สำหรับแต่ละสไลด์ในหีบเพลง ในตัวอย่างนี้เราจะมี 5 สไลด์ แต่ละสไลด์จะมีหัวเรื่องและย่อหน้าสำหรับเนื้อหา.

 
 
เกี่ยวกับเรา
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 
 
บริการ
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 
 
บล็อก
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 
 
ผลงาน
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 
 
ติดต่อ
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 

ตอนนี้เรามีสไลด์ของเราที่เราสามารถเริ่มต้นในการหีบเพลง.

2. CSS ใส่สไตล์

ก่อนอื่นเราต้องจัดรูปแบบการบรรจุ div ของหีบเพลง สิ่งนี้จะทำให้เรามีความคิดเกี่ยวกับวิธีการแสดงสไลด์แต่ละอันและหัวเรื่องแต่ละหัวข้อ.

 / * กำหนดกล่องหีบเพลง * / .accordion width: 830px; ล้น: ซ่อน; กำไร: อัตโนมัติ 10px; color: # 474747; พื้นหลัง: # 414141; padding: 10px; 

ต่อไปเราจะสร้างหัวเรื่องสำหรับแต่ละสไลด์.

 .ส่วนหีบเพลง ลอย: ซ้าย; ล้น: ซ่อน; color: # 333; เคอร์เซอร์: ตัวชี้; พื้นหลัง: # 333; margin: 3PX;  .accordion section: hover background: # 444; 

เรากำลังตั้งค่าสีพื้นหลังให้เป็นสีเทาเข้มในส่วนที่เป็นพาดหัวที่ผู้เข้าชมจะคลิกเพื่อแสดงสไลด์ เรากำลังใช้ส่วนนี้สำหรับทั้งหัวเรื่องและเนื้อหาซึ่งหมายความว่าเราสามารถใช้ HTML น้อยลงและนำหัวเรื่องของสไลด์กลับมาใช้เป็นหัวเรื่องของเนื้อหา.

 .หีบเพลงส่วน p แสดง: ไม่มี; 

ในขณะนี้สไลด์ทั้งหมดจะถูกปิดดังนั้นเราจำเป็นต้องตรวจสอบให้แน่ใจว่าย่อหน้าถูกซ่อนจากการดูจนกว่าสไลด์จะเปิดดังนั้นตอนนี้จึงตั้งค่าการแสดงย่อหน้าเป็น none.

 .ส่วนหีบเพลง: หลัง ตำแหน่ง: ญาติ; font-size: 24px; color: # 000; font-weight: หนา;  .accordion section: nth-child (1): หลัง เนื้อหา: '1';  .accordion section: nth-child (2): หลัง เนื้อหา: '2';  .accordion section: nth-child (3): หลัง เนื้อหา: '3';  .accordion section: nth-child (4): หลัง เนื้อหา: '4';  .accordion section: nth-child (5): หลัง เนื้อหา: '5'; 

เมื่อปิดสไลด์เราต้องการแสดงตัวเลขที่ด้านล่างของบรรทัดแรกเพื่อบอกว่าสไลด์ตัวเลขใดที่เราเปิดอยู่ สำหรับสิ่งนี้เราจะใช้ CSS เพื่อเพิ่มเนื้อหาหลังจากพาดหัวของส่วนซึ่งสามารถทำได้โดยใช้ :หลังจาก ตัวเลือก pseudo-class.

ตอนนี้เราได้สร้างพาดหัวสำหรับสไลด์ที่เราสามารถสร้างเหตุการณ์คลิกเพื่อแสดงสไลด์ในหีบเพลง แต่มีปัญหา CSS ไม่ได้มีการคลิกเหตุการณ์ซึ่งเป็นเหตุผลที่หีบเพลงถูกสร้างขึ้นโดยปกติโดยใช้ jQuery เพื่อให้เราสามารถแนบเหตุการณ์การคลิกไปที่ข้อความพาดหัว.

เราจำเป็นต้องเลียนแบบเหตุการณ์คลิกใน CSS ซึ่งสามารถทำได้โดยใช้ : เป้าหมาย ตัวเลือก pseudo-class.

3. การใช้ : เป้าหมาย ตัวเลือกคลาส pseudo

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

ในการเพิ่มสิ่งนี้ลงในหีบเพลงเราจำเป็นต้องเพิ่มลิงค์รอบ ๆ ข้อความพาดหัวที่ชี้ไปที่ รหัส ของสไลด์.

 
 
เกี่ยวกับเรา
 
Lorem ipsum dolor sit amet, consetetur adipiscing elit. รหัสประจำตัวของคุณ ก่อนหน้านี้ถัดไปบทความก่อนอื่นบทความเกี่ยวกับ mi โพสต์เกี่ยวกับการตั้งค่าระยะทางเพศชาย ผู้ให้บริการอำนวยความสะดวก นั่ง semper mauris นั่งอยู่เพียงแค่ชั่วคราวไม่ทราบว่า Lacinia Magna molestie Etiam placerat ปลอมตัวอยู่คนเดียว adipiscing ถ้าเป็นเช่นนี้ก็จะปรากฏขึ้น Etiam mattis dignissim gravida ไม่ใช่เพียงแค่ ante, ไม่ใช่ semper mi. เมื่อพิจารณาถึงความหนาแน่นของสสาร, หรือวิธีการกำจัดตะกอน สิ่งอำนวยความสะดวกด้านล่าง, egestas รับ placerat non, fringilla vel eros. องค์ประกอบของยานพาหนะเป็นผลให้. Phasellus eu erat enim แสดงที่ Magna non massa dapibus scelerisque ใน eu lorem.
 
 

 .ส่วนหีบเพลง: เป้าหมาย พื้นหลัง: #FFF; padding: 10px;  .accordion section: target: hover background: #FFF;  .accordion section: h2 เป้าหมาย width: 100%;  .accordion section: target h2 a color: # 333; padding: 0;  .accordion section: target p display: block;  .accordion ส่วน h2 a padding: 8px 10px; จอแสดงผล: บล็อก; font-size: 16px; font-weight: ปกติ; สี: สี #eee; ตกแต่งข้อความ: none; 

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

ตอนนี้เมื่อคุณคลิกที่พาดหัวของหีบเพลงสไลด์จะเปลี่ยนสไตล์เพื่อแสดงเนื้อหาของสไลด์.

4. หีบเพลงแนวนอน

โค้ดด้านบนจะสร้างหีบเพลงทั่วไปตอนนี้เราสามารถเริ่มทำการเปลี่ยนแปลง CSS สำหรับความแตกต่างระหว่างแนวนอนและแนวตั้ง หีบเพลงทั้งสองนี้มีฟังก์ชั่นเหมือนกัน แต่สไตล์ของพาดหัวจะแตกต่างกัน.

 .ส่วนแนวนอน ความกว้าง: 5%; ความสูง: 250px; -moz-transition: ความกว้าง 0.2s ช่วยให้ง่ายขึ้น; -webkit-transition: ความกว้าง 0.2s ทำให้ง่ายขึ้น; -o-transition: ความกว้าง 0.2s ทำให้ง่ายขึ้น; ช่วงการเปลี่ยนภาพ: ความกว้าง 0.2 วินาทีทำให้ง่ายขึ้น 

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

 / * วางตำแหน่งจำนวนของส่วนสไลด์ * / .horizontal: หลัง top: 140px; ซ้าย: 15px; 

ตำแหน่งของตัวเลขบนสไลด์จะเป็นตำแหน่งเดียวกันของพาดหัวที่ปิดแต่ละอันซึ่งอยู่ในตำแหน่งที่แตกต่างจากพาดหัวแนวตั้ง.

 / * ส่วนหัวของสไลด์ปิด * / .horizontal ส่วน h2 -webkit-transform: หมุน (90deg); -moz-เปลี่ยน: หมุน (90deg); -o-transform: หมุน (90deg); แปลง: หมุน (90deg); ความกว้าง: 240px; ตำแหน่ง: ญาติ; ซ้าย: -100px; ด้านบน: 85px;  / * วางเมาส์เหนือสไลด์ที่เปิดอยู่ * / .horizontal: target width: 73%; ความสูง: 230px;  .horizontal: เป้าหมาย h2 top: 0px; ซ้าย: 0; -webkit-เปลี่ยน: หมุน (0deg); -moz-เปลี่ยน: หมุน (0deg); -o-transform: หมุน (0deg); แปลง: หมุน (0deg); 

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

5. หีบเพลงแนวตั้ง

หีบเพลงในแนวตั้งทำงานแบบเดียวกับหีบเพลงในแนวนอนยกเว้นเราต้องเปลี่ยน ความสูง แทนการ ความกว้าง และเราไม่จำเป็นต้องเปลี่ยนการจัดตำแหน่งของข้อความ.

 .ส่วนแนวตั้ง ความกว้าง: 100%; ความสูง: 40px; -webkit-transition: ความสูง 0.2s ทำให้ง่ายขึ้น; -moz-transition: ความสูง 0.2s ได้อย่างง่ายดาย; -o-transition: ความสูง 0.2s ทำให้ง่ายขึ้น; การเปลี่ยนแปลง: ความสูง 0.2s ทำให้ง่ายขึ้น;  / * กำหนดความสูงของสไลด์ * / .vertical: target height: 250px; ความกว้าง: 97%; 

บน เป้า เหตุการณ์ของหีบเพลงแนวตั้งที่เรากำลังจะเปลี่ยน ความสูง ของบรรทัดแรกเพื่อแสดงสไลด์.

 .ส่วนแนวตั้ง h2 ตำแหน่ง: ญาติ; ซ้าย: 0; ด้านบน: -15px;  / * กำหนดตำแหน่งของตัวเลขในส่วนของสไลด์ * / .vertical: หลัง top: -60px; ซ้าย: 810px; . แนวตั้งส่วน: เป้าหมาย: หลังจาก left: -9999px; 

ด้านบนจะเปลี่ยน ตำแหน่ง ของข้อความพาดหัวบนสไลด์ปิด ด้วยสไลด์ปิดเราต้องตั้งค่า ตำแหน่ง ของจำนวนที่อยู่ทางด้านขวาของหีบเพลง เมื่อสไลด์เปิดขึ้นเราจำเป็นต้องซ่อนหมายเลขนี้ไว้บนบรรทัดแรกเมื่อกำหนดเป้าหมายดังนั้นเราจึงเปลี่ยนตำแหน่งด้านซ้ายออกจากหน้าจอ.

ตอนนี้เมื่อคุณคลิกที่พาดหัวของหีบเพลงสไลด์จะเปลี่ยนสไตล์เพื่อแสดงเนื้อหาของสไลด์.

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย พอลอันเดอร์วู้ด สำหรับ Hongkiat.com Paul เป็นนักพัฒนาเว็บ PHP จาก Bristol สหราชอาณาจักร เขาเขียนบทช่วยสอนเกี่ยวกับการพัฒนาเว็บ: วิชาหลัก ได้แก่ PHP, jQuery, CSS3 และ HTML5 เขายังบันทึกตัวอย่างโค้ดที่เป็นประโยชน์ที่ Paulund.co.uk.