วิธีทำลิงค์ให้สวยงาม

สารบัญ:

วิธีทำลิงค์ให้สวยงาม
วิธีทำลิงค์ให้สวยงาม

วีดีโอ: วิธีทำลิงค์ให้สวยงาม

วีดีโอ: วิธีทำลิงค์ให้สวยงาม
วีดีโอ: คัดลอกลิ้งค์ไลน์ ทําไง วิธีสร้าง ลิงค์ line แชร์ line ให้เพื่อน (อัพเดท 2020) l ครูหนึ่งสอนดี 2024, อาจ
Anonim

ลิงก์มีผลอย่างมากต่อลักษณะที่ปรากฏของหน้าเว็บ ไม่ว่าจะเป็นเว็บไซต์หรือบล็อกของคุณ ลิงก์ที่ปรับแต่งอย่างสวยงามจะเปลี่ยนการออกแบบเว็บไซต์ของคุณให้ดีขึ้น แม้จะไม่มีความรู้เกี่ยวกับ html และ css การสร้างลิงก์ที่ดีก็ค่อนข้างง่าย

วิธีทำลิงค์ให้สวยงาม
วิธีทำลิงค์ให้สวยงาม

คำแนะนำ

ขั้นตอนที่ 1

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

คุณยังสามารถเพิ่มข้อความที่จะปรากฏขึ้นเมื่อคุณคลิกที่ลิงค์ แอตทริบิวต์ "title" ของแท็กจะช่วยคุณในเรื่องนี้

ขั้นตอนที่ 2

ทีนี้มาดูการเชื่อมโยงกัน วิธีที่ง่ายที่สุดในการทำเช่นนี้คือในสไตล์ชีตแบบเรียงซ้อน (css) เปิดไฟล์ที่มีสไตล์สำหรับเว็บไซต์ของคุณและเขียนโค้ดเพิ่มเติมที่นั่น หรือคุณสามารถแทรกสไตล์ลงในหน้า html ได้โดยตรง เมื่อต้องการทำสิ่งนี้ ให้ใช้โค้ดการปรับแต่งสไตล์ไซต์

ขั้นตอนที่ 3

มาลงที่การออกแบบกันเถอะ ไวยากรณ์สำหรับรายการจะเป็น {พารามิเตอร์สไตล์} ฉันควรเขียนอะไรที่นี่?

ขั้นแรก เปลี่ยนสีของลิงก์ตามที่คุณต้องการ รหัสนี้จะช่วยคุณในเรื่องนี้:

a {สี: # 00000;} แน่นอน แทนที่จะเป็น "# 00000" คุณต้องใส่สีของคุณเอง คุณสามารถค้นหารหัสสีในแบบฟอร์มนี้ในโปรแกรมกราฟิกต่างๆ (เช่น ใน Photoshop) หรือค้นหาจานสีบนเว็บ

ขั้นตอนที่ 4

ตามค่าเริ่มต้น เบราว์เซอร์จะสร้างลิงก์ที่ขีดเส้นใต้ สามารถยกเลิกได้ด้วยรหัสต่อไปนี้: a {text-decoration: none;}

ในการสร้างลิงก์ตัวหนา ให้ใช้พารามิเตอร์ font-weight: bold; มันถูกแทรกลงในโค้ดสไตล์ในลักษณะเดียวกับสี ขีดเส้นใต้

ขั้นตอนที่ 5

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

ในทำนองเดียวกัน คุณสามารถไฮไลต์ลิงก์ที่เข้าชมแล้ว: a: เข้าชมแล้ว {พารามิเตอร์สไตล์}