HTML Зохион байгуулалт /Layout/
html-д вэб хуудсыг зохион байгуулдаг үндсэн таван арга байдаг бөгөөд эдгээр нь өөрийн гэсэн давуу болон сул талуудтай байдаг.
- HTML tables
- CSS float
- CSS flexbox
- CSS framework
- CSS grid
HTML Table
Table элементийг ашиглан HTML хуудсыг зохион байгуулж болно. Гэвч тодорхой хугацааны дараа бид вэб хуудсанд жижигхэн өөрчлөлт оруулах, хуудсыг бага багаар сайжруулах хэрэгцээ гардаг бөгөөд энэ үед л table элементээр зохион байгуулсан вэб хуудас маань том асуудал болдог. Жишээ нь таны оруулсан жижигхэн өөрчлөлт HTML хуудсыг бүхэлд нь өөрчлөх, хүсээгүй үр дүнг үзүүлэх, кодыг эвдэх зэрэг том асуудал болон хувирдаг. Иймд table элементийг хүснэгтэн мэдээлэлд ашиглаж байхыг зөвлөж байна.
Зөвлөмж: HTML хуудасны зохион байгуулалтыг table элементээр хийхгүй байхыг зөвлөж байна.
CSS Frameworks
HTML хуудасны зохион байгуулалтыг бэлэн framework ашиглаж хурдан хийж болно. HTML, CSS, JavaScript-ийн тусламжтайгаар бид өөрийн гэсэн framework-г хийж чадна.
CSS Floats
CSS-ийн Float шинж чанрыг ашиглан HTML хуудасны зохион байгуулалтыг хийх бүрэн боломжтой. CSS-н хичээлээс Float болон Clear шинж чанарыг илүү сайн судлаарай.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML хичээл</title>
<base href="http://www.abcd.mn/static/img/" target="_blank">
<meta charset="utf-8">
<meta name="description" content="Үнэгүй цахим хичээл">
<meta name="keywords" content="Python, HTML, CSS, XML,JavaScript, Excel">
<meta name="author" content="ABCD">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* header буюу толгой хэсэг */
header {
background-color: red;
padding: 20px;
text-align: center;
font-size: 30px;
color: white;
}
/* хоёр багана үүсгэж байна */
nav {
float: left;
width: 25%;
height: 350px;
background: yellow;
padding: 20px;
}
/* HTML цэсний загвар */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 10px;
width: 75%;
background-color: DodgerBlue;
height: 350px;
}
/* float-ийг цэвэрлэж байна */
section:after {
content: "";
display: table;
clear: both;
}
/* footer-ийн загвар */
footer {
background-color: green;
padding: 5px;
text-align: center;
color: white;
}
/* Responsive зохион байгуулалт - дэлгэцийн өргөн 600px буюу түүнээс бага тохиолдолд нэг багананд байрлах болно
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Float зохион байгуулалт</h2>
<p>Энэ жишээнд HTML хуудас нь толгой хэсэг, 2 багана, footer буюу хөлний хэсгээс бүрдсэн зохион байгуулалттай coffe shop-ийн Responsive загвар хуудасыг хийлээ</p>
<p>Responsive ажилуулж үзэхийн тулд дэлгэцийн хэмжээг багасгаад үзэрэй. Голийн 2 багана зэрэгцээ байрлалаас цуваа байрлалд шилжих болно</p>
<header>
<h2>Coffee Shop</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Хар кофе</a></li>
<li><a href="#">Сүүтэй кофе</a></li>
<li><a href="#">Ногоон цай</a></li>
<li><a href="#">Аарц</a></li>
</ul>
</nav>
<article>
<h1>Монгол аарц VS Кофе</h1>
<p>Монголын таван хошуу мал нь дэлхийд ховорд тооцогдох онгон байгальд билчиж, эмийн Ургамалаар хооллодог бөгөөд сүүгээр нь тараг, айраг, аарц, гэх мэт маш олон төрлийн хүнсний бүтээгдэхүүнийг Монголчууд бид гарган авдаг. </p>
</article>
</section>
<footer>
<p>Холбоо барих</p>
</footer>
</body>
</html>
CSS Flexbox
CSS Flexbox нь HTML-хуудсыг зохион байгуулах зорилготой сүүлд CSS3 дээр гарсан шинж чанар юм.
Бид вэб хуудсыг компьютер, гар утас, таб, ... гэх мэт маш олон төхөөрөмжөөс үздэг болоод удаж байна. Тэгвэл эдгээр асуудлыг шийдвэрлэхээр flexbox шинж чанар хийгдсэн гэж ойлгож болно. flexbox ашиглан ямар төхөөрөмж дээр таны вэб хуудас хэрхэн харагдахыг урьдчилан тооцоолох боломжтой юм. flexbox нь Internet explorer 10 болон түүнээс өмнөх хувилбар дээр ажиллахгүйг анхаарна уу.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<head>
<title>HTML хичээл</title>
<meta charset="utf-8">
<meta name="description" content="Үнэгүй цахим хичээл">
<meta name="keywords" content="Python, HTML, CSS, XML,JavaScript, Excel">
<meta name="author" content="ABCD">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* header буюу толгой хэсэг */
header {
background-color: red;
padding: 20px;
text-align: center;
font-size: 30px;
color: white;
}
section {
display: -webkit-flex;
display: flex;
}
/* хоёр багана navigation цэс үүсгэж байна */
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: yellow;
padding: 20px;
}
/* HTML цэсний загвар */
nav ul {
list-style-type: none;
padding: 0;
}
/* HTML контент байрлах хэсэг */
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: DodgerBlue;
height: 350px;
}
/* float-ийг цэвэрлэж байна */
section:after {
content: "";
display: table;
clear: both;
}
/* footer-ийн загвар */
footer {
background-color: green;
padding: 5px;
text-align: center;
color: white;
}
/* Responsive зохион байгуулалт - дэлгэцийн өргөн 600px буюу түүнээс бага тохиолдолд нэг багананд байрлах болно
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Float зохион байгуулалт</h2>
<p>Энэ жишээнд HTML хуудас нь толгой хэсэг, 2 багана, footer буюу хөлний хэсгээс бүрдсэн зохион байгуулалттай coffe shop-ийн Responsive загвар хуудасыг хийлээ</p>
<p>Responsive ажилуулж үзэхийн тулд дэлгэцийн хэмжээг багасгаад үзэрэй. Голийн 2 багана зэрэгцээ байрлалаас цуваа байрлалд шилжих болно</p>
<p>Анхаар: internet explorer 10 аас өмнөх хувилбар дээр ажиллахгүй </p>
<header>
<h2>Coffee Shop</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">Хар кофе</a></li>
<li><a href="#">Сүүтэй кофе</a></li>
<li><a href="#">Ногоон цай</a></li>
<li><a href="#">Аарц</a></li>
</ul>
</nav>
<article>
<h1>Монгол аарц VS Кофе</h1>
<p>Монголын таван хошуу мал нь дэлхийд ховорд тооцогдох онгон байгальд билчиж, эмийн Ургамалаар хооллодог бөгөөд сүүгээр нь тараг, айраг, аарц, гэх мэт маш олон төрлийн хүнсний бүтээгдэхүүнийг Монголчууд бид гарган авдаг. </p>
</article>
</section>
<footer>
<p>Холбоо барих</p>
</footer>
</body>
</html>
CSS Grid view
CSS Grid view нь модульд мөр ба багануудыг агуулсан бөгөөд float шинж чанрыг ашиглах шаардллаггүй зохион байгуулалтын систем юм.
CSS Grid view мөн адил сүүлд гарсан модуль учир internet explorer 10 болон Edge 15 өөс өмнөх хувилбарууд дээр ажиллахгүй.
Манай санд тун удахгүй орох CSS сурцгаая А-Я хичээлээс үзнэ үү.
Сэтгэгдэлүүд
