Firefox дахь Inspect Element хөгжүүлэгчийн хэрэгсэл нь вэб хуудсан дээрээс харж буй бүх зүйлийнхээ HTML кодыг тодорхойлох боломжийг олгодог. Эдгээр хэрэгслүүдийг нээсний дараа HTML болон дагалдах CSS загварын хүснэгтийг бүрэн засварлах боломжтой болно. Таалагдсан өөрчлөлтүүдээ туршиж үзээд вэб хуудасны хүссэн хэлбэр рүү буцахын тулд хуудсыг сэргээнэ үү.
Алхам
2 -р хэсгийн 1: Элементүүдийг шалгах
Алхам 1. Аливаа вэб хуудасны элемент дээр хулганы баруун товчийг дарна уу
Та зураг, текст, дэвсгэр зураг эсвэл бусад элемент дээр хулганы баруун товчийг дарж болно. Хэрэв танд хоёр товчлууртай хулгана байхгүй бол Control товчлуурыг дарж байхдаа хулганы зүүн товчийг дарна уу.
Алхам 2. Унждаг цэснээс Элементийг шалгах дээр дарна уу
Хэрэгслийн самбар таны цонхны доод талд гарч ирэх ёстой. Мөн самбарын доор хуудасны HTML кодыг харуулсан самбар гарч ирнэ.
Алхам 3. Хэрэгслийн самбар болон самбарыг тодорхойл
Элементийг шалгах товчлуурыг дарахад цонхны доод хэсэгт хэд хэдэн цонх нээгдэнэ. Тэдний хэрэглээ, нэрсийн задаргааг энд харуулав.
- Дээд эгнээ нь Toolbox Toolbar юм. Энэ нь хэд хэдэн хөгжүүлэгч хэрэгслүүдтэй боловч бид зүүн талд байгаа байцаагчийг сонирхож байна. Энэ гарын авлагыг бүхэлд нь сонгож (цэнхэр өнгөөр тодруулсан) хадгална уу.
- Хэрэгслийн самбарын доор HTML элементүүдийн Breadcrumbs гэсэн ганц мөр байдаг бөгөөд сонгосон элементтэй холбоотой замыг харуулдаг.
- Энэ мөрний доорх самбар нь хуудасны HTML мод эсвэл "Тэмдэглэгээний харагдац" -ыг харуулна. Таны сонгосон элементийн HTML -ийг энэ хэсэгт тодруулж, төвд байрлуулсан болно.
- Баруун талын самбар нь энэ хуудасны CSS загварын хүснэгтийг харуулна.
Алхам 4. Өөр элемент сонгоно уу
Хэрэгслийн мөр нээгдсэний дараа өөр элемент сонгоход хялбар болно. Үүнийг хийх гурван аргыг энд оруулав.
- Холбогдох элементийг тодруулахын тулд HTML мөрөн дээр хулганаа дарна уу (Firefox 34+ шаардлагатай). HTML дээр дарж тухайн элементийг сонгоно уу.
- Хэрэгслийн мөрний зүүн талд байрлах Элементийг сонгох хэрэгслийг дарна уу: дүрс нь дөрвөлжин дээрх курсор юм. Элементүүдийг тодруулахын тулд курсороо хуудсан дээр дарж, элементийг сонгохын тулд дарна уу.
Алхам 5. Кодоор дамжина уу
HTML самбарын аль ч хэсэгт дарна уу. Кодыг шилжүүлэхийн тулд гарныхаа зүүн ба баруун сумыг ашиглана уу (Firefox 39+ шаардлагатай). Энэ нь гараар сонгоход хэт жижиг элементүүдэд ашигтай байдаг.
- Саарал HTML нь хуудсан дээр харагдахгүй элементүүдтэй холбоотой. Үүнд CSS дэлгэцийн шинж чанараар нуугдсан тайлбарууд, зарим зангилаа, элементүүд орно.
- Контейнерын агуулгыг өргөжүүлэх эсвэл нуухын тулд зүүн талын сумыг дарна уу. Бүх агуулгыг өргөжүүлэхийн тулд alt="Image" эсвэл сонголтыг дарж байхдаа дарна уу.
Алхам 6. Элемент хайх
Breadcrumbs эгнээний баруун талд байгаа хайлтын мөрийг (томруулдаг шилний дүрс) хайна уу. Үүнийг дарж өргөжүүлэхийн тулд хайж буй HTML кодоо бичнэ үү. Таныг бичиж байх үед тохирох элементүүдийн жагсаалт гарч ирэх болно. Тухайн элементийг сонгохын тулд нэг дээр дарж HTML самбарыг код руу гүйлгэнэ үү.
2 -р хэсгийн 2: HTML засварлах
Алхам 1. Хүссэн үедээ дахин эхлүүлэхийн тулд хуудсыг сэргээнэ үү
Хэрэв та вэб хөгжүүлэгчийн хэрэгслийг шинээр сурч байгаа бол тэдгээр нь байнгын өөрчлөлт хийдэггүй гэдгийг ойлгоорой. Таны засварууд зөвхөн таны дэлгэц дээр харагдах бөгөөд зөвхөн хуудсыг хаах эсвэл шинэчлэх хүртэл л харагдана. Юу болохыг мэдэхгүй байгаа ч гэсэн туршилт хийхээс бүү эргэлзээрэй.
Алхам 2. Текстийг засварлахын тулд HTML дээр хоёр дарна уу
HTML мөрийг хоёр удаа дарна уу. Шинэ текстээ оруулаад өөрчлөлтөө хадгалахын тулд enter дарна уу.
Алхам 3. Breadcrumb дээр дарж илүү олон сонголтыг үзнэ үү
Breadcrumb toolbar нь бүрэн HTML мод болон дээд багажны хооронд хавчуулагдсан болохыг санаарай. Өргөн цар хүрээтэй цэсийг нээхийн тулд энэ эгнээний аль ч элемент дээр дараад барина уу. Эдгээр сонголтуудын бүрэн бус гарын авлага энд байна:
- "HTML хэлбэрээр засварлах" нь зангилаа болон түүний бүх агуулгыг мөр бүрийг тус тусад нь засварлахын оронд HTML модонд засах боломжтой болгодог.
- "Дотоод HTML -ийг хуулах" нь зангилааны бүх агуулгыг хуулбарладаг бол "Гадаад HTML -ийг хуулах" нь зангилааг мөн хуулдаг (жишээ нь, эсвэл
- "Буулгах →" нь энэ зангилааны өмнө эсвэл зангилааны эхний хүүхдийн дараа хаана байрлуулах талаар хэд хэдэн сонголтыг бий болгодог.
- : hover,: active, and: focus нь хэрэглэгч түүнтэй харилцах үед түүний гадаад төрхийг өөрчилдөг. Яг үр нөлөөг CSS загварын хүснэгтээр тодорхойлдог (баруун талын самбараас засах боломжтой).
Алхам 4. Зөөж унага
Кодын элементүүдийг дахин цэгцлэхийн тулд HTML дээр тасархай шугам гарч ирэх хүртэл дарна уу. Үүнийг модон дээр дээш эсвэл доош нь хөдөлгөж, тасархай шугам нь хүссэн газарт байх үед суллана.
Энэ нь Firefox 39 эсвэл түүнээс хойших хувилбарыг шаарддаг
Алхам 5. Хөгжүүлэгчийн хэрэгслийн самбарыг хаах
Эдгээр бүх сонирхолтой цонхыг хаахын тулд CSS самбарын дээд хэсэгт байрлах toolbar -ийн баруун буланд байрлах X товчийг дарахад л хангалттай.
Зөвлөмж
- Та мөн дээд цэсийн сонголтуудын тусламжтайгаар багаж самбарыг нээж болно.
- Windows: Firefox → Вэб хөгжүүлэгч → Багаж хэрэгслийг асаах
- Mac эсвэл Linux: Хэрэгслүүд → Вэб хөгжүүлэгч → Багаж хэрэгслийг асаах
- Firefox 40 нь HTML засварлахад илүү их зай гаргахын тулд CSS самбарыг нуух сонголтыг нэвтрүүлсэн. Breadcrumbs мөрийн баруун талд, хайлтын талбарын баруун талд байгаа сумны дүрсийг хайна уу. CSS самбарыг нуухын тулд энэ дүрс дээр дарж, дахин дарж дахин өргөжүүлнэ үү.
- CSS самбарыг бас засварлах боломжтой боловч энэ нь энэ гарын авлагын хамрах хүрээнээс гадуур юм. Энэ нийтлэлд CSS -ийн үндсийг заадаг.
