Membina menu dengan CSS

Kesemuanya sangat senang, sekadar "copy & paste" sahaja dalam Dreamweaver. Tag-tag yang terlibat ialah h1, ul, dan li.

Sampel 1

Masukkan kod-kod ini dalam fail HTML biasa: File > New > HTML

<div id = "style1">
<h1>Laman Saya:</h1>
<ul>
<li><a href ="#">Utama</a></li>
<li><a href ="#">Profil</a></li>
<li><a href ="#">Hubungi</a></li>
</ul>

</div>

<div class = "content_box1">
Style 1: Isi Kandungan Di Sini
</div>

Kemudian, bina satu fail CSS yang baru: File New CSS Files.

Masukkan semua koding ini dalam fail tersebut.

#style1 {
font-family: Arial;
}

#style1 h1 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}

#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none;
}

#style1 li {
background-color: #FF9900;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
}

#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
}

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#style1 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
}

.content_box1 {
font-family: Arial;
font-size: 11px;
clear: left;
background-color: #FFFF91;
border: 1px solid #FF6600;
width: 720px;
padding: 15px;
} 

Sampel 2

Masukkan koding ini dalam fail HTML:

<div id = "style2">
<h1>Laman Saya:</h1>
<ul>
<li><a href ="#">Utama</a></li>
<li><a href ="#">Profil</a></li>
<li><a href ="#">Hubungi</a></li>
</ul>

</div>

<div class = "content_box2">
Style 2: Isi Kandungan Di Sini

</div>
 

Masukkan koding ini dalam fail CSS:

#style2 {
font-family: Arial;
} 

#style2 h1 {
font-size: 16px;
font-weight: bold;
background-color: #FF6600;
width: 120px;
padding: 5px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #BB4A00;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
margin: 10px 0px 0px 0px;
} 

#style2 ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
clear: left;
} 

#style2 li {
width: 130px;
font-size: 14px;
font-weight: bold;
background-color: #FF9900;
border-right: 1px solid #DF5900;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}

#style2 li a {
width: 120px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px;
}

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#style2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
} 

.content_box2 {
width: 586px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
float: left;
}