ลิงก์ข้อความอาจกล่าวได้ว่าเป็นองค์ประกอบของหน้าที่พบบ่อยที่สุดบนหน้าเว็บ เนื่องจากรูปแบบลิงก์ข้อความเริ่มต้นจะถูกขีดเส้นใต้ไว้ มีการใช้กันแพร่หลาย ความปรารถนานี้เป็นจริงได้ง่ายมาก วันนี้ผมจะมาแนะนำวิธีใช้สไตล์ชีทเพื่อสร้างเอฟเฟ็กต์ลิงก์ข้อความที่มีสีสัน ฉันจะแนะนำให้ทุกคนรู้จักในบทเบื้องต้น ขั้นสูง และขั้นสูง เอฟเฟกต์สไตล์ลิงก์ทั้งหมดจะเสร็จสมบูรณ์ในตัวแก้ไขสไตล์ของ Dreamweaver โปรดดูบทนำก่อนหน้าสำหรับการใช้ตัวแก้ไขสไตล์ใน Dreamweaver เอฟเฟ็กต์การเรียกดูแบบลิงก์มีดังต่อไปนี้ สำหรับการเรียกดูหน้าเฉพาะ โปรดดูที่นี่
1. การเตรียมการ
ก่อนอื่นเราจะสร้างรูปแบบลิงก์พื้นฐาน และสไตล์อื่นๆ จะเพิ่มคลาสคลาสที่กำหนดเองตามสิ่งนี้
1. กด Shift+F11 เพื่อเปิดแผงสไตล์และคลิกปุ่มสไตล์ใหม่ ดังแสดงในรูปที่ 1
2. เลือก Use CSS Selector ในตัวเลือก Type เพื่อสร้างรูปแบบลิงค์เริ่มต้น ดังแสดงในรูปที่ 2
3. ดังแสดงในรูปที่ 3 ให้ตั้งค่ารูปแบบลิงก์เริ่มต้นเป็นไม่ขีดเส้นใต้ แบบอักษรเป็น Song Dynasty 9pt และไม่มีสีอื่น ฯลฯ เราจะตั้งค่าแยกกันสำหรับแต่ละคลาสในภายหลัง
4. กำหนดสไตล์คลาส คลาส แต่ละสไตล์ของเราด้านล่างกำหนดคลาสแยกกันและกำหนดให้กับข้อความลิงก์ ขั้นตอนมีดังนี้: คลิกเพิ่มเพื่อเปิดแผงสไตล์คำจำกัดความใหม่ เลือกสร้างสไตล์ที่กำหนดเอง (คลาส) เพื่อกำหนดคลาสสไตล์ของคุณเอง ดังแสดงในรูปที่ 4;
5. เพิ่มคลาสสไตล์ให้กับข้อความลิงก์ เลือกข้อความลิงก์ใน Dreamweaver เลือก ป้ายกำกับบนแถบเลือกป้ายกำกับด่วนที่ด้านล่างของหน้าต่าง คลิกขวาที่ป้ายกำกับ และเลือก Set Class เพื่อกำหนดสไตล์ที่กำหนดเองให้กับข้อความลิงก์ ดังแสดงในรูปที่ 5
6. วิธีการสำหรับรูปแบบข้อความลิงก์อื่นๆ จะเหมือนกัน และฉันจะไม่แนะนำอีกครั้งในภายหลัง ในบทช่วยสอนนี้ เพื่อนๆ สามารถสร้างสไตล์ลิงก์ของตนเองเพื่อกำหนดสถานะโฮเวอร์ได้ ฉันจะไม่แนะนำมันอีกต่อไป เพียงป้อน [.t1:hover] โดยตรงเมื่อได้รับแจ้งให้ระบุคำจำกัดความ
2. รูปแบบลิงก์หลัก
เราจะทำส่วนนี้ของเอฟเฟกต์ลิงก์ให้สมบูรณ์ในหมวดหมู่ประเภทของเครื่องมือแก้ไขสไตล์ ฉันจะไม่ลงรายละเอียดเกี่ยวกับวิธีการสร้างและตั้งค่า ฉันจะแสดงเฉพาะแผนภาพแผงที่เสร็จสมบูรณ์แล้วและให้คำแนะนำสั้นๆ เท่านั้น
1. ลิงค์ธรรมดา ดังแสดงในรูปที่ 6;
ลิงก์ทั่วไปจะถูกตั้งค่าไว้ในรายการแรก ประเภท ในหมวดหมู่หมวดหมู่ของเครื่องมือแก้ไขสไตล์ สี กำหนดสีของแบบอักษรลิงก์ และ การตกแต่ง กำหนดสไตล์ที่ขีดเส้นใต้ของลิงก์ ซึ่งแบ่งออกเป็นหมวดหมู่ต่อไปนี้:
ขีดเส้นใต้: ขีดเส้นใต้ โอเวอร์ไลน์: โอเวอร์ไลน์ เส้นผ่าน: ขีดทับ กะพริบ: เส้นกะพริบ ไม่มี: ไม่มีการขีดเส้นใต้
รูปแบบลิงก์อื่นๆ ในส่วนนี้สามารถทำได้โดยการเปลี่ยนการผสมผสานของเส้นขีด
2. ไม่มีลิงค์ที่ขีดเส้นใต้ ดังแสดงในรูปที่ 7
3. ลิงค์ขีดเส้นใต้คู่ ดังแสดงในรูปที่ 8
4. ลิงค์ขีดฆ่า ดังแสดงในรูปที่ 9
3. รูปแบบลิงก์ขั้นสูง
ต่อไป ฉันจะแนะนำวิธีกำหนดรูปแบบลิงก์ทางเลือก วิธีนี้ใช้แอตทริบิวต์ Border ในสไตล์ชีตเป็นหลักเพื่อแทนที่การขีดเส้นใต้ของลิงก์ทั่วไป เนื่องจาก Border มีพารามิเตอร์และสไตล์การควบคุมมากกว่า จึงสามารถใช้ฟังก์ชันพิเศษบางอย่างได้ ลองดูที่แผงด้านล่าง ดังแสดงในรูปที่ 10
ตัวเลือกเส้นขอบประกอบด้วยสามส่วน: ความกว้าง (ความกว้างของเส้น) สี (สีของเส้น) และสไตล์ (ประเภทของเส้น) และแต่ละส่วนสามารถตั้งค่าพารามิเตอร์ที่แตกต่างกันสำหรับเส้นขอบที่แตกต่างกัน นี่เป็นเอฟเฟกต์ที่เป็นไปไม่ได้
เราจำเป็นต้องเตือนทุกคนว่ามีเงื่อนไขที่จำเป็นสำหรับการใช้วิธีนี้ในการกำหนดสไตล์ของลิงก์: ต้องกำหนดแอตทริบิวต์ Box ในสไตล์ ดังแสดงในรูปที่ 11;
เนื่องจาก Border เป็นองค์ประกอบบล็อกในรูปแบบ และเราต้องกำหนดองค์ประกอบบล็อกก่อนจึงจะสามารถใช้งาน Border ได้ เราจำเป็นต้องกำหนดความกว้างหรือความสูงในกล่องโดยพลการเท่านั้น คุณสามารถลองใช้ค่าเฉพาะเพื่อดูเอฟเฟกต์ได้ ฉันได้กำหนดความสูงเป็น 0 ที่นี่ มาดูกันว่าเอฟเฟกต์ประเภทใดที่สามารถทำได้
1. รูปแบบลิงก์ทางเลือก การตั้งค่าต่างๆ ดังแสดงในรูปที่ 12
2. ปรับแต่งสีขีดเส้นใต้ เราสามารถกำหนดสีอื่นให้กับขีดเส้นใต้และข้อความได้ นี่เป็นเอฟเฟกต์ที่ไม่สามารถทำได้ด้วยข้อความลิงก์ธรรมดา แตกต่างออกไป ดังแสดงในรูปที่ 13;
3. ปรับแต่งระยะห่างที่ขีดเส้นใต้ เราสามารถกำหนดระยะห่างของเส้นประเภทนี้ในหมวดหมู่ Box ได้โดยการเปลี่ยนค่าของ Padding ในตัวอย่างนี้ เราตั้งค่า Padding—Bottom เป็น 5pix ดังแสดงในรูปที่ 14
4. ปรับแต่งความยาวและการจัดแนวการเขียน นอกจากนี้เรายังสามารถกำหนดความยาวและการจัดแนวของเส้นได้อย่างแม่นยำ เปิดหมวดหมู่ Box และตั้งค่าความกว้างเป็น 200 ดังแสดงในรูปที่ 15 ตั้งค่าการจัดตำแหน่งข้อความของหมวดหมู่บล็อกให้อยู่ตรงกลางซึ่งเป็นการจัดตำแหน่งตรงกลางดังที่แสดง ในรูปที่ 16;
5. ปรับแต่งเอฟเฟกต์ขีดเส้นใต้คู่ เปลี่ยนสไตล์ในเส้นขอบเพื่อเปลี่ยนลักษณะที่ปรากฏของการขีดเส้นใต้ ตั้งค่าสไตล์เป็นสองเท่าและด้านล่างเป็น 3pix เพื่อให้ได้เอฟเฟกต์การขีดเส้นใต้สองครั้ง ดังแสดงในรูปที่ 17;
4. รูปแบบลิงก์ขั้นสูง
ด้วยการรวมเทคนิคที่แนะนำไว้ข้างต้น เรายังสามารถสร้างรูปแบบลิงก์ข้อความที่ซับซ้อนมากขึ้นได้ ด้านล่างเราจะแนะนำสามตัวอย่าง
1. กำหนดลิงค์บล็อก ขั้นแรกให้เพิ่มสีพื้นหลังให้กับลิงก์ ดังแสดงในรูปที่ 18
จากนั้นเพิ่มเส้นขอบสี่เส้นให้กับลิงก์ข้อความเพื่อให้ได้ลิงก์ข้อความแบบบล็อกแบน ดังแสดงในรูปที่ 19
2. กำหนดลิงก์ข้อความที่มีลักษณะคล้ายปุ่ม เปลี่ยนรูปแบบของเส้นขอบและกำหนด Border-Style เป็นจุดเริ่มต้น ดังแสดงในรูปที่ 20
กำหนดความกว้างและความสูงในกล่องตัวเลือกเพื่อกำหนดความกว้างและความสูงของปุ่ม กำหนด Padding เป็น 2pix เพื่อสร้างระยะห่าง 2pix ระหว่างข้อความลิงก์และปุ่ม ดังแสดงในรูปที่ 21
3. กำหนดลิงก์ข้อความเอฟเฟกต์พิเศษ สไตล์ชีต CSS ยังมีชุดฟิลเตอร์เอฟเฟกต์พิเศษ เราสามารถรวมฟิลเตอร์กับพารามิเตอร์ก่อนหน้าเพื่อสร้างสไตล์ลิงก์พิเศษได้ ในตัวอย่างนี้ ฉันสร้างลิงก์ข้อความโดยใช้ตัวกรอง Blur โดยมีเอฟเฟกต์เส้นขอบ ดังแสดงในรูปที่ 22;
4. กำหนดผลกระทบของการสลับพื้นหลังแบบคงที่ ตัวอย่างนี้คือเพื่อให้ได้เอฟเฟกต์ของการสลับพื้นหลังโดยการตั้งค่าภาพพื้นหลังที่แตกต่างกันสำหรับสถานะปกติและสถานะโฮเวอร์ของข้อความลิงก์ ดูภาพด้านล่าง:
5. ผลของการสลับพื้นหลังแบบไดนามิก โดยพื้นฐานแล้วเอฟเฟกต์นี้จะเหมือนกับตัวอย่างข้างต้น ยกเว้นว่าพื้นหลังรูปภาพ Gif แบบไดนามิกถูกกำหนดไว้ในสถานะโฮเวอร์ และรูปภาพนี้ต้องใช้ทักษะเล็กน้อย คือ ตั้งค่าการวนซ้ำเป็นครั้งเดียว เพิ่มเฟรมที่ส่วนท้าย และตั้งเวลาเฟรมให้มีค่ามากขึ้น เช่น 10,000 ซึ่งจะทำให้แอนิเมชั่นดำเนินการได้ด้านเดียวแล้วหยุด เพื่อที่จะปรับปรุงความเร็วของการดำเนินการเอฟเฟกต์ เรายังจำเป็นต้องเพิ่มพฤติกรรมการโหลดล่วงหน้า /doc/webpage/images/images ใน Dreamweaver สิ่งนี้จำเป็นต้องเปิดแผงพฤติกรรมและเพิ่มพฤติกรรมโหลดล่วงหน้า /doc/webpage/images/images ดังแสดงในรูป:
เราสามารถโหลดรูปภาพทั้งสี่ภาพล่วงหน้าที่จำเป็นสำหรับรูปแบบลิงก์สองรูปแบบสุดท้ายได้ ดังที่แสดงด้านล่าง:
5. สรุป
ฉันจะแนะนำรูปแบบลิงก์มากมาย และเมื่อรวมกับการตั้งค่าสถานะโฮเวอร์ของข้อความลิงก์ คุณจะสามารถสร้างเอฟเฟกต์ที่สวยงามมากได้ โปรดดูที่นี่ สำหรับการเรียกดูหน้าเว็บโดยเฉพาะ ฉันหวังว่าเพื่อนๆ จะสามารถสร้างข้อความลิงก์เพิ่มเติมตามข้างต้นได้ ความคิดสไตล์ โปรดจำไว้ว่า สไตล์ชีตก็เหมือนกับภูเขาน้ำแข็งที่มีขุมทรัพย์ในการผลิตหน้าเว็บ วันนี้เราได้ค้นพบเพียงมุมเล็กๆ ของภูเขาน้ำแข็งเท่านั้น สมบัติอื่นๆ กำลังรอให้คุณค้นพบ