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

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

Дээд хэсгийг кодчлол

Сануулахад сайтын дээд хэсгийн html код

<div id="status-bar">
    <div id="status-bar-content">
        <form action="#search" method="post" id="search-form">
            <p>
            <input type="text" name="query" value="Хайлт" />
            <input type="submit" name="submit" value="Хайлт!" />
            </p>
        </form>
        <div id="status-bar-commands">
            <p id="welcome">Тавтай морил, Зочин</p>
            <p id="action-bar">
                <a href="#login" title="Login">Нэвтрэх</a>
                <a href="#sitemap" title="Sitemap">Сайтын карт</a>
                <a href="#license" title="License">Лиценз</a>
            </p>
        </div>
    </div>
</div>

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

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

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

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

Өнгө - 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 элементэд хэв өгье.

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

Гадаад хэвийн хүснэгт

Доорх код бүхий ердийн html хуудас үүсгэе.

<html>
<head>
<title>CSS -ийг HTML -д оруулах</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<h1>1-р түвшингийн гарчиг</h1>
Энд энгийн текст
<h2>2-р түвшингийн гарчиг</h2>
Энд энгийн текст
</body>
</html>

Одоо Notepad дээр хоосон файл үүсгээд style.css гэсэн нэрээр html хуудас байрлах хавтаст хадгална. Одоохондоо манай style.css файл хоосон байх бөгөөд бидний хэвүүдийн хуудас болох юм.

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

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

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

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

Удирдах цэс

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

 

Аяга, стакан, ваар, лаазанд сүү, ундаа, квас, ус байжээ. Аяганд ус, сүү байхгүй, ундаатай сав ваар болон квастай савны дунд, лаазанд ундаа, усны аль нь ч байхгүй, стакан лааз ба сүүтэй савтай зэрэгцэн байрласан бол ямар саванд ямар шингэнийг хийсэн бэ.

Жич: Маш сонирхолтой гоё бодлого. Оролдоод үзээрэй.

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

 

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

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