Эхлэл
<!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>