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

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

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

Магадгүй та CSS-ийн тухай сонссон хэдий ч чухам юу гэдэг талаар мэдэхгүй байж болно. Тэгвэл энэ хичээлээр CSS гэж юу болох, юуг хийж чадах талаар үзэх болно. CSS гэдэг нь Cascading Style Sheets үгний товчлол. Та HTML хэлний хичээлүүдээс энэ нь веб хуудсыг хэлбэржүүлэх хэл гэдгийг мэдсэн. Хэлийг зохиогчид сайт үүсгэх ажиллагааг сайжруулахын тулд HTML хэлэнд сайтын гадаад төрхийг хэлбэржүүлэх <font>, <b>, <i>, <bgcolor> гэх мэтийн олон төрлийн элементүүд болон параметрүүдийг нэмсээр ирсэн. Гэтэл энэ нь тодорхой хугацааны дараа сайтын кодыг уншигдах болон хэмжээний талаасаа хэтэрхий нүсэр болгосон нь энэ замаар хол явахгүй гэдгийг ойлгомжтой болгосон. Ингээд хуудасны бүтцийг (HTML) түүний харагдах хэлбэрийг тодорхойлогчоос (CSS) салгах шийдэлд хүрсэн байна. HTML ба CSS -ын хослол гайхамшгийг бүтээдэг гэдэгтэй бид удахгүй танилцах болно.

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

HTML -ийн бүх элементүүдийг блокийн ба мөрийн гэсэн хоёр төрөлд хувааж болно.
Блокийн элементүүд нь бие даасан өөрийн бүтэц блокийг үүсгэдэг. Эдгээрт H1-H6, P, DIV гэх мэтийн элементүүдийг оруулж болно. Ийм төрлийн элементүүд нь бусад хэсгүүдээс зайгаар тусгаарлагдсан байдаг.
Мөрийн элементүүд нь мөр хэлбэрээр харагдана. Эдгээрт I, B, U, S гэх мэтийн элементүүдийг оруулж болно.
CSS загварт хуудас бол блокуудаас бүтдэг. Хуудасны элементийн модны хэсэг бүр нь бие даасан блокууд байдаг. Ингэхдээ бусдаасаа тусдаа бүтэц бүхий блокууд байж болохоос гадна бусад блокт орших мөрийн блокууд ч байж болдог. Блок нь тэгш өнцөгт хэлбэртэй байна.

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

Хэвийн үндсэн хүснэгт

Бид reset.css файлыг зохиох үед түүнийг html файлд холбоос ашиглан шууд оруулахгүй сайтын хэвийн үндсэн хүснэгтээс түүнийг дуудах талаар дурдсан. Мэдээжээр та хүсвэл бүх CSS файлуудыг HTML кодоос холбоос үүсгэн оруулан ирж болно. Гэхдээ би кодын дээд хэсгийг цэвэрхэн байлгах үүднээс үүнийг хийхгүйгээр шийдсэн байгаа.
Одоо бид хэвийн үндсэн хүснэгтээ үүсгэх хэрэгтэй. Би голдуу үндсэн хүснэгтийг style.css гэж нэрлэдэг. Харин та түүнийг main.css, master.css, screen.css гэх мэтээр яаж ч нэрлэж болно. Хэвийн үндсэн хүснэгтэнд бид манай reset болон тесктийг хэлбэржүүлэх typography файлуудыг оруулан ирнэ. Үүнийг бид @import дүрмийг ашиглан оруулах юм.

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

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

Доорх код бүхий ердийн 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 файл хоосон байх бөгөөд бидний хэвүүдийн хуудас болох юм.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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