ในความเป็นจริง แนวคิดของประตูบานเลื่อน CSS ปรากฏขึ้นเมื่อไม่กี่ปีที่ผ่านมา แต่มีการกล่าวถึงบ่อยขึ้นในช่วงไม่กี่ปีที่ผ่านมา แต่ผู้คนมักจะสับสนกับเอฟเฟกต์แท็บ โดยเฉพาะเพื่อนมือใหม่ ดังนั้นฉันจะเขียนคำอธิบายโดยละเอียดที่นี่ หวังว่ามันจะเป็นประโยชน์
ประตูบานเลื่อนไม่ใช่เทคโนโลยีที่ซับซ้อน แต่เป็นเพียงเทคนิค CSS เท่านั้น ใช้การทับซ้อนและการเลื่อนภาพพื้นหลังเพื่อให้ได้เอฟเฟกต์บางอย่าง รูปแบบที่พบบ่อยที่สุดคือการนำทางแบบมุมมน เราสามารถจินตนาการถึงพื้นหลังมุมโค้งมน 2 อัน ด้านซ้ายและด้านขวา เหมือนกับประตูบานเลื่อน 2 บาน ซึ่งสามารถเลื่อนเข้าหากันและทับซ้อนกันเพื่อแสดงเนื้อหาน้อยลง อื่นๆ เปิดเพื่อแสดงเนื้อหาเพิ่มเติมดังภาพด้านล่าง
ในบทช่วยสอนก่อนหน้านี้ ฉันชอบตัดภาพพื้นหลังออกเป็นสองส่วน ส่วนหนึ่งกว้างและส่วนแคบหนึ่งภาพเพื่อต่อเข้าด้วยกัน
ในที่นี้ เราใช้เพียงสองแท็ก "a" และ "span" เท่านั้น สไตล์นี้สามารถกำหนดสถานะได้สามสถานะ ซึ่งอาจกล่าวได้ว่าเป็นวิธีที่ง่ายที่สุด
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> <หัว> <สไตล์> เนื้อความ {font-size:12px;} .nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;} .nav a {display:inline-block; margin:0 3px; height:25px; background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ด้านล่างซ้าย สี:#666; ตกแต่งข้อความ:ไม่มี; เคอร์เซอร์:ตัวชี้;} .nav a span {display:inline-block; height:25px; line-height:25px; พื้นหลัง:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ด้านล่างขวา 15px;} .nav a:hover {พื้นหลัง:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ด้านบนซ้าย ไม่ทำซ้ำ color:#FFF;} .nav a:hover span {พื้นหลัง:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ด้านบนขวา ไม่ทำซ้ำ;} .nav a.set {พื้นหลัง:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ด้านบนซ้าย ไม่ทำซ้ำ color:#FFF; .nav a.set span {พื้นหลัง:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) ขวาบน ไม่ซ้ำ;} <ร่างกาย> |