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 хөтөчийг хэрэглэдэг хүмүүс ховор болсон хэдий ч сайт бүхий л хөтөч дээр хэвийн харагдах ёстойг бодолцох хэрэгтэй.

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

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

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

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

Өмнөх хичээлд бид цэсэнд зориулан спрайт хийсэн. Цэсэнд дэвсгэр зураг ашиглахын өмнө түүнийг баруун тийш байрлуулах хэрэгтэй. Бид 4-р хичээлд id="content" блокт position: relative; шинжийг өгсөн. Одоо энэ шинж бидэнд хэрэгтэй болно. Агуулгын блоктой харьцангуй байрлалыг ашиглан бид цэсийг өөрийн хүссэн газар руу хөдөлгөх болно. Өөрөөр хэлбэл агуулгын төв хэсгийн баруун дээд булан руу шилжүүлэх болно. Энд 0, 0 координат бол хөтөчийн цонхны зүүн дээд булан биш харин content блокийн зүүн дээд булан гэснийг илэрхийлнэ.

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

HTML-ийн адилаар CSS нь жагсаалт үүсгэх том боломжуудтай. Жагсаалт үүсгэх үндсэн гурван шинж бий. Үүнд:

  • list-style-type - дугаарлагч болон тэмдэглэгчийн гадаад хэлбэрийг тодорхойлно
  • list-style-image - тэмдэглэгээ хийх хэрэглэгчийн зургийг тодорхойлно
  • list-style-position - тэмдэглэгч байршлыг блоктой харьцангуй байдлаар тодорхойлно.

Эдгээрийг жишээн дээр авч үзье

list-style-type

Тэмдэглэгээ бүхий жагсаалтын хувьд HTML -д байдаг бүхий л утгуудаас илүү зүйлгүй:

  • disk - будагдсан дугуй.
  • circle - будагдаагүй дугуй.
  • square - будагдсан квадрат.

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

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

илэрхийллийг хялбарчил.

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

 

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

 

prob09_163_01Зурагт өгсөн ABC гурвалжны AN=9, BM=12 байх медианууд перпендикуляр ба O цэгт огтлолцох бол ONCM дөрвөн өнцөгтийн талбайг ол.

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