Belajar Membuat Menu Dengan Html dan CSS

Oke… selamat berjumpa dengan Kursus Komputer Naura kali saya akan membagikan tutorial belajar html dasar yaitu membuat menu website yang cantik menggunakan html dan css.untuk membuat menu tersebut anda bisa menggunakan notepad saja untuk editornya nah ada pun kodenya bisa anda copy paste dari kode di bawah ini :

 

 

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Belajar Membuat Menu Dengan Html dan Css Dari Kursus Komputer Naura</title>
<style>
body {
background-color: #808080;
font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, Verdana, sans-serif;
}

.wrapper {
width: 900px;
margin: auto;
}

.wrapper h1 {
color: #fff;
}

.menu:after, .menu:before {
margin-top:0.5em;
content: “”;
float:left;
border:1.5em solid orange;
}

.menu:after {
border-right-color:transparent;
}

.menu:before {
border-left-color:transparent;
}

.menu a:link, .menu a:visited {
color:#fff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}

.menu span {
background:orange;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;

-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}

.menu a:hover span {
background:#FFD204;
margin-top:0;
}

.menu span:before {
content: “”;
position:absolute;
top:3em;
left:0;
border-right:0.5em solid orange;
border-bottom:0.5em solid #F98889;
}

.menu span:after {
content: “”;
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #F98889;
}
</style>

</head>

<body>

belajar css dan html</body>
</html>

Jika sudah selesai simpan dengan nama index.html,biar lebih mudah di akses simpan di dekstop saja, lalu klik kanan open untuk melihat hasilnya.

Nah demikian postingan dari kursus komputer naura semoga bermanfaat ya

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s