Толгойн хэсэг.
Хичээлээ сайтын толгойн хэсгийг кодлохоос эхлэе. Толгойн хэсэг хамгийн энгийн амархан хэсэг гэдгийг index.html хэсгийн кодоос ч тэр PSD макетаас ч харсан тодорхой. Кодын хэсгийг харуулбал.
<div id="header">
<div id="logo">
<h1><a href="#home" title="Home Page">E-surgalt.com</a></h1>
<h2>ONLINE LEARNING</h2>
</div>
</div>Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 2462 Төлбөртэй
Сайтын удирдах цэсийг хийснээр агуулгын блокийн эхний хэсгийг кодолж дууссан. Одоо бид агуулгын контейнерын хоёрдахь хэсэг болох блог болон твиттерийн хэсэгт орно. Энэ хэсэг бол манай PSD макетын
хэсэг юм. Html кодод id="page-wrapper" блокийн араас байрлах ба хөтөч дээр блокууд ердийн урсгалаар байрласан байгаа.
Нээгдсэн тоо: 1688 Төлбөртэй
Өмнөх хичээлд бид цэсэнд зориулан спрайт хийсэн. Цэсэнд дэвсгэр зураг ашиглахын өмнө түүнийг баруун тийш байрлуулах хэрэгтэй. Бид 4-р хичээлд id="content" блокт position: relative; шинжийг өгсөн. Одоо энэ шинж бидэнд хэрэгтэй болно. Агуулгын блоктой харьцангуй байрлалыг ашиглан бид цэсийг өөрийн хүссэн газар руу хөдөлгөх болно. Өөрөөр хэлбэл агуулгын төв хэсгийн баруун дээд булан руу шилжүүлэх болно. Энд 0, 0 координат бол хөтөчийн цонхны зүүн дээд булан биш харин content блокийн зүүн дээд булан гэснийг илэрхийлнэ.
Нээгдсэн тоо: 1556 Төлбөртэй
Блокийг харьцангуй байршуулахдаа position:relative шинжийг өгөөд шилжилтийн шинжүүдийг өгөх хэрэгтэй. Энэ тохиолдолд шилжилт "эцэг" элементээс харьцангуй байдлаар бус (шууд байршуулалтынх шиг биш) харин хэвийн урсгалаар тухайн блоктой харьцангуй байдлаар хийгдэнэ. Үүнийг жишээн дээр авч үзвэл тодорхой болно. Бидэнд гурван блок (div) бүхий html хуудас байна гэж үзье.
<html>
<head>
<title>Харьцангуй байршуулалт</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="blok1">Блок 1</div>
<div id="blok2">Блок 2</div>
<div id="blok3">Блок 3</div>
</body>
</html>
Хэвийн хүснэгтэд эдгээр блокуудын хил, хэмжээг өгцгөөе.
Нээгдсэн тоо: 1960 Төлбөртэй
CSS -ийг пратикт ашиглах жишээ болгоод үндсэн цэсийг сонгоход дэд цэс нь хөдөлгөөнт байдлаар нээгдэх босоо цэсийг CSS ашиглан хэрхэн хийхийг авч үзье. Бүх зүйл нэг түвшинтэй дараалалгүй жагсаалтыг агуулсан энгийн html код болон CSS хэвийн файл, дөрвөн зургаас бүрдсэн хангалттай амархан хийгдсэн болно. Цэс зурагт үзүүлсэн байдлаар харагдана.
тэгшитгэлийг бод.