Зохиогчоос:Сайн уу. Хэрэгслийн зөвлөмж гэдэг нь тухайн элемент, ихэвчлэн зураг дээр хулганыг аваачихад гарч ирэх жижиг тайлбар бичвэр юм. Өнөөдөр бид HTML хэл дээр хэрхэн янз бүрийн аргаар зааварчилгаа хийх талаар авч үзэх болно.

Стандарт зөвлөмж

Анхдагч байдлаар гарчгийн шинж чанар нь тайлбар текстийг харуулах үүрэгтэй. Энэ нь янз бүрийн элементүүдэд ашиглагдаж болох боловч ихэвчлэн зөвхөн юу харуулж байгааг тайлбарлах зурганд ашиглагддаг.

Өмнөх нийтлэлүүдийн нэгэнд би барын зургийг ашиглан зургийн хэмжээстэй ажиллахыг харуулсан. Хэрэв та дургүйцэхгүй бол би энэ зургийг дахин ашиглах болно. Тиймээс, зөвлөмжийг харуулахын тулд та гарчгийн шинж чанарыг нэмж, хүссэн текстээ бичих хэрэгтэй.

< img src = "tiger.jpg" title = "Энэ бол бар" >

Нэг үг эсвэл хэд хэдэн өгүүлбэр байж болно. Мөн энэ нь иймэрхүү харагдаж байна:

Зөвлөмж нь зөөвөрлөсөн даруйд биш, хэсэг хугацааны дараа жигд гарч ирдэг. Энэ бол анхдагч зан төлөв юм.

Ийм зөвлөмжийн гол асуудал бол түүнийг загварчлах боломжгүй юм. Энэ асуудлыг хэрхэн шийдвэрлэх вэ? Бид өөр арга замаар зөвлөгөө өгөх хэрэгтэй болно. Одоо би чамд хосуудыг үзүүлье.

Цэвэр css арга

Зургийн зөвлөмжийг сайхан харуулах боломжийг олгодог маш сонирхолтой арга. HTML тэмдэглэгээ нь энгийн бөгөөд зөвхөн зургийг блок саванд хийх шаардлагатай бөгөөд бид тодорхойлогчийг зааж өгөх бөгөөд ингэснээр бид дараа нь хэв маягт хандах боломжтой болно.

< div id = "tiger" data - name = "Суматра бар"> < img src = "tiger.jpg" > < / div >

Энд танд ойлгомжгүй байж болох цорын ганц зүйл бол өгөгдлийн нэрийн шинж чанар юм. Гол нь энэ нь өгөгдлийн шинж чанар гэж нэрлэгддэг бөгөөд дангаараа юу ч хийдэггүй, гэхдээ түүний утгыг css болон javascript-д ашиглах боломжтой байдаг нь зарим тохиолдолд үүнийг ашигтай болгодог. Та үүнийг дараа нь харах болно.

Тиймээс эхлээд савны хэв маягийг тайлбарлая. Бидэнд харьцангуй байрлал хэрэгтэй, учир нь бид блокыг бүхэлд нь биш, харин эх блоктой харьцуулан байрлуулахын тулд тайлбар текст бүхий блокыг бүрэн байрлуулах болно.

#tiger(байрлал: харьцангуй; дэлгэц: inline-block; )

#бар( албан тушаал: харьцангуй; дэлгэц: inline - блок;

Блок шугамын дэлгэц нь блокийг (мөн үүнтэй хамт бидний үүсгэх хэрэгслийн зөвлөмж бүхий блок) цонхны бүхэл бүтэн өргөнөөр сунгахаас сэргийлнэ. Санамжийг өөрөө бий болгох л үлдлээ. CSS дээр псевдо элементүүдийг ашиглан үүнийг хийхэд маш тохиромжтой. Үүн шиг:

#tiger:hover: дараа (агуулга: attr(өгөгдлийн нэр); байрлал: үнэмлэхүй; зүүн: 0; доод: 0; дэвсгэр: rgba(5,13,156,.55); өнгө: #fff; текстийг зэрэгцүүлэх: төв ; font-family: курсив; үсгийн хэмжээ: 14px; дэвсгэр: 3px 0; өргөн: 100%; )

#tiger:hover:дараа ( агуулга: attr (өгөгдөл - нэр); байрлал: үнэмлэхүй; зүүн: 0; доод: 0; дэвсгэр: rgba(5, 13, 156, . 55); өнгө: #fff; текст - зэрэгцүүлэх: төв; фонт - гэр бүл: курсив; үсгийн хэмжээ: 14px; дүүргэх: 3px 0; өргөн: 100%;

Маш олон код байдаг, гэхдээ энд төвөгтэй зүйл байхгүй. #tiger:hover:after сонгогч нь дараах утгыг илэрхийлнэ: бид зурагтай блок дээр гүйлгэх үед дараа нь псевдо-элемент үүсгэх хэрэгтэй (дараа нь дүрмийг буржгар хаалтанд жагсаасан). Агуулга: attr(өгөгдлийн нэр) шинж чанар нь блокийн текстийн утгыг тохируулдаг. Энэ нь зургийн боодлын блокийн data-name шинж чанарт бичигдсэнтэй тэнцүү байх болно.

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

Арга 2. Цэвэр css, толигор харагдах байдал

Гэсэн хэдий ч, кодыг бага зэрэг дахин бичсэнээр та javascript ашиглахгүйгээр хэрэгслийн зөвлөмжийг жигд болгож чадна.

Дараа нь танд үзүүлэх 2 эффектийг харахын тулд Notepad эсвэл ямар нэгэн тохиромжтой код засварлагчийг нээж, миний араас бүгдийг давтахыг зөвлөж байна. Үнэн үү, үүний тулд та загварын файлыг оруулах шаардлагатай хэвээр байгаа ч хэв маягийг html дээр шошгон дээр бичиж болно

Зарим дэлгэц уншигч эдгээр шинж чанарыг үл тоомсорлодог тул дэлгэцийн: байхгүй эсвэл харагдах байдал: далдлагдсан гэхээсээ илүү зүүн талын зүүн талын сөрөг шинж чанарыг ашиглан зааварчилгааны контентыг харагдуулахаас устгасан.

Зөвлөмжүүдэд зориулсан CSS загварууд

Бид удахгүй зааварчилгааг өөр өөр хөтчүүд дээр адилхан ажиллуулах болно. Одоо хэд хэдэн мөр CSS код нэмье.

Дараах кодыг нэмснээр бид дэлгэцэн дээр хэрэгслийн зөвлөмжийг харуулах болно, гэхдээ тэдгээр нь энгийн мэт харагдах бөгөөд бусад текстээс нүдээр харахад хэцүү байх болно.

Хэрэгслийн зөвлөмжийг харуулах CSS

.tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; байрлал: үнэмлэхүй; зүүн: 1em; дээд: 2em; z-индекс: 99; зүүн талын зай: 0; өргөн: 250px; ) . tooltip:hover img ( хил: 0; зах: -10px 0 0 -55px; хөвөх: зүүн; байрлал: үнэмлэхүй; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif; font-size : 1.2em; үсгийн жин: тод; дэлгэц: блок; дэвсгэр: 0.2em 0 0.6em 0; ) .classic (pading: 0.8em 1em; ) .custom (pading: 0.5em 0.8em 0.8em 2em; ) *html a: гүйлгэх (арын дэвсгэр: ил тод; )

*html мөр хэрэгтэй

Дээрх кодын сүүлийн мөр яагаад орсон бол гэж та гайхаж байгаа байх? Энэ нь холбоосын дэвсгэрийн ил тод байдлыг тохируулдаг. Хэрэгслийн зөвлөмжийг турших явцад би IE6 дээр холбоосын дэвсгэр байгаа үед арилгах боломжгүй хачирхалтай эффектийг олж мэдсэн!

Дээрх код нь зөвлөмжийн функцийг баталгаажуулдаг. Тэдгээрийг дэлгэцэн дээр харуулсан боловч ерөнхий текстээс салгахад нэлээд хэцүү байдаг. Хуудасны зөвлөмжийн текстийг онцлох өнгөний схем байхгүй.

Зөвлөмжийн өнгөний схемийг тохируулах/

Дараах код нь зөвлөмжийн таван загвар бүрийн өнгөний схемийг тохируулна.

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

Өнгөний схемд зориулсан CSS код

.classic (арын дэвсгэр: #FFFFAA; хүрээ: 1px хатуу #FFAD33; ) .critical (арын дэвсгэр: #FFCCAA; хүрээ: 1px хатуу #FF3334; ) .help (арын дэвсгэр: #9FDAEE; хүрээ: 1px хатуу #2BB0D7; ) .info (арын дэвсгэр: #9FDAEE; хүрээ: 1px хатуу #2BB0D7; ) .анхааруулах (арын дэвсгэр: #FFFFAA; хүрээ: 1px хатуу #FFAD33; )

CSS код нь маш энгийн, гэхдээ энэ нь зааварчилгааг гайхалтай харагдуулдаг бөгөөд хаа сайгүй үүргээ гүйцэтгэдэг. Өнгөний схемийг өөрийн үзэмжээр өөрчилж болно.

Нарийвчилсан зөвлөмжийг харуулахын тулд CSS3-ийн цөөн хэдэн мэдрэгчтэй

Энэ зааварчилгааг дуусгахын өмнө бид зөвлөгөөндөө визуал эффект нэмэхийн тулд хэдэн мөр CSS3 код нэмнэ. border-radius шинж чанарыг ашиглан бөөрөнхий булангуудыг тогтоож, box-shadow шинж чанарыг ашиглан зарим хэмжээсийг нэмье.

Эдгээр шинж чанаруудын аль нь ч дэлхий даяар дэмжигддэггүй тул тэдгээр нь зөвхөн хамгийн сүүлийн үеийн хөтчийн зарим хувилбарт ажиллах болно. Гэхдээ тэд хаана ажилладаг бол зөвлөмжүүд нь дэгжин, тачаангуй харагдах болно!

Selector.tooltip:hover span дээр доорх кодыг нэмээд хуудсыг дахин сэргээцгээе.

Хил, сүүдэр, ил тод байдлын визуал эффектүүд нь хуудасны текстийн дээрх зөвлөмжийг өргөж, мэдээллийг ялгаатай, уншихад хялбар болгоно.

Зөвхөн албан ёсны CSS3 шинж чанаруудаас гадна Mozilla болон WebKit-ийн өргөтгөлүүдийг ашигладаг болохыг та анзаарсан байх.

Шинэ хөтчүүдэд зориулсан нэмэлт CSS шинж чанарууд

хилийн радиус: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; хайрцаг-сүүдэр: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Дүгнэлт

Энэхүү заавар нь интерфэйсийг сайжруулахад их хүчин чармайлт шаарддаггүйг харуулж байна. Нэмж дурдахад CSS-ийг ашиглах туршлагыг эргэн харах нь зүйтэй бөгөөд энэ нь вэб програмын харилцан үйлчлэлийн шинэ түвшинг тогтооход тустай байж болох юм.