Толгойн хэсэг.
Хичээлээ сайтын толгойн хэсгийг кодлохоос эхлэе. Толгойн хэсэг хамгийн энгийн амархан хэсэг гэдгийг index.html хэсгийн кодоос ч тэр PSD макетаас ч харсан тодорхой. Кодын хэсгийг харуулбал.
<div id="header">
<div id="logo">
<h1><a href="#home" title="Home Page">E-surgalt.com</a></h1>
<h2>ONLINE LEARNING</h2>
</div>
</div>Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 1887 Төлбөртэй
CSS -ийг пратикт ашиглах жишээ болгоод үндсэн цэсийг сонгоход дэд цэс нь хөдөлгөөнт байдлаар нээгдэх босоо цэсийг CSS ашиглан хэрхэн хийхийг авч үзье. Бүх зүйл нэг түвшинтэй дараалалгүй жагсаалтыг агуулсан энгийн html код болон CSS хэвийн файл, дөрвөн зургаас бүрдсэн хангалттай амархан хийгдсэн болно. Цэс зурагт үзүүлсэн байдлаар харагдана.
Нээгдсэн тоо: 1410 Бүртгүүлэх
Хэвийн үндсэн хүснэгт
Бид reset.css файлыг зохиох үед түүнийг html файлд холбоос ашиглан шууд оруулахгүй сайтын хэвийн үндсэн хүснэгтээс түүнийг дуудах талаар дурдсан. Мэдээжээр та хүсвэл бүх CSS файлуудыг HTML кодоос холбоос үүсгэн оруулан ирж болно. Гэхдээ би кодын дээд хэсгийг цэвэрхэн байлгах үүднээс үүнийг хийхгүйгээр шийдсэн байгаа.
Одоо бид хэвийн үндсэн хүснэгтээ үүсгэх хэрэгтэй. Би голдуу үндсэн хүснэгтийг style.css гэж нэрлэдэг. Харин та түүнийг main.css, master.css, screen.css гэх мэтээр яаж ч нэрлэж болно. Хэвийн үндсэн хүснэгтэнд бид манай reset болон тесктийг хэлбэржүүлэх typography файлуудыг оруулан ирнэ. Үүнийг бид @import дүрмийг ашиглан оруулах юм.
Нээгдсэн тоо: 2121 Төлбөртэй
Бид өмнөх хичээлээр сайтын дээд хэсэгт хэрэгтэй зургуудыг 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>Нээгдсэн тоо: 2408 Бүртгүүлэх
Өнгө - 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 элементэд хэв өгье.
Суурийн радиус нь 4 см байх шулуун дугуй цилиндрийн нэг үзүүрээс зурагт үзүүлснээр хавтгайгаар огтлоход хамгийн урт байгуулагч нь 15 см, хамгийн богино байгуулагч нь 9 см болсон бол үүссэн биетийн эзэлхүүнийг ол.
Нээгдсэн тоо : 2926
тэнцэтгэл бишийг бод.