Энгийн хэвтээ цэс

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

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

Програм нь олон боломжтойн дээр энгийн, ашиглахад хялбар, файлд ямар нэгэн илүү зүйл оруулдаггүй, програмын ихэнх хэлний бичлэгийн дүрмийг дэмждэг давуу талуудтай. Файл body тегд цэсээ байршуулна. Энэ нь ердийн тэмдэглэгээ бүхий ul элементийн жагсаалт байна.

Мэдээжээр цэсний пункт бүрийг холбоос байдлаар хийх ба энд дамжих URL# тэмдэгтийг тавина. Та энд өөрийн сайтын бодит холбоосын хаягийг оруулан өгөөрэй. Photoshop програмыг ашиглан 3х30 px хэмжээтэй градиент дүүргэлттэй зургийг үүсгэн өгнө. Зургаа bg.gif нэртэй файлд хадгална. Зураг нь манай цэсний дэвсгэр дүрсний үүргийг гүйцэтгэх юм.
Сайт хийж сурахын тулд та Photoshop програмыг боломжийн хэмжээнд ашиглаж чаддаг байх хэрэгтэйн дээр Html, Css хэлийг сайн эзэмшсэн байх хэрэгтэй. Эдгээрийг судалсан байхад статик хуудас үүсгэх боломжтой. Хэрвээ та динамик өөрөөр хэлбэл хуудсыг програм ашиглан үүсгэхийг хүсвэл дээр нь Php, Javascript хэлүүд түүнчлэн өгөгдлийн санг удирдах SQL хэлийг сурах хэрэгтэй болно. Сайт бүтээх өөр олон төрлийн хэл, технологууд байдаг ба эхний ээлжинд сайтад тавигдсан хичээлүүдийг үзэн суурь мэдлэгтэй болбол цааш судлахад дөхөмтэй байна. За ингээд menu.html файл доорх агуулгатай байх юм.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Энгийн хэвтээ цэс</title>
<meta name="copyright" content="" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!-- цэсний эхлэл -->
<ul>
  <li><a href="#">Нүүр</a></li>
  <li><a href="#">Мэдээ</a></li>
  <li><a href="#">Бүтээгдхүүн</a></li>
  <li><a href="#">Үйлчилгээ</a></li>
  <li><a href="#">Загварууд</a></li>
  <li><a href="#">Холбоо</a></li>
</ul>
<!-- цэсний төгсгөл -->
</body>
</html>

Сайтын Html -ийн хичээлүүдийг үзсэн бол энд тайлбар хийгээд байх зүйл байхгүй. Одоо хуудсыг хэлбэржүүлэх хэвийн файлыг main.css нэрээр тусд нь үүсгэн өгнө. Файлын агуулгыг үзүүлбэл.

ul {
    margin:0; /*алслалтыг тэглэх*/
    padding:0; /*дотоод алслалтыг тэглэх*/
    float:left; /*жагсаалтыг зүүн талд тэнцүүлэх*/
    width:auto;/*жагсаалтын агуулга, төрлийг үндэслэн өргөнг авто гэж өгөх*/
    background-image: url(bg.gif); /*дэвсгэр зургийг өгөх*/
    background-repeat:repeat-x; /*зургийг хэвтээ чиглэлд давтах*/
    list-style:none; /*жагсаалтыг тэмдэглэгээгүй болгох*/
    background-color:#4778c3; /*зураг доорх дэвсгэрийн өнгийг өгөх*/
    font-size:13px; /*фонтын хэмжээг өгөх*/
    font-family:Arial, Helvetica, sans-serif; /*фонтын нэрийг өгөх*/
}

ul li {
       float:left; /*жагсаалтын элеметүүдийг зүүн талд тэнцүүлэх*/
       }

ul a {
      display:block; /*цэсний холбоосуудыг блокийн элементүүд болгох*/
      width:100px; /*блокийн өргөний хэмжээг өгөх*/
      height:30px; /*блокийн өндөрийг өгөх*/
      text-align:center; /*бичгийг төвд байршуулах*/
      line-height: 2.1em; /*иөр хоорондын засвар*/
      text-decoration:none; /*холбоосоос доогуур зураасыг арилгах*/
      color:#fff; /*холбоосын текстийн өнгө - цагаан*/
      border-right:#fff solid 1px; /*блокийн баруун талын хил (1px цагаан зураас)*/
}

ul a:hover {
            color:#ccc; /*хулганы заагч дээр нь ирэхэд холбоосын өнгө солигдох*/
            }

Хэвийн файлын агуулгын тайлбарт шинжүүдийг дэлгэрэнгүй тайлбарласан болохоор энд асуудал үүсэхгүй гэж бодож байна. Цэсний ажиллагааг энэ файлд бичигдсэн шинжүүдээр зохицуулж байгаа учраас main.css файлын гүйцэтгэж байгаа үүргийг сайн ойлгон авах хэрэгтэй. Эцэст нь хэвийн файлаа menu.html файлтай холбон өгөхөө мартаж болохгүй.  

<link rel="stylesheet" href="main.css" type="text/css">

Ингээд боллоо. Үр дүнд нь бид орчин үеийн бүх хөтөч дээр ижилхэн харагдах бүрэн хэмжээний хөтөч хоорондын зөрчилгүй хэвтээ цэсийг гарган авлаа. Цэсний ажиллагаа IE 5.5 , IE 6.0 хөтөчүүд дээр буруу ажиллаж магадгүй. Гэхдээ одоо эдгээр хөтөчийг хэрэглэдэг хэрэглэгч бараг байхгүй болсон байх. Цэсний бүх элементүүдийг 100 px өргөнтэй 30px өндөртэй блок байдлаар үзүүлнэ. Цэсүүдийг блокоор үзүүлж байгаа болохоор бие биенээс нь тусгаарлахдаа блокийн баруун хүрээг 1px өргөнтэй цагаан өнгөөр тавин өгч байгаа. Энэ бол хэвтээ цэсүүдийг үзүүлэх хамгийн энгийн болоод сайн арга. Та хүсвэл үүнийг css шинжүүд, нэмэлт график элементүүдийг ашиглан илүү гоё, функционал сайтай болгох боломжтой. За ингээд бидний хийсэн хэвтээ цэс

гэж харагдах болно. Хичээлийг сайн уншин ойлгоод өөрөө хийж үзээрэй. Кодыг өөрөө бичвэл илүү үр дүнтэй байдагийг би байнга сануулж байгаа. Гэхдээ танд цаг зав бага эсхүл өөрөө бичмээргүй байвал файлыг татаад аваарай.

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

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

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

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

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

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

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

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

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

Элементүүд блок болон мөр төрлийнх гэж байдгийг бид мэднэ. Элемент бүр нь анхдагч байдлаар өөрийн төрөлтэй байдаг. Жишээ нь div ба p элементүүд блокийн төрөлтэй байдаг бол span ба a элементүүд мөр төрлийнх байх жишээтэй. Хааяа энэ анхдагч төрлийг өөрчлөх хэрэг гардаг бөгөөд үүнийг display шинжийг ашиглан хийнэ. Шинж нь боломжит дөрвөн утгуудаас аль нэгийг авч болно. Бүх дөрвөн утгыг жишээн дээр авч үзье.  

display:block

Энэ утга нь элементийг блок төрлийнх болгодог. Бидэнд босоо цэс хийх хэрэгтэй боллоо гэж үзье. Үүний тулд html хуудас дээрээ дараах кодыг бичин өгье.

<html>
<head>
<title>css display</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="menu">
<a href="index.html">Нүүр</a>
<a href="about_us.html">Бидний тухай</a>
<a href="contact.html">Холбоо барих</a>
</div>
</body>
</html>

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Арифметик прогрессын ялгавар тэгтэй тэнцүү биш. Энэхүү прогрессын 1-р гишүүнийг 2-р гишүүнээр, 2-р гишүүнийг 3-р гишүүнээр, 3-р гишүүнийг 1-р гишүүнээр үржүүлэхэд гарах тоонууд өгөгдсөн дарааллаар геометрийн прогресс үүсгэдэг бол геометр прогессын хуваарийг ол.

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

 

Бөмбөрцөгт багтсан зөв дөрвөн өнцөгт пирамидийн суурь нь бөмбөрцөгийн төвийг дайрч байв. Пирамидийн эзэлхүүн 18-тай тэнцүү бол бөмбөрцөгийн радиусийг ол.

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

 

Зөв зургаан өнцөгт пирамидийн апофем h -тэй тэнцүү бөгөөд сууртай үүсгэх хоёр талст өнцөг 600 градус бол пирамидийн бүтэн гадаргуун талбайг ол.

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