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

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

Холбоотой материалууд
CSS -ийг HTML -д оруулах

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

font шинж

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

CSS -д фонтын параметрүүдийг өгөхдөө font шинжийг ашигладаг.

Font-family

Шинж нь фонтын багцуудыг өгдөг. Бүх фонтуудыг ерөнхийд нь хэдэн бүлэгт хувааж болдог:

  • Serif - үсгүүдийн төгсгөлд жижигхэн элемент (зураас) оруулсан фонтууд, жишээ нь, Times New Roman.
  • Sans-serif - үсгүүдийн төгсгөлд жижигхэн элемент (зураас) оруулаагүй фонтууд, жишээ нь, Arial.
  • Monospace - бүх тэмдэгтүүд нь ижилхэн өргөнтэй фонтууд, жишээ нь, Courier New.
  • Cursive - гар бичмэл хэлбэрийн фонтууд, жишээ нь, Calisto MT.
  • Fantasy - гоёлын фонтууд, жишээ нь, Torhok.

Фонтуудын бүлгүүдийн жишээ:

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

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

Сайтын html, css кодыг бичихдээ бид дээрээс доош дарааллах зарчмыг баримталж байсан бол энэ удаа дүрмээсээ бага зэрэг хазайн цэсний хэсгээс өмнө сайтын төв хэсгийг кодлох болно. Энэ хэсэг бол манай PSD макет дээр доорх зурагт үзүүлсэн хэсэг.

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

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

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

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 2.035

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

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

 
Бодлого 6.022

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

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