លំហាត់ CSS-Navigation

លំហាត់ CSS-Navigation
លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS
a 

លំហាត់ទី១  ធ្វើយ៉ាងណាដើម្បីផ្លាស់ប្តូរ រូបភាព navigation ជាមួយកូដ CSS?
aសរសេរកូដ
<!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>
<title>Replace images</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”replaceimages.css” />
</head>
<body>
<table id=”navigation”>
<tr>
<td>
<a href=”#”>Recipes</a>
</td>
</tr>
<tr>
<td>
<a href=”#”>Contact Us</a>
</td>
</tr>
<tr>
<td>
<a href=”#”>Articles</a>
</td>
</tr>
<tr>
<td>
<a href=”#”>Buy Online</a>
</td>
</tr>
</table>
</body>
</html>
#navigation {
width: 180px;
padding: 0;
margin: 0;
border-collapse: collapse;
}
#navigation td {
height: 26px;
border-bottom: 2px solid #460016;
background-color: #FFDFEA;
color: #460016;
}
#navigation a:link, #navigation a:visited {
margin-left: 12px;
color: #460016;
background-color: transparent;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}
a
សរសេរកូដ
<table width=”180″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td>
<a href=”#”><img src=”images/nav1.gif” width=”180″
height=”28″ alt=”Recipes” border=”0″ /></a>
</td>
</tr>
<tr>
<td>
<a href=”#”><img src=”images/nav2.gif” width=”180″
height=”28″ alt=”Contact Us” border=”0″ /></a>
</td>
</tr>
<tr>
<td>
<a href=”#”><img src=”images/nav3.gif” width=”180″
height=”28″ alt=”Articles” border=”0″ /></a>
</td>
</tr>
<tr>
<td>
<a href=”#”><img src=”images/nav4.gif” width=”180″
height=”28″ alt=”Buy Online” border=”0″ /></a>
</td>
</tr>
</table>
បន្ថែមកូដ CSS

a<table id=”navigation”>
#navigation {
width: 180px;
padding: 0;
margin: 0;
border-collapse: collapse;
}
#navigation td {
height: 26px;
border-bottom: 2px solid #460016;
background-color: #FFDFEA;
color: #460016;
}
a#navigation a:link, #navigation a:visited {
margin-left: 12px;
color: #460016;
background-color: transparent;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-weight: bold;
}

លំហាត់ទី២ ធ្វើយ៉ាងណាដើម្បីបង្កើត Style ជាមួយរចនាសម្ព័ន្ធដូចជា navigation menu?
aសរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”listnav1.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
a<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>

លំហាត់ទី៣ ធ្វើយ៉ាងណា ប្រើ CSS ដើម្បីបង្កើត rollover navigation ដោយមិនប្រើរូប ឬ JavaScript?
aសរសេរកូដ
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
លំហាត់ទី៤ ធ្វើយ៉ាងណា ប្រើ CSS និង list ដើម្បីបង្កើតប្រព័ន្ធ navigation ដោយមាន sub-navigation?
aសរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”listnav_sub.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a>
<ul>
<li><a href=”#”>Starters</a></li>
<li><a href=”#”>Main Courses</a></li>
<li><a href=”#”>Desserts</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
width: 200px;
font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
a<ul>
<li><a href=”#”>Recipes</a>
<ul>
<li><a href=”#”>Starters</a></li>
<li><a href=”#”>Main Courses</a></li>
<li><a href=”#”>Desserts</a></li>
</ul>
</li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
a#navigation ul ul {
margin-left: 12px;
}
a#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បីបង្កើត horizontal menu បញ្ឈរប្រើ CSS?
a
សរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”listnav_horiz.css” />
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
លំហាត់ទី៦  ធ្វើយ៉ាងណាដើម្បីបង្កើត button-like ប្រើ CSS?
aសរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”listnav_button.css”
/>
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</div>
</body>
</html>

#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
លំហាត់ទី៧  ធ្វើយ៉ាងណាដើម្បីបង្កើត tabbed navigation ប្រើ CSS?
aសរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”tabs.css” />
</head>
<body id=”recipes”>
<ul id=”tabnav”>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
<div id=”content”>
<h1>Recipes</h1>
<p>Lorem ipsum dolor sit amet, …</p>
</div>
</body>
</html>
<ul id=”tabnav”>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>

ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 24px;
border-bottom: 1px solid #711515;
font: bold 11px verdana, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #B51032;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid #711515;
}
aul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #FFFFFF;
background-color: transparent;
text-decoration: none;
padding: 4px;
}
ul#tabnav a:hover {
background-color: #F4869C;
color: #FFFFFF;
}
abody#recipes li.recipes, body#contact li.contact,
body#articles li.articles, body#buy li.buy {
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
body#recipes li.recipes a:link, body#recipes li.recipes a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#articles li.articles a:link,
body#articles li.articles a:visited, body#buy li.buy a:link,
body#buy li.buy a:visited {
color: #000000;
background-color: #FFFFFF;
}
លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បីប្តូរ ប្រភេទ cursor ប្រើ CSS?
aa
លំហាត់ទី៩ ធ្វើយ៉ាងណាដើម្បីបង្កើត rollover ប្រើ CSS ដោយមិនប្រើ Javascript?
aសរសេរកូដ
<!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>
<title>Lists as navigation</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”images.css” />
</head>
<body>
<ul id=”nav”>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
</ul>
</body>
</html>
ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url(“peppers.gif”) top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}

Related product you might see:

Share this product :
Labels:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. ទឹកអំពៅ - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger