លំហាត់ CSS-ទីតាំង និង Layout

លំហាត់ CSS-ទីតាំង និង Layout
លំហាត់អនុវត្តសរសេរកូដ ប្រើកម្មវិធី CSS 
aលំហាត់ទី ១ ធ្វើយ៉ាងណាដើម្បីដាក់ ដូចជា Highlight ទៅក្នុងអត្ថបទបាន?
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>Inline and block level elements</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
#one {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
}
#two {
background-color: #CCCCCC;
color: #000000;
border: 2px solid #AAAAAA;
padding: 2px 6px 2px 6px;
display: inline;
}
a:link {
background-color: #ACACAC;
color: #FFFFFF;
text-decoration: none;
padding: 1px 2px 1px 2px;
}
a.block:link {
display: block;
}
</style>
</head>
<body>
<div id=”one”>A div is a block level element.</div>
<p>It is possible to display a div or any other block level
element as an inline element.</p>
<div id=”two”>This div is displaying as an inline element by
setting the display property to inline.</div>
<p><a href=”#”>The anchor tag creates an inline element</a></p>
<p><a href=”#”>We can force the link to be
displayed as block level</a></p>
</body>
</html>
លំហាត់ ទី២   ធ្វើយ៉ាងណាដើម្បី ទទួល Text រុំជុំវិញរូបភាព ដោយមិនប្រើ  HTML align attribute?
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>Float</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
.leftimg {
float: left;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
<img src=”peppers1.jpg” width=”319″ height=”255″ alt=”peppers”
class=”leftimg” />
<p>These stuffed peppers are lovely as a starter…</p>
</body>
</html>
ដាក់ស៊ុមដិតជុំវិញ
.leftimg {
float: left;
border: 2px solid #000000;
margin-right: 20px;
margin-bottom: 6px;
}
aលំហាត់ ទី៣   ធ្វើយ៉ាងណាដើម្បី បញ្ឈប់ បន្ទាប់ពីធាតុមួយធ្វើចលនាឡើង?
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>float and clear</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>
.rightimg {
float: right;
margin-left: 20px;
margin-bottom: 6px;
}
.clear {
clear: both;
}
p, ul {
border: 2px solid #000000;
}
</style>
</head>
<body>
<h1>Chinese style stuffed peppers</h1>
<img src=”peppers1.jpg” width=”319″ height=”255″ alt=”peppers”
class=”rightimg” />
<ul>
<li>1 tablespoon of oil</li>
<li>1 crushed garlic clove</li>
<li>Peeled and finely chopped fresh ginger root</li>
<li>250g minced pork, beef or Quorn</li>
<li>1 chopped spring onion</li>
<li>1 chopped celery stick</li>
<li>Grated rind of 1 lemon</li>
<li>Finely chopped red chilli (optional)</li>
<li>4 large green peppers</li>
</ul>
<p>These stuffed peppers are lovely as a …</p>
…
</body>
</html>
ដាក់ស៊ុមជុំវិញអក្សរ
.clear {
clear: both;
}
<p>These stuffed peppers are lovely as a starter, or
as a side dish for a Chinese meal. They also go down well as
part of a buffet and even children seem to like them.</p>
aលំហាត់ទី៤  ធ្វើយ៉ាងណាដើម្បី align logo នៅខាងឆ្វេង ឬខាងស្តាំ ដោយមិនប្រើ តារាង table?
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>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”strapline-align.css”
/>
</head>
<body>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
a<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” class=”logo” />
<span class=”strapline”>theatre and film reviews<span>
</div>
a#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
លំហាត់ទី៥ ធ្វើយ៉ាងណាដើម្បី item នៅទល់មុខគ្នា?
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>Absolute positioning</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”position.css” />
</head>
<body>
<div id=”box1″>This is box one. It is positioned 10 pixels from
the top and 20 pixels from the left of the viewport</div>
<div id=”box2″>This is box two. It is positioned 2 em from the
bottom and 2 em from the right of the viewport</div>
</body>
</html>
#box1 {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 100px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
a<div id=”box1″>This is box one. It is positioned 100 pixels from
the top and 100 pixels from the left of the viewport
<div id=”box2″>This is box two. It is positioned 2 em from the
bottom and 2 em from the right of the parent element – box1
</div>
</div>
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
#box2 {
position: absolute;
bottom: 2em;
right: 2em;
width: 150px;
background-color: #FFFAFA;
border: 2px solid #CD5C5C;
}
#box1 {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 300px;
background-color: #B0C4DE;
border: 2px solid #34537D
}
លំហាត់ទី៥  ធ្វើយ៉ាងណាដើម្បី ដាក់បណ្តុំមួយនៅកណ្តាលទំព័រ?
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>Centered Box</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”center.css” />
</head>
<body>
<div id=”content”>
<p>This box is 630 pixels wide and centered in the document.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>
</body>
</html>
body {
background-color: #CCD3D9;
color: #000000;
text-align: center;
}
#content {
width: 630px;
margin-left: auto;
margin-right: auto;
border: 2px solid #A6B2BC;
background-color: #FFFFFF;
color: #000000;
padding: 0 20px 0 20px;
text-align: left;
}
លំហាត់ទី៦   ធ្វើយ៉ាងណាដើម្បី បង្កើត ២ជួរ layout ជាមួយ 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>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”2col.css” />
</head>
<body>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
<div id=”content”>
<h1>Welcome to Stage &amp; Screen</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing …</p>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Play Reviews</a></li>
<li><a href=”#”>Film Reviews</a></li>
<li><a href=”#”>Post a Review</a></li>
<li><a href=”#”>About this site</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href=”#”>The Passion of The Christ</a></li>
<li><a href=”#”>Finding Nemo</a></li>
<li><a href=”#”>Stomp</a></li>
<li><a href=”#”>The Lion King 3</a></li>
</ul>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
#nav ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #2A4F6F;
background-color: transparent;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
background-color: transparent;
border-bottom: 1px dotted #cccccc;
}
#content {
margin-left: 16em;
margin-right: 2em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
padding-left: 1.2em;
}
abody {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}

លំហាត់ទី៧ ធ្វើយ៉ាងណាដើម្បី  ដាក់ច្រាស layout នេះ ទៅ menu ខាងស្តាំបាន?
aថែមកូដខាងលើ
#nav {
position: absolute;
top: 5em;
right: 1em;
width: 14em;
}
#content {
margin-left: 2em;
margin-right: 16em;
}
លំហាត់ទី៨ ធ្វើយ៉ាងណាដើម្បី  កំរាស នៅកណ្តាល ពីរជួរ layout?
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>Recipe for Success</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link href=”2col-fixedwidth.css” rel=”stylesheet” type=”text/css”
/>
</head>
<body>
<div id=”wrapper”>
<div id=”content”>
<h1>Welcome</h1>
<p>The Recipe for Success web site brings you exciting and
easy to use recipes from around the world.</p>
<p>…</p>
</div>
<div id=”navigation”>
<ul id=”mainnav”>
<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>
<div id=”footer”>Copyright &copy; 1999 – 2004 Recipe for
success</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
padding: 122px 0 0 0;
background-image: url(recipe_header.jpg);
background-repeat: no-repeat;
background-position: left top;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#content {
margin-left: 230px;
padding: 20px 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.8em;
padding-left: 2em;
}
#content h1 {
font: normal 180% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
#navigation {
position: absolute;
top: 122px;
left: 0;
width: 180px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #722100;
border-right: 1px solid #722100;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #722100;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation ul.subnav a:link, #navigation ul.subnav a:visited {
background-color: #ED9F9F;
color: #722100;
}
#footer {
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}
#wrapper {
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
padding: 122px 0 0 0;
background-image: url(recipe_header.jpg);
background-repeat: no-repeat;
background-position: left top;
border-left: 2px solid #722100;
border-right: 2px solid #722100;
border-bottom: 2px solid #722100;
}
#content {
width: 520px;
float: right;
padding: 20px 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.8em;
padding-left: 2em;
}
#content h1 {
font: normal 180% Georgia, “Times New Roman”, Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
#navigation {
float: left;
width: 180px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ED9F9F;
margin: 0;
padding: 0;
font-size: 80%;
vertical-align: bottom;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #722100;
border-right: 1px solid #722100;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #722100;
color: #FFFFFF;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #722100;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #ED9F9F;
color: #722100;
}
#footer {
clear: both;
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}
លំហាត់ ទី៩ ធ្វើយ៉ាងណាដើម្បី បង្កើត បីជួរ CSS layout?
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>Recipe for Success</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”3col.css” />
</head>
<body>
<div id=”content”>
<h1>Recipe for Success</h1>
<p>…</p>
</div>
<div id=”side1″>
<h3>Search the Recipes</h3>
<form method=”post” action=”">
<input type=”text” name=”textfield” /><br />
<input type=”submit” name=”Submit” value=”Submit” />
</form>
<ul>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Recipes</a></li>
<li><a href=”#”>Articles</a></li>
<li><a href=”#”>Buy Online</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
</div>
<div id=”side2″>
<h3>Please Visit our Sponsors</h3>
<div><p>Lorem ipsum dolor sit amet, …</p></div>
<div><p>Sed mattis, orci eu porta …</p></div>
<div><p>Quisque mauris nunc, mattis …</p></div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: url(tomato_bg.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
}
p {
font: 80%/1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding-top: 0;
margin-top: 0;
}
form {
margin: 0;
padding: 0;
}
#content {
margin: 66px 260px 0px 240px;
padding: 10px;
}
#content h1 {
text-align: right;
padding-right: 20px;
font: 150% Georgia, “Times New Roman”, Times, serif;
color: #901602;
}
#side1 {
position: absolute;
width: 200px;
top: 30px;
left: 10px;
padding: 70px 10px 10px 10px;
}
#side2 {
position: absolute;
width: 220px;
top: 30px;
right: 10px;
padding: 70px 10px 10px 10px;
border-left: 1px dotted #cccccc;
background-image: url(sm-tomato.jpg);
background-position: top right;
background-repeat: no-repeat;
}
#side2 h3 {
font: 110% Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding-bottom: 4px;
}
.adbox {
padding: 2px 4px 2px 6px;
margin: 0 0 10px 0;
border: 1px dotted #B1B1B1;
background-color: #F4F4F4;
}
#side1 h3 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #621313;
background-color: transparent;
margin: 0;
padding-bottom: 4px;
}
#side1 .txt {
width: 184px;
background-color: #FCF5F5;
border: 1px inset #901602;
}
#side1 ul {
list-style: none;
margin-left: 0;
padding-left: 0;
width: 184px;
}
#side1 li {
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0.3em;
border-bottom: 1px solid #E7AFAF;
}
#side1 a:link, #side1 a:visited {
text-decoration: none;
color: #901602;
background-color: transparent;
}
#side1 a:hover {
color: #621313;
}
លំហាត់ទី១០ ធ្វើយ៉ាងណាដើម្បី បន្ថែម footer ដោយប្រើ 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>Stage &amp; Screen – theatre and film reviews</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”footer.css” />
</head>
<body>
<div id=”contents”>
<div id=”header”>
<img src=”stage-logo.gif” width=”187″ height=”29″
alt=”Stage &amp; Screen” />
<span>theatre and film reviews</span>
</div>
<div id=”content”>
<h1>Welcome to Stage &amp; Screen</h1>
<p>…</p>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Play Reviews</a></li>
<li><a href=”#”>Film Reviews</a></li>
<li><a href=”#”>Post a Review</a></li>
<li><a href=”#”>About this site</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<h2>Latest Reviews</h2>
<ul>
<li><a href=”#”>The Passion of The Christ</a></li>
<li><a href=”#”>Finding Nemo</a></li>
<li><a href=”#”>Stomp</a></li>
<li><a href=”#”>The Lion King 3</a></li>
</ul>
</div>
<div id=”footer”><p>Copyright &copy; 2003 – 2004 Stage &amp;
Screen</p></div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body #contents {
height: auto;
}
#contents {
position: absolute;
top: 0;
left: 0;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .strapline {
font: 120% Georgia, “Times New Roman”, Times, serif;
color: #778899;
background-color: transparent;
float: right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
margin-left: 1.5em;
margin-top: 0.5em;
}
#nav {
position: absolute;
top: 5em;
left: 1em;
width: 14em;
}
#nav ul {
list-style: none;
margin-left: 1em;
padding-left: 0;
}
#nav li {
font-size: 80%;
border-bottom: 1px dotted #B2BCC6;
margin-bottom: 0.3em;
}
#nav a:link, #nav a:visited {
text-decoration: none;
color: #2A4F6F;
background-color: transparent;
}
#nav a:hover {
color: #778899;
}
#nav h2 {
font: 110% Georgia, “Times New Roman”, Times, serif;
color: #2A4F6F;
background-color: transparent;
border-bottom: 1px dotted #cccccc;
}
#content {
margin-left: 16em;
margin-right: 2em;
margin-bottom: 3em;
}
h1 {
font: 150% Georgia, “Times New Roman”, Times, serif;
}
#content p {
font-size: 80%;
line-height: 1.6em;
padding-left: 1.2em;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px dotted #AAAAAA;
background-color: #CCCCCC;
color: #626262;
font-size: 70%;
}
#footer p {
margin: 0.5em 0 1em 2em;
padding: 0;
}
 លំហាត់ទី១១​ ធ្វើយ៉ាងណាដើម្បី  បង្ហាញ រូប ដោយមិនប្រើ table
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>CSS photo album</title>
<meta http-equiv=”content-type”
content=”text/html; charset=iso-8859-1″ />
<link href=”gallery.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<ul id=”albumlist”>
<li><img src=”thumb1.jpg” alt=”Garlic” width=”180″ height=”130″
/>Garlic</li>
<li><img src=”thumb2.jpg” alt=”Muffin” width=”180″ height=”130″
/>Muffin</li>
<li><img src=”thumb3.jpg” alt=”tomato” width=”180″ height=”130″
/>Tomato</li>
<li><img src=”thumb4.jpg” alt=”chilli” width=”180″ height=”130″
/>Chilli</li>
<li><img src=”thumb5.jpg” alt=”pear” width=”180″ height=”130″
/>Pear</li>
<li><img src=”thumb6.jpg” alt=”pepper” width=”180″ height=”130″
/>Pepper</li>
<li><img src=”thumb7.jpg” alt=”coffee beans” width=”180″
height=”130″ />Coffee Beans</li>
<li><img src=”thumb8.jpg” alt=”lime” width=”180″ height=”130″
/>Limes</li>
</ul>
</body>
</html>
body {
background-color: #FFFFFF;
color: #000000;
margin: 0;
padding: 0;
}
#albumlist {
list-style-type: none;
}
#albumlist li {
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
}
#albumlist img {
display: block;
border: 1px solid #333300;
}
a<ul id=”albumlist”>
<li><img src=”thumb1.jpg” alt=”Garlic” width=”180″ height=”130″
/>Garlic</li>
<li><img src=”thumb2.jpg” alt=”Muffin” width=”180″ height=”130″
/>Muffin</li>
<li><img src=”thumb3.jpg” alt=”tomato” width=”180″ height=”130″
/>Tomato</li>
<li><img src=”thumb4.jpg” alt=”chilli” width=”180″ height=”130″
/>Chilli</li>
<li><img src=”thumb5.jpg” alt=”pear” width=”180″ height=”130″
/>Pear</li>
<li><img src=”thumb6.jpg” alt=”pepper” width=”180″ height=”130″
/>Pepper</li>
<li><img src=”thumb7.jpg” alt=”coffee beans” width=”180″
height=”130″ />Coffee Beans</li>
<li><img src=”thumb8.jpg” alt=”lime” width=”180″ height=”130″
/>Limes</li>
</ul>
a#albumlist {
list-style-type: none;
}
#albumlist li {
float: left;
}
#albumlist img {
display: block;
}
a#albumlist li {
float: left;
margin-right: 6px;
margin-bottom: 10px;
font: bold 0.8em Arial, Helvetica, sans-serif;
color: #333333;
}
#albumlist img {
border: 1px solid #333300;
}
#albumlist {
list-style-type: none;
width: 500px;
}

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