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 хуудас байя гэе.

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

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

Цэсний нэрүүдийн жагсаалтыг гаргая. Манай цэс "Нүүр", "Мэдээ", "Бүтээгдхүүн", "Үйлчилгээ", "Загварууд", "Холбоо" гэсэн хэсгүүдийг агуулж байна гэж үзье. Эхлээд Dreamweawer эсхүл текст засварлагч Notepad зэрэг програмыг ашиглан menu.html нэртэй файлыг үүсгэнэ. Би ихэнхдээ Notepad++ програмыг ашигладаг.

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

Хэрвээ та ямар нэгэн зургийн программ дээр ажиллаж чаддаг бол энэ ойлголтыг та мэдэх байх. Бусад хүмүүст тайлбарлая. Ямар нэгэн юм бичсэн эсвэл зурсан олон тооны цаасан хуудас байна гээд бодъё. Бид зөвхөн эхний хуудас дээрх агуулгыг л харах болно. Хэрвээ эхний хуудсыг авчихвал дараагийн хуудсны агуулгыг харна гэх мэтээр. Үүний адилаар CSS -д бид хэд хэдэн үе үүсгээд үе бүрдээ хэрэгтэй элементүүдээ байршуулаад тэдгээрийг z-index шинжийн тусламжтайгаар дугаарлан өгч болдог. Үеийн дугаар их байх тусам тухайн үе давхрагад дээгүүр байрлана. Жишээ нь бид 6 үе хийсэн байхад хэрэглэгч эхлээд z-index:6 үеийг харах юм. Үеийг дэлгэгдэх цэсийг хийхэд ихэнхдээ ашигладаг.

  Нээгдсэн тоо: 2270 Бүртгүүлэх

Өнгө - color

Өмнөх хичээлүүдийн туршид бид өнгөний шинжийг ашиглан ирсэн. Шинж нь элементийн доторх текстийн өнгийг өгдөг. Color шинж нь өвлөгддөг. Өвлөгдөх гэдэг нь юу болохыг жишээгээр авч үзье. Бидэнд дараах код бүхий html хуудас байлаа гэе.

<html>
<head>
<title>css color (өнгө)</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Гарчиг</h1>
<p>Хэсгийн текстүүд.</p>
Энд зүгээр текст.
</body>
</html>

body элементэд хэв өгье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

 

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

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