Buat markup sederhana merepresentasikan relasi parent (elemen ul dengan class nav) dan child (elemen li) serta menampilkan button nav.
<!DOCTYPE html><html>
<head>
<title>Flexbox</title>
</head>
<body>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</body>
</html>
Sebelumnya, tambahkan sedikit tampilan css3 untuk memvisualisasikan dengan jelas apa yang ingin kita pelajari kali ini.
/* // Style overall ------------------------*/
* {
box-sizing: border-box;
}
body {
margin: 40px 0;
background: #203542;
font-size: 1.3em;
font-family: helvetica,sans-serif;
}
.nav {
margin: 0 auto;
padding: 20px;
width: 80%;
border: 2px solid #1d2e3a;
border-radius: 10px;
background: #156596;
list-style-type: none;
}
li {
margin: 10px;
border-radius: 10px;
background: #FFB70F;
color: #858585;
color: #203542;
}
.nav a {
display: block;
padding: 15px;
color: inherit;
text-decoration: none;
font-weight:bold;
}
dan hasilnya seperti yang kita harapkan, beberapa segi empat yang tersusun secara vertikal ke bawah membentuk list.
Hasil
* {
box-sizing: border-box;
}
body {
margin: 40px 0;
background: #203542;
font-size: 1.3em;
font-family: helvetica,sans-serif;
}
.nav {
margin: 0 auto;
padding: 20px;
width: 80%;
border: 2px solid #1d2e3a;
border-radius: 10px;
background: #156596;
list-style-type: none;
}
li {
margin: 10px;
border-radius: 10px;
background: #FFB70F;
color: #858585;
color: #203542;
}
.nav a {
display: block;
padding: 15px;
color: inherit;
text-decoration: none;
font-weight:bold;
}
dan hasilnya seperti yang kita harapkan, beberapa segi empat yang tersusun secara vertikal ke bawah membentuk list.
Hasil
Postingan
0 komentar:
Posting Komentar