Html хуудсыг хэлбэржүүлэх. Хичээл 9

Энэ хичээлээр бид сайтын CSS кодчлолыг дуусгах болно. Манай сайтын дизайн бараг дуусч байгаа ба бид одоо сайтын хөл хэсгийн хэлбэржүүлэлтийг хийх үлдсэн. Хөл хэсэг зураг болон текстийн хоёр хэсгээс бүрдэнэ. Зургийг гаргахын тулд Footer -> Image бүлэгт ороод background, image үеүүдийг нэгтгээд хуулаад шинэ файлд оруулаад footer-image.jpg нэрээр хадгална. Зургийн хувьд PNG форматаар том хэмжээтэй гарах тул jpg -г сонгоорой. Толгой хэсгийн зургийг гаргасантай адил тул нарийн тайлбар хийхгүй.

div#footer-image {
    background: url('../img/footer-image.jpg') no-repeat #6eb9cc center;
    border-top: 2px groove #ffffff;
    border-bottom:2px ridge #ffffff;
    height:50px;
    width:100%;
}

Хөл хэсгийн footer-image тодорхойлогчтой блокийн хэлбэржүүлэлт толгой хэсгийнхтэй их адилхан. Кодыг тайлбаргүй ойлгосон гэж найдаж байна.
Эцэст нь текстийн хэсэгт өмнө нь үүсгэсэн байсан content-top-shadow.png зургийг дэвсгэр зураг болгон өгөөд өндөр, өргөн, дотоод зайг заан өгнө.

p#footer-text {
    background: url('../img/content-top-shadow.png') repeat-x;
    height: 37px;
    padding-top: 13px;
    width: 100%;
}

За ингээл CSS кодлол дууссан. Одоо манай сайт Firefox дээр доорх байдлаар харагдана.

Хуудас IE 8, Safari 4, Chrome 2, Firefox 3, Opera 9.5 дээш хувилбарууд дээр хэвийн харагдана. Харин IE7 дээр бидний бодсноор харагдахгүй. IE7 дээр олон асуудал гарч болох ч шийдэх боломжтой. Эдгээрийг !important hack эсхүл нөхцөлт хэвийн хүснэгтээр арилгах боломжтой.

IE -ийн алдааг засварлах.

Энд бид нөхцөлт тайлбарыг ашиглана. Нөхцөлт тайлбар гэдэг нь бидний өөрчлөн өгсөн хэвийн хүснэгтийг ашиглахыг IE -д ойлгуулах юм. Бусад хөтөчүүд энэ хэсгийг ердийн тайлбар гэж үзээд орхино. Бид ийм тайлбарын дунд хэвийн гадаад хүснэгт рүү холболтыг оруулан өгөх болно. Тэгэхлээр доорх кодыг сайтын index.html файлын head хэсэгт үндсэн хэвийн файлыг оруулж ирж байгаа мөрийн ард оруулан өгнө.

    <!--[if IE 7]>
    <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/ie7.css" />
    <![endif]-->

Ингэснээр хэрэглэгч сайтыг IE7 ашиглан нээвэл ie7.css нэртэй хэвийн файлыг нэмэн оруулна гэсэн үг. өөр хөтөчүүд үүнийг тайлбар гээ үзээд орхих болно.
Одоо хэвүүдийн хавтас css -д шинээр ie7.css нэртэй файл үүсгэн өгнө.  
Эхлээд төлөвийн мөрний өндрийг засварлая. Энэ хэсгийн өндөр 40 биш 50px тул өндрийг оруулаад дэвсгэрийг доор талд нь бэхлэн өгнө. Код нь

div#status-bar {
    background-position: bottom;
    height: 50px;
}

Цааш IE7 :before болон :after туслах шинжүүдийг дэмждэггүйгээс үүссэх асуудлыг шийднэ. Дэвсгэр зураг эсхүл холбоосын тегид "|" тэмдэгт нэмэхийн оронд холбоосуудын хоорондох зайг их болгоод дараа нь төвлүүлнэ. Бас IE -ийн блок биш обьектуудын шахан байрлалтыг ойлгодоггүйг засварлах хэрэгтэй. Үүнийг шууд байршил өгөөд зүүн алслалтыг өөрчлөн шийднэ.

p#action-bar {
    margin-left: 50px;
    position: absolute;
    text-align: center;
    top: 10px;
}
p#action-bar a {
    margin-right: 5px;
}

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

div#content {
    padding-bottom: 0px;
    padding-top: 75px;
}
ul#tabs {
    top: 10px;
}

Слайдын нэрийг бид харьцангуй байршилтаар хийснээс үүдэн IE нэрийг харуулж чадахгүй байгаа тул шууд байршилтаар өгөөд top болон left шинжүүдийн утгыг өөрчилснөөр шийдвэрлэнэ.

div#slideshow-commands h4 {
    left: 0px;
    position: absolute;
    top: 4px;
}

Сүүлийн асуудал бол IE блогийн хэсгийн агуулга болон гарчигийн хоорондох зайг хоёр дахин их болгож байгаа явдал. Үүнийг бид бусад хөтөчүүд дээр олгож байгаа утгын хагасыг өгснөөр шийдвэрлэнэ.

div.blog-entry blockquote {
    padding-top: 5px;
}

За ингээд манай дизайн IE7 дээр хэвийн харагдах болно. Одоо IE7 хөтөчийг хэрэглэдэг хүмүүс ховор болсон хэдий ч сайт бүхий л хөтөч дээр хэвийн харагдах ёстойг бодолцох хэрэгтэй.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 1786 Төлбөртэй

HTML -ийн бүх элементүүдийг блокийн ба мөрийн гэсэн хоёр төрөлд хувааж болно.
Блокийн элементүүд нь бие даасан өөрийн бүтэц блокийг үүсгэдэг. Эдгээрт H1-H6, P, DIV гэх мэтийн элементүүдийг оруулж болно. Ийм төрлийн элементүүд нь бусад хэсгүүдээс зайгаар тусгаарлагдсан байдаг.
Мөрийн элементүүд нь мөр хэлбэрээр харагдана. Эдгээрт I, B, U, S гэх мэтийн элементүүдийг оруулж болно.
CSS загварт хуудас бол блокуудаас бүтдэг. Хуудасны элементийн модны хэсэг бүр нь бие даасан блокууд байдаг. Ингэхдээ бусдаасаа тусдаа бүтэц бүхий блокууд байж болохоос гадна бусад блокт орших мөрийн блокууд ч байж болдог. Блок нь тэгш өнцөгт хэлбэртэй байна.

  Нээгдсэн тоо: 1911 Төлбөртэй

Сайтын хуудсыг хэлбэржүүлэх цувралын сүүлчийн хичээлээр бид сайтын ажиллагаанд jQuery ба Cufón -ыг хэрхэн ашиглах талаар үзэх болно. Бид сайтын h1, h2, h3, h5 түвшингийн гарчигуудад Myriad Pro гэсэн хэрэглэгчийн компьютерт үйлдлийн системтэй хамт суудаггүй стандарт бус фонтыг ашигласан. Бас сайтад слайдшоуг ажиллуулах хэрэгтэй байгаа. Энэ зорилгоор JavaScript -ыг ашиглах юм. Сайтдаа өөрийн хүссэн дурын фонтыг ашиглаад энэ нь хэрэглэгчийн талд суугдаагүй байсан ч сайтыг зөв харагдуулах боломжтойг үзүүлэх зорилгоор бид Myriad Pro фонтыг гарчигт ашигласан. Хэрэглэгч JavaScript -ыг хаасан байхад сайт бидний тодорхойлсон нөөц фонтоор үзэгдэх юм.

  Нээгдсэн тоо: 1731 Төлбөртэй

HTML -д бид хуудаст элементүүдийг байршуулахдаа хүснэгтийг ашигласан. Хүснэгтийн хувьд ашиглахад хялбар, төрөл бүрийн хөтөч дээр ижилхэн харагддаг гээд давуу талууд байдаг ч их хэмжээтэй, код уншигдах талаасаа хүнд, бүтцийн логик муутай гээд сул талуудтай.
CSS -д элементүүдийг байрлуулахдаа блокийг (div) ашигладаг. Ингэснээр хуудасны код логик сайтай, авсаарсан, өөрчлөлт оруулахад амархан болдог. Хуудсыг блокоор үүсгэх аргын дутагдалтай талууд гэвэл хөтөчүүд яг ижил дэмжин ажилладаггүйд оршино. Иймээс хөтөч программуудад хөрвөх боломжтой кодыг бичих хэрэгтэй болдог. Өөрөөр хэлбэл төрөл бүрийн хөтөч дээр бараг ижилхэн харагдах код гэсэн үг.
За ингээд эхэлье. Бидэнд ийм нэгэн стандарт html хуудас байя гэе.

  Нээгдсэн тоо: 2086 Нийтийн

Өмнөх хичээлд бид дараалалаа багахан зөрчин удирдах цэсний кодлолыг орхин сайтын төв хэсгийн кодлолыг хийсэн. Энэ хичээлээр бид сайтын удирдах цэсний хэсгийн кодлолыг хийх болно.

Удирдах цэс

Удирдах цэсийг хийх нь нилээд хүндэвтэр. Бид нилээд нарийн цэс ашиглана дээр нь цэс баруун талдаа шахан байрлах нь асуудлыг улам хүндрүүлж байгаа. Гэхдээ цэсийг фотошоп дээр хийсэн байгаа болохоор бидэнд бага зэргийн хөнгөн болж ирнэ.

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 65

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 95

 

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

Нээгдсэн тоо : 101

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 124

 

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

Нээгдсэн тоо : 125

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 179

 

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

Нээгдсэн тоо : 119

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 116

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 126

 
Энэ долоо хоногт

Адил хажуут трапецын сууриуд 20 ба 12 см. Трапецыг багтаасан тойргийн төв их суурь дээр байрлах бол трапецын диагналыг ол.

Нээгдсэн тоо : 1169

 

тэгшитгэлийн язгууруудын нийлбэрийг ол.

Нээгдсэн тоо : 1088

 

Зурагт үзүүлсэн хагас тойрогт бол AB -ийн уртыг ол.

Нээгдсэн тоо : 840