HTML
код
<body>
<header>
Толгой хэсгийн муж </header>
<div
class="container">
<nav>
Цэсний
хэсгийн муж
</nav>
<section>
Мэдээний
хэсгийн муж 1
</section>
<section>
Мэдээний
хэсгийн муж 2
</section>
<section>
Мэдээний
хэсгийн муж 3
</section>
</div>
<footer>
Хөлний хэсгийн муж, бэхжүүлсэн </footer>
</body>
CSS
код
body { /* хуудасны их биеийн үндсэн хэлбэр тодорхойлох */
margin-bottom: 80px; /* доод талаас авах үндсэн зай*/
font-family:Verdana; /* үндсэн текстийн фонт */
text-align: center; } /* үндсэн текстийн зэрэгцүүлэлт */
header { /* толгой мужийн хэлбэр тодорхойлох*/
position: relative; /* мужийн байрлал тодорхойлох (харьцангуй) */
height: 70px; /* мужийн өндөр */
background-color: #E4FFFE; /* мужийн дэвсгэр өнгө */
border: solid blue 3px; /* мужийн хүрээний өнгө */
border-radius: 10px; } /* мужийн өнцөг */
.container { /* үндсэн мэдээний хэсгийн хэлбэр тодорхойлох */
position: relative;
border: solid red 3px;
border-radius: 10px;
height: 700px; }
nav { /* цэсний мужийн хэлбэр тодорхойлох */
position: absolute;
margin-left: 5px; /* зүүн захын зай */
margin-top: 5px; /* мужийн дээд талын обьект хүртэлх захын зай */
width: 200px; /* мужийн өргөн */
height: 400px; /* мужийн өндөр */
border: solid green 3px;
border-radius: 10px; }
section { /* мэдээний хэсгийн хэлбэр тодорхойлох */
/* Жич: Мужийн байрлал заагаагүй үед үндсэн тохиргоо нь статик байна */
margin-left: 210px;
margin-top: 10px;
height: 100px;
border: solid yellow 3px;
border-radius: 10px; }
footer { /* хөлний мужийн хэлбэр тодорхойлох */
position: fixed; /* мужийн байрлал (бэхжүүлсэн буюу ямар ч үед байрнаасаа хөдлөхгүй) */
bottom: 0;
left: 0;
right:0;
height: 70px;
background-color: white;
border: solid green 3px; }
</style>
No comments:
Post a Comment