web basic 9

LOG
O

ВЭБИЙН
ҮНДЭС
Багш: Г.Өсөхжаргал

Div тагийн тухай
 Анх html хэл дээр вебсайт бүтээхэд Frame болон Table
ашиглах хоѐрхон л сонголт байсан.
 Div таг нь 3 дахь боломжийг бий болгож чадсан бөгөөд
дотроо html хэлний бараг бүх төрлийн шинж
чанаруудыг өөртөө агуулж ажиллаж чаддаг.
 Div тагийг ихэвчлэн CSS-тэй хослуулан ашиглах нь
тохиромжтой байдаг.
 Вэб хуудасны байршлын загварыг HTML Table
элементээр хийж болох ч CSS ашиглан үүнийг шийдэх
нь илүү хялбар, бас вэб хөтөч хурдтай зурдаг давуу
талтай

Div тагийн шинж чанарууд
 Class
 Css код доторх .(цэг) тэмдгээр эхэлсэн шинжийг заана.
 Өөр өөр элэментүүдэд ашиглагдаж болох ба CSS-тэй
хамт хэрэглэгдэнэ.
 Id
 Css код доторх # тэмдгээр эхэлсэн шинжийг заана
 элементүүдийн атрибутын утга давхардах ѐсгүй
 Style
 Элэментийн CSS загварыг бичиж болно.
 Title
 Гарчиг буюу, хулганы заагчаар очиход гарч ирэх
текстийг бичнэ.
 align
 Байршил заахад хэрэглэх боломжтой

CSS дэх div тагийн шинж
чанаруудыг
ажиллуулах
Idselector-
id- г зөвхөн ганц элемент л ашиглах боломжтой
байдаг. Хуудасны header, footer, үндсэн цэс
зэрэг нь ганц байхад л хангалттай байдаг учир
эдгээрийн харагдах байдлыг тодорхойлохдоо
id ашиглах нь тохиромжтой.
Бичигдэх хэлбэр: #нэр{property:value}
id– зарлахдаа # тэмдгээр эхлүүлнэ.
Жишээ нь:#header{color:yellow;}
HTML-д ашиглах
<div id=“header”>Энэ бол header хэсэг</div>

Хуваалт хийхдээ анхаарах
зүйлс
Вэб хуудасны төсөөллийн (conceptual)
байршлын загварыг цаасан дээр зурж
нэрлэнэ.
Байршлын загварыг боловсруулахад эхлээд
хуудасны ерөнхий хуваалтыг зурна, дараа нь
хуваалт бүрт нэр оноож
 харьцангуй (relative) болон
 тогтмол (absolute)
хэмжээг хуваалт бүрт зааж өгнө.

Хуудасны бүтцийг зурсан жишээ

Жишээ 1 – Дараах кодыг хуудасны
body дотроо бичнэ
<html>
<head>
<title>CSS ашигласан жишээ</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head> <body>
<div id="container">
<div id="topbar">Хуудасны Толгой, Гарчигийн хэсэг</div>
<div id="navbar">
<a href=“main.html">Цэснүүд</a>
<a href=“about.html">Цэснүүд</a>
<a href=“contact.html">Цэснүүд</a>
</div>
<div id="main">
<div id="column_left">
<h1>Гарчиг</h1>

<h2>12 арванхоёрдугаар сар 2011</h2>

<p>КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, КПХ тэнхим, </p>
</div>
<div id="column_right">
<h3>Сайтын Ангилал</h3>
Энд хуудасны холбоосуудыг хийж өгөхөд тохиромжтой
</div>
<div id="column_right_adsense">
<h3>Сурталчилгаа, зарлал</h3>
Зарлал хийхэд тохиромжтой байрлал
</div>
<div class="spacer"></div>
</div>
<div id="footer">© 2010 Улаанбаатар Дээд Сургууль</div>
</div>
</body> </html>

Вэб байршлын загварын CSS шинжүүдийг
дараах жагсаалтаар харуулав.
/* ------ Хуудасны хуваалт ------ */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}
#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
.spacer{clear:both; height:10px; display:block;} //класс зарласан байна
#footer{width:auto; display:block; padding:10px 0; font-size:11px;
color:#666666;}

Жишээ 1 Хуудасны үр дүн

<div> таг дотор байршил зааж өгч болно

<div align="left">Текст</div>
<div align="center">Текст</div>
<div align="right">Текст</div>

Дотоод css ашиглан хуудас
хууваасан байдал Жишээ 2
<html> <head>
<title>CSS ашиглан хуваалт хийсэн #header { text-align: center ;
жишээ</title> <style> height:100px;
border: 1px solid gray; }
body { font-family:tahoma;
</style></head>
font-size:0.8cm; } <body id=“container”>
#container { width: 800px ; <div id="layout">
margin-left: auto ; margin-right: <div id="header">Top
auto; } Header</div>
#content { margin-left:200px; <div id="navbar">
Navigation</div>
height:300px; padding: 4px ; <div id="content"> Content
border: 1px solid gray; } here</div>
#navbar { float: left; width: 198px; <div id="footer"> Bottom
Footer</div>
height:308px; border: 1px solid
</div>
gray; }
</body></html>
#footer { clear: both ;
border: 1px solid gray; }

Жишээ 3 – Хуудсыг 4 хэсэгт хуваах
<html> <head> <title>4 хуваалт</title>
<style type="text/css" >
body {width: 100%;height: 100%;padding: 0px;margin: 0px;}
html {width: 100%;height: 100%;padding: 0px;margin: 0px;}
#col1 {float: left;width: 50%;height: 100%;padding: 0px;margin: 0px;}
#col2 {float: right;width: 50%;height: 100%;padding: 0px;margin: 0px;}
#rect1 {background-color: #666666;width: 100%;height: 50%;
padding: 0px;margin: 0px;}
</style> </head>

Жишээ 4
*{margin: 0; padding: 0;}
body {padding-top: 50px;}
#container {margin: 0 auto; background-color: #cecece;}
#container h1 {background-color: #aaa; color: #000; text-align:
center;}
#left {float: left; width: 20%; padding: 5px 5px 5px 5px; background-
color: #cccccc;}
#center {float: left; width: 55%; padding: 5px 5px 5px 5px;
background-color: #eeeeee; }
#right {float: left; width: 20%; padding: 5px 5px 5px 5px;
background-color: #cccccc;}
.clear {clear: both; text-align: center; font-size: 12px; color:
#000000;}

<html>
<head><title>Жишээ 4</title>
<link href="ex5.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="container">
<h1>Веб хуудасны гарчиг</h1>
<div id="left"> <p>Зүүн тал</p> </div>
<div id="center" align="center">
<p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p>
<p>Голын хэсэг</p> <p>Голын хэсэг</p> <p>Голын хэсэг</p> </div>
<div id="right">
<p>Баруун тал</p>
</div>
<p class="clear">хуудасны доод тал</p>
</div>
</body></html>

Div – тагийн CSS дотор бичигдэх
байрлалын зарим шинжүүд

#div {position:static}-хэвийн байдлаар харагдана

#div {position:relative}-хэмжээг нь өгч дээш доош, баруун
зүүн тийш байрлуулах

#div {position:absolute}-дурын байрлалд байрлуулна

#div {float:left}-баруун зүүн голд байрлуулна

#div {clear:both}-шинэ мөрөнд гаргана

web basic 9

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to web basic 9 (20)

More from Usukhuu Galaa (20)

web basic 9