CSSពិតជាអស្ចារ្យ បានន័យថាវែបសាយស្អាតប្ញមិនស្អាតនោះប្រហែលជាត្រូវពឹងលើCSSហើយ!កាលពីមុន ខ្ញុំធ្លាប់បានសរសេរ អត្តបទមួយរួចមកហើយដែលនិយាយពីការបង្កើតLayout of Website with CSS។ឥឡូវនេះខ្ញុំសូមសរសេរអំពីការបង្កើត Sidebar Menu ប្ញ Verical Menu ដោយប្រើ CSSដែលជាចំនុចមួយគួឲ្យចាប់អារម្មណ៏។
សូមមើលគម្រូ
លោកអ្នកត្រូវCopy code ខាងក្រោមនេះចូលNote pad ប្ញText Editor ណាមួយក៏បានរួចsaveដាក់ឈ្មោះថា
name.html
>>បើលោកអ្នកប្រើNotepad ពេលSaveកំភ្លេចSave Encording ជា Unicode
<!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=iso-8859-1″ />
<title>Verical Menu</title>
/*បង្កើត CSS style sheet*/
<style type=” text/css” >
/*រចនាម៉ូតឲ្យBodyនៃវែបសាយ*/
body {
background-color: #000000;
margin-top: 10px;
margin-right: auto;
margin-bottom: auto;
margin-left: 20px;;
}
/*#side_bar ជាIDសម្រាប់បង្កើតជាMenu >>>ដើម្បីធ្វើជាSidebar Menu ប្ញ Verical Menu ត្រូវសរសេរ ជាLIST ក្នុងHTML គឺ UL and LI */
#side_bar {
float: left;
height: 500px;
width: 250px;
margin-top: 10px;
margin-right: auto;
margin-bottom: auto;
margin-left: 5px;
font-family:Georgia, “ Times New Roman” , Times, serif;
}
/*កំណត់លក្ខណះឲ្យH2 ពេលនេះយក H2 ជាចំណងជើងនែMenu*/
#side_bar h2{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
padding-left:5px;
text-align:center;
color:#00CCFF;
}
/*កំណត់លក្ខណះឲ្យUL របស់side_bar*/
#side_bar ul{
list-style-type:none;
/*width 100%នឹងធ្វើឲ្យផ្តៃBackgroundមានពណ៏ពេញខាងក្រោយListនិនួយៗ*/
width:100%;
padding: 0px;
}
/*កំណត់លក្ខណះឲ្យLI ពេលដែលមានLink*/
#side_bar li a{
display: block;
line-height:normal;
text-decoration:none;
color:#FFFFFF;
background-color:#404040;
padding-bottom:8px;
padding-top:8px;
padding-left:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}
/*កំណត់លក្ខណះឲ្យLI ពេលដែលមានLink ហើយពេលដែលUser, Visitor យក Mouse ចង្អុលពីលើ!*/
#side_bar li a:hover{
line-height:normal;
text-decoration:none;
color:#FFFFFF;
background-color:#000000;
padding-bottom:8px;
padding-top:8px;
/*យើងថែមpadding-leftឲ្យបាន30pxនោះទើបពេលយក Mouse ចង្អុលពីលើអក្សនឹងរត់ទៅមុខបន្តិច*/
padding-left:30px;
display: block;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
}
/*បញ្ចប់Style*/
</style>
</head>
<body>
<div id=” side_bar” >
<h2>Menu</h2>
<ul>
<li><a href=” #” >Home</a></li>
<li><a href=” #” >Blog</a></li>
<li><a href=” #” >About</a></li>
<li><a href=” #” >Contact</a></li>
<li><a href=” http://sereyboth.wordpress.com” >More tutorial</a></li>
</ul>
</div>
</body>
</html>
សង្ឈឹមថាលោកអ្នកយល់ច្បាស់អំពីមេរៀនមួយនេះ!ខ្ញុំនឹងព្យយាមសរសេរអត្ថបទអំពីCSSឲ្យបានច្រើនបន្តិចព្រោះវាសំខាន់ណាស់ចំពោះWeb designer & Developer!
[...] -Vertical Menu with CSS (recommended) [...]
SgAFBz uzrtqymkhlim, [url=http://xnyylrtgvuhc.com/]xnyylrtgvuhc[/url], [link=http://otkavzjwopzl.com/]otkavzjwopzl[/link], http://jpidordjeimr.com/
lSzJwJ xlazcctvpvrs, [url=http://uklwnnjamrcu.com/]uklwnnjamrcu[/url], [link=http://odtgyylnyzbc.com/]odtgyylnyzbc[/link], http://ylziqnfdkxnd.com/
KX5CoQ iwjsjpnhaewd, [url=http://hcvbegjbmohx.com/]hcvbegjbmohx[/url], [link=http://cbynjcqowxqi.com/]cbynjcqowxqi[/link], http://daaqyuivwgmu.com/
I still don’t understand about the writing!
What?
អត់យល់!
Oh! You can read and try to learn following this post first then you will be able to understand this lesson!
Please read
http://sereyboth.wordpress.com/2009/07/06/spend-3-weeks-mastering-html-and-css/ Then you will understand!
Hope this helps!