Харьцангуй байршуулалт

Блокийг харьцангуй байршуулахдаа 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>

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

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

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

Холбоотой материалууд
margin, padding, border шинжүүд

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

Энэ хичээлээр бид блокийн шинжүүдийг хэрхэн өгөх талаар суралцана. Үүнийг бид div ба span элементүүдийн жишээн дээр хийх болно. div - бол бусад элементүүдийнхээ контейнер элемент юм. div элемент бусад хэсгээс хэсгийн зайгаар тусгаарлагддаг. Харин div -ээс ялгаатай нь span нь мөрийн блок үүсгэдэг.  
Жишээн дээр авч үзье. Доорх код бүхий 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="first">Энэ бол id="first" тодорхойлогчтой div тегийн текст.</div>
    <div id="second">
        <div id="third">Энэ бол id="third" тодорхойлогчтой div тегийн текст.</div>
        <div id="fourth">Энэ бол id="fourth" тодорхойлогчтой div тегийн текст.</div>
    </div>
</body>
</html>

Хуудсаа хөтөч дээр харцгаая.

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

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

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

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

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

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

Удирдах цэс

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

Үе

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

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

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 
Лямбда

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

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

 
Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

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

KLM суурьтай, KL=1, KK1=d талтай KLL1K1 тэгш өнцөгт хажуу бүхий KLMK1L1M1 призм өгөгджээ. KL_|_KM, LMM1 , KMM1 хавтгайнуудын хоорондын өнцөг 60°, бол утганд призмд түүний бүх талыг шүргэх шаарыг багтааж болно.

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

 
Бодлого 2.035

тоонд хуваахад гарах тооны аравтын бичлэгт "0" цифр хэдэн удаа орох вэ?

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

 
Бодлого 6.022

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

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195