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Тусгай эрх авах

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

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

Сайтын макетыг фотошоп дээр хийн дараа нь html кодод хэрхэн хөрвүүлэхийг сайтын Photoshop  болон HTML хэл  хэсгүүдээс үзэж танилцсан бол одоо бид сайтын html хуудсыг css ашиглан хэлбэржүүлэхэд суралцах юм. Ингэснээр та өөрөө сайтын загварыг бүрэн гаргаж сурах болно. Хэвийн хүснэгтийг зохиож эхлэхийн өмнө бид блокийн моделийн талаарх зарим зүйлсийг сайн ойлгох хэрэгтэй.

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

Энэ хичээлээр бид блокийн шинжүүдийг хэрхэн өгөх талаар суралцана. Үүнийг бид 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>

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

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

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

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

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

Сайтын удирдах цэсийг хийснээр агуулгын блокийн эхний хэсгийг кодолж дууссан. Одоо бид агуулгын контейнерын хоёрдахь хэсэг болох блог болон твиттерийн хэсэгт орно. Энэ хэсэг бол манай PSD макетын   

хэсэг юм. Html кодод id="page-wrapper" блокийн араас байрлах ба хөтөч дээр блокууд ердийн урсгалаар байрласан байгаа.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

a ба b катеттай тэгш өнцөгт гурвалжин ерөнхий тэгш өнцөгтэй квадратыг багтаасан бол квадратын периметрийг ол.

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

 

функцийн графикийн (0,-1) цэгт татсан шүргэгч шулуун ба координатын тэнхлэгүүдээр хашигдсан мужийн талбайг ол.

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

 

тэнцэтгэл бишийн хамгийн их бүхэл шийдийг ол.

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