Хэрхэн сайхан холбоос хийх вэ

Агуулгын хүснэгт:

Хэрхэн сайхан холбоос хийх вэ
Хэрхэн сайхан холбоос хийх вэ

Видео: Хэрхэн сайхан холбоос хийх вэ

Видео: Хэрхэн сайхан холбоос хийх вэ
Видео: Хэрхэн жирэмслэхгүйгээр хийх вэ? 2024, Дөрөвдүгээр сар
Anonim

Холбоосууд нь вэб хуудасны харагдах байдалд ихээхэн нөлөөлдөг. Энэ нь таны вэбсайт эсвэл блог эсэхээс үл хамааран маш сайн тохируулсан холбоосууд нь таны вэбсайтын дизайныг илүү сайн өөрчлөх болно. HTML, CSS-ийн талаар мэдлэггүй байсан ч гэсэн сайхан холбоос хийх нь маш хялбар байдаг.

Хэрхэн сайхан холбоос хийх вэ
Хэрхэн сайхан холбоос хийх вэ

Зааварчилгаа

1-р алхам

Юуны өмнө ердийн холбоосыг бий болгоё. Үүнийг дараах кодыг ашиглан гүйцэтгэнэ. холбоосын нэр. Энэ кодонд хаяг нь холбоос юм. Түүний "href" шинж чанар нь холбоосыг хөтөлж буй хуудасны хаягийг заана. "Холбоос гарчиг" -ын оронд холбоосыг илэрхийлэх үг эсвэл өгүүлбэр бич

Та мөн холбоос дээр дарахад гарч ирэх текстийг нэмж болно. Шошгоны "гарчиг" шинж чанар нь танд туслах болно.

Алхам 2

Одоо холбож үзье. Үүнийг хийх хамгийн хялбар арга бол каскадны загварын хуудас (css) юм. Өөрийн сайтын хэв маягийг агуулсан файлыг нээгээд өөр код бичнэ үү. Үүнээс гадна html хуудсанд стилийг шууд оруулах боломжтой. Үүнийг хийхийн тулд сайтын хэв маягийг өөрчлөх кодыг ашиглана уу.

Алхам 3

Дизайн руугаа орцгооё. Оруулгын синтакс нь {загварын параметрүүд} байх болно. Би энд юу бичих ёстой вэ?

Нэгдүгээрт, холбоосуудын өнгийг өөрийн үзэмжээр өөрчил. Энэ код танд дараахь зүйлд тусална.

а {өнгө: # 00000;}. Мэдээжийн хэрэг, "# 00000" -ын оронд та өөрийн өнгөийг оруулах хэрэгтэй. Та өнгөт кодыг энэ хэлбэрээр янз бүрийн график програмуудаас олж мэдэх боломжтой (жишээлбэл, Photoshop дээр) эсвэл вэб палитрыг олох боломжтой.

Алхам 4

Анхдагч байдлаар, хөтөч нь холбоосыг доогуур нь зурдаг. Үүнийг дараах кодоор цуцлах боломжтой: a {text-decor: none;}

Тод холбоос үүсгэхийн тулд font-weight: bold; параметрийг ашиглана уу. Энэ нь хэв маягийн кодонд өнгө, доогуур зурахтай ижил аргаар оруулагдсан болно.

Алхам 5

Зарим сайт дээр холбоосоор гүйхэд гаднах төрх нь өөрчлөгдөж байгааг та анзаарсан байх. Та үүнийг бас хийж чадна. Үүнтэй төстэй код танд туслах болно: a: hover {загварын параметрүүд}. Параметрүүдийг ердийн холбоосын нэгэн адил зааж өгсөн бөгөөд цорын ганц утга нь "hover" псевдо анги бөгөөд холбоос дээгүүр зөөхдөө эдгээр тохиргоог хийх ёстойг хөтөчдөө мэдэгддэг.

Үүний нэгэн адил та зочилсон холбоосуудыг тодруулж болно: a: зочилсон {загварын параметрүүд}

Зөвлөмж болгож буй: