Style a Bulleted List
List ကို CSS အသံုးျပဳၿပီးေတာ့ ကၽြန္ေတာ္တို႕ေတြ menu ေလး တစ္ခု ဖန္တီးၾကည့္ရေအာင္။ လက္ရိွ html code မွာ list ထပ္ျဖည့္ရေအာင္။
<html>
<head>
<title>Styling Text</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>One Piece</h1>
<h2>by Eiichiro Oda</h2>
<ul class="menu">
<li><a href="./home.html">Home</a></li>
<li><a href="./anime.html">Anime</a></li>
<li><a href="./download.html">Download</a></li>
</ul>
<p>One Piece is a Japanese <span class='highlight'>shounen manga series</span> written and illustrated by Eiichiro Oda. It has been serialized in Weekly Shōnen Jump since August 4, 1997; the individual chapters are being published in tankōbon volumes by Shueisha, with the first released on December 24, 1997, and the 70th volume released as of March 2013. One Piece follows the adventures of <span class='highlight'>Monkey D. Luffy</span>, a young boy whose body gains the properties of rubber after unintentionally eating a Devil Fruit, and his diverse crew of pirates, named the Straw Hat Pirates. Luffy explores the ocean in search of the world's ultimate treasure known as One Piece in order to become the next Pirate King.</p>
</body>
</html>အဲဒီ code မွာ ကၽြန္ေတာ္တို႕ ul ကို အသံုးျပဳၿပီးေတာ့ list တစ္ခု ဖန္တီးထားပါတယ္။ class name ကိုေတာ့ menu ေပးထားတယ္။ အဲဒီ code ေလးကို browser မွာ ၾကည့္လိုက္ရင္ ေအာက္ကလို ျမင္ရပါမယ္။
Figure 4-10
အခု menu css ကို ေအာက္လို ထည့္လိုက္ရင္ေအာင္
.menu {
list-style: none;
padding: 0px;
text-align: center;
}
.menu li {
display: inline;
padding: 5px;
}
.menu li a{
text-decoration: none;
color:#E74C3C;
border-bottom: 1px dotted #E74C3C;
}ul တစ္ခုလံုးကို list-style ကို none ထားၿပီးေတာ့ ကိုလည္း အသံုးမျပဳပါဘူး။ text-align ကို center ထားလိုက္ပါတယ္။ .menu ေအာက္မွာ li ရွိပါတယ္။ သူ႕ေအာက္မွာ ရိွတဲ့ li ေတြကို ေခၚခ်င္တဲ့ အတြက္ေၾကာင့္ .menu li ဆိုၿပီး အသံုးျပဳထားပါတယ္။ list ေတြအားလံုးကို တစ္လိုင္းထဲမွာ ျပေစခ်င္တဲ့ အတြက္ေၾကာင့္ display: inline; ကို အသံုးျပဳထားပါတယ္။ li ေတြ တစ္ခုနဲ႕ တစ္ခု မကပ္ထားေစခ်င္တဲ့ အတြက္ေၾကာင့္ padding: 5px; ဆိုၿပီး padding ကို သံုးၿပီး ခြာထားပါတယ္။ ၿပီးတဲ့ အခါမွာ anchor tag (a) ကို ျပင္ဖို႕အတြက္ .menu li a ကို အသံုးျပဳပါတယ္။ anchor မွာ လိုင္းတားထားတာကို ဖ်က္လိုက္တယ္။ ေနာက္ၿပီးေတာ့ အေရာင္ေျပာင္းတယ္။ border-bottom ထပ္ျဖည့္ထားပါတယ္။ anchor tag အေၾကာင္း အေသးစိတ္ကို ေနာက္ပိုင္းမွာ ရွင္းျပပါမယ္။
အထက္ပါ code ကို browser မွာ ၾကည့္လိုက္ရင္ ေအာက္ကလို ျမင္ရပါမယ္။
Figure 4-11
အခု chapter 4 မွာ CSS နဲ႕ ပတ္သက္ၿပီး အေတာ္အသင့္ သိေလာက္ပါၿပီ။ Text ေတြကို အေရာင္ေတြ စာလံုးေတြ ေျပာင္းတတ္ေလာက္ပါၿပီ။ ေနာက္ chapter တစ္ခုမွာ image ဘယ္လို ထည့္ရမလဲ ဆိုတာကို ဆက္လက္ၿပီး ရွင္းျပသြားပါမယ္။