Вэб хуудасны зүүн талд зураг байршуулахын тулд CSS ашиглах
Өнөөдөр бараг бүх вэбсайтыг хараад та тэдгээр хуудсын ихэнх хэсгийг бүрдүүлэх текст, зургийг хослуулан харах болно. Энэ хуудсанд текст болон зургийг нэмэх нь маш хялбар байдаг. Текстийг догол мөр, жагсаалт, гарчиг гэх мэт стандарт HTML таг ашиглан кодчилогддог бол зургууд нь элементийг ашиглан оруулсан болно.
Энэ текст болон тэдгээр зургуудыг бүтээх чадвар нь хоорондоо маш сайн вэб дизайнеруудыг ялгадаг юм! Та зөвхөн текст болон зургуудыг нэг нэгээр нь харуулахыг хүсэхгүй байгаа бөгөөд энэ нь эдгээр блок түвшний элементүүд анхдагч байдлаар хэрхэн байршлыг хэрхэн байрлуулахыг хүсдэг. Үгүй ээ, та текст болон зургууд эцэст нь таны вебсайтын визуал дизайны хэлбэрээр хэрхэн урсаж өнгөрөхийг хянахыг хүсч байна.
Энэ хуудасны зүүн талд байрлах зурагтай байх нь хуудасны текстийг урсаж байх үед хэвлэгдэх дизайны ерөнхий дизайн, мөн вэб хуудсын хувьд хэвшмэл дизайн юм. Вэбсайт дээр энэ нөлөө нь зургийг хөвж байдаг. Энэ хэв маяг нь "float" -д зориулсан CSS шинж чанараар хангагдсан байдаг. Энэ шинж чанар нь текстийг баруун тийшээ дүрсэн зургийг баруун тийш нь урсгах боломжийг олгодог. (Эсвэл зүүн талдаа баруун тийшээ зурсан зургийг тойрсон зураг). Энэ үзүүлэнгийн үр дүнд хэрхэн хүрэхийг үзье.
HTML-ээр эхэлнэ үү
Хамгийн эхний хийх зүйл бол HTML ажиллах болно. Бидний жишээн дээр бид текстийн догол мөрийг бичиж догол мөрний эхэнд дүрс оруулах (текстийн өмнө, гэхдээ
тагны дараа). Энд HTML тэмдэглэгээ иймэрхүү байна:
Анхдагч байдлаар, вэбсайт нь текст дээрх зурагтай харуулах болно. Учир нь зургууд нь HTML-д block-level элементүүд байдаг. Энэ нь браузер анхдагчаар дүрсийн элементийн өмнө болон дараа таслагдана гэсэн үг юм. Бид CSS-г асаах замаар энэхүү үндсэн харагдах байдлыг өөрчлөх болно. Эхлээд бид өөрсдийн зургийн элементэд ангийн утгыг нэмэх болно. Энэ анги дараа нь CSS дээр бид ашиглах болно "дэгээ" гэж ажиллах болно.
"Зүүн" энэ анги өөрөө юу ч биш! Бидний хүссэн хэв маягийг бүтээхэд бид дараагийн CSS ашиглах хэрэгтэй.
CSS Styles
Бидний HTML байршлаар, манай ангид "зүүн" гэсэн шинж чанарыг агуулсан CSS CSS-руу хандах боломжтой. Бид зургийн загварыг дүрсэлж, түүнтэй дүйх хажуу тал дээр нэмж байрлуулах дүрмийг нэмэх болно. Ингэснээр текстийг тойрсон зураг текстийг ойртуулахгүй байх болно. Энд CSS бичиж болно:
.left {float: left; padding: 0 20px 20px 0; }Энэ хэв маяг нь зураг дээр зүүн талд байрлана . Зургийн баруун ба доод талд бяцхан жааз (зарим CSS тэмдэгтийг ашиглана) нэмнэ.
Хэрэв та энэ HTML-ыг вэб хөтөчид агуулж байгаа хуудсыг шалгасан бол одоо дүрсийг зүүн тийш нь холбож, догол мөрийн текст нь тэдгээрийн хоорондын зай хоорондын зайтай баруун тийшээ харагдах болно. Бидний ашигладаг "зүүн" ангиллын утгыг дурын дураар тэмдэглэх хэрэгтэй. "Зүүн" гэсэн нэр томъёо нь өөрөө юу ч хийдэггүй учраас бид түүнийг дуудаж болно. Ингэснээр таны харагдах өөрчлөлтүүдийг зааж өгсөн CSS-ийн хэв маягтай ажилладаг HTML дэх клиентийн шинж чанарыг агуулсан байх ёстой .
Эдгээр загварыг бий болгох өөр арга замууд
Дүрсний элементийг ангийн шинж чанарыг өгч, дараа нь элементийн хөвөгч ерөнхий CSS загварыг ашиглах нь энэ "зүүн талдаа дүрсийг" харуулах нэг арга юм. Мөн та зургийн төрлөөс ангижирч, илүү нарийн тодорхойлогч сонгож CSS-ээр хэвлүүлж болно. Жишээлбэл, тухайн зураг нь "үндсэн контент" гэсэн ангиллын утгыг агуулж байгаа жишээг харцгаая.
Энэ зургийг хэвлүүлэхийн тулд энэ CSS-г бичиж болно:
.main-агуулгын img {float: left; padding: 0 20px 20px 0; }Энэ үед бидний зургийг зүүн талд нь байрлуулж, текстийг өмнө нь шиг хөвж байсан ч бидний тэмдэглэгээнд нэмэлт үнэ цэнийг нэмэх шаардлагагүй болно. Үүнийг хийхдээ масштабтай жижиг файл үүсгэхэд тусалж болох бөгөөд ингэснээр гүйцэтгэлийг сайжруулахад туслах болно.
Эцэст нь хэлэхэд, та хэв маягаа HTML тэмдэглэгтээ шууд оруулж болно:
Энэ аргыг " шугамын загвар " гэж нэрлэдэг. Энэ нь бүтцийн тэмдэглэгээтэй элементийн хэв маягийг хослуулсан учраас үүнийг санал болгодоггүй. Вебийн шилдэг туршлагууд нь хуудасны хэв маяг, бүтцийг тусдаа байлгах ёстойг зааж өгдөг. Таны хуудсанд өөрийн байрлалаа өөрчилж, өөр өөр хэмжээтэй дэлгэц, төхөөрөмжийг хариу вэбсайтаар хайх хэрэгтэй . HTML-тэй уялдаатай хуудасны хэв загвартай байх нь зохиогчийн зөөвөрлөх хүсэлтүүдэд өөр өөр дэлгэцэд шаардлагатай үед таны сайтын харагдах байдлыг өөрчлөхөд илүү төвөгтэй болгодог.
Женнифер Кэрнин эх нийтлэл. 4/3/17 дээр Жереми Герард засварлав.