[تەجرىبەم] CSS تىن بىلىشكە تېگىشلىك ھۈنەر

بۇ تېمىنى ئاخىرىدا  munglan تەھرىرلىگەن. ۋاقتى  2009-12-5 18:27
3 p+ i! Q! A8 l* z' s0 `
گەپنى قىسقا قىلاي. مېنىڭ بۇ يازمىنى يېزىشتىن مەقسىتىم تورداشلارغا  CSS تا  بىلىۋېلىشقا تېگىشلىك بىر ھۈنەرنى  كۆرسىتىپ ئۆتمەكچىمەن.& S( P& |7 b- ^6 \# z
بىر كېچە ئۇخلىماي تاڭ ئاتارغا يېقىن قىلىدىغان ئىش يوق بۇ كودنى ۋە مەزكۇر يازمىنى يېزىپ قويدۇم ، چالا ئۇيقۇچىلىقتا CSS  كودىنىمۇ بەك تەكشۈرۈپ كەتمىدىم . ھازىرچە IE ۋە FireFox تا نورمال  . CSS كودىدا ئېلىۋەتسىمۇ بولىدىغان ئەخلەت كود بار بولىشى مۇمكىن. لېكىن مەقسەت ئۇ ئەمەس ، مېنىڭ مەقسىتىم بىر تور بېكەتتىكى ھەممە كىچىك رەسىمنى بىرلا رەسىم ھۆججىتىگە يىغىنچاقلاپ CSS نىڭ Background-Position بىلەن كوئوردېنات بەلگىلەپ رەسىمنى ھەرقايسى جايلاردا كۆرسىتىدىغان ئۇسۇل.
بۇ ئۇسۇلنىڭ پايدىسى:
بىرىنچىدىن : ھەممە كىچىك سىنبەلگە رەسىملەرنى بىرلا رەسىمگە يىغىنچاقلىغاندا مۇلازىمېتىردىن سىنبەلگىلەرنى بىر بىرلەپ چۈشۈرگەنگە قارىغاندا سۈرئەت تېز بولىدۇ.يەنى تور بېكەتنىڭ ئېچىلىش سۈرئىتى ئاشىدۇ.2 w/ |" e" A  w6 l
ئىككىنچىدىن:  a:hover ئارقىلىق كونۇپكا ئالمىشىش ئۈنۈمى قوشقاندا مائۇسنى كونۇپكا ئۈستىگە ئاپارغاندىكى ئالمىشىدىغان رەسىمنىڭ ئېچىلىش سۈرئىتى بەك تېز بولىدۇ. مىجىقلاپ ئېچىلىپ بولالمايدىغان ئىشتىن ساقلانغىلى بولىدۇ. بۇنىڭ بىلەن بىر ۋاقىتتا زىيارەتچىلەرگىمۇ راھەت تۇيغۇ بەخىش ئەتكىلى بولىدۇ.
ئاستىدا مەن ئىشلەتكەن رەسىم ۋە HTML كودىنى قالدۇردۇم . بەك ئاددىيلا. قالغىنىنى ئۆزۈڭلار قول سېلىپ كۆرسەڭلار. ئاساسلىق مەقسىتىم بايا دەپ ئۆتكەندەك ھەممە كىچىك سىنبەلگە رەسىملەرنى بىرلا رەسىمگە يىغىنچاقلاپ Background-Position ئارقىلىق كوئوردېنات بەلگىلەپ تور بەتتە كۆرسىتىش.  ئاستىدىكى كودتا  Background-Positon  يېزىلماستىن بەلكى Background دەپلا ئېلىۋەتتىم .  چۈشىنەلمىگەنلەر bakcground نىڭ قىسقارتىلمىسىدىن پايدىلانساڭلار بولىدۇ. مانا :

background: <color> <image> <attachment> <repeat> <position>

مەزمۇننى كۆچۈرۈۋېلىش

تۆۋەندىكىسى مەن ئىشلەتكەن رەسىم ۋە مەن يېزىپ قالدۇرغان كود.
بۇ كودنى HTML ھۆججەت قىلىپ ساقلىۋېلىپ ئاندىن رەسىم ھۆججىتى بىلەن بىر يەرگە قويۇپ html ھۆججەتنى ئىجرا قىلسىڭىزلا بولىدۇ.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Teglik</title>
<style type="text/css">
*{margin: 0 auto ;padding:0}
#munglan_button{
background:url(icon.gif) no-repeat 0 0;
font: 13px "Tahoma";
font-weight: 600;
height:30px;
width:86px;
line-height:28px;
text-align:center;
}
#munglan_Yengi_Tema{
background:url(icon.gif) no-repeat left -330px;
font: 13px "Tahoma";
font-weight: 600;
height: 60px;
width: 400px;
line-height:60px;
margin-top:50px;
text-align:center;
border:1px #d8ffac solid;
}
#munglan_Yengi_Tema .span_1{
background:url(icon.gif) no-repeat right top;
display: block;
height: 40px;
width: 40px;
float: right;
}
.munglan_Mawzu{
background:url(icon.gif) no-repeat left -254px;
font: 13px "Tahoma";
font-weight: 600;
height: 28px;
width: 400px;
margin-top:150px;
text-align:center;
line-height:28px;
border:1px #d8ffac solid;
}
a{
background:url(icon.gif) no-repeat left -210px;
text-decoration:none;
height: 28px;
height: 30px!important;
width: 67px;
float:left;
margin
}
a span{
padding:7px 8px 7px 0;
margin:0 0 0 8px;
float:left;
height:16px;
cursor:pointer;
font-size:13px;
}
</style>
<body>
<div id="munglan_button">MungLan</div>
<div id="munglan_Yengi_Tema"><span class="span_1"></span>
Essalamu Eleykum!
</div>
<div class="munglan_Mawzu">
asasa
</div>
<a href="#"><span>asasas</span></a>
<html>
</body>
</html>