HTML5/CSS
W3Schools CSS Navigation Bar Tutorial
MorningPhys
2015. 8. 4. 09:22
출처 : http://www.w3schools.com/css/css_navbar.asp
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
Example
|
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type:none;
margin: 0;
padding: 0;
}
li {
float:left; // li 목록을 수평화 한다.
}
a:link, a:visited {
display: block;
width: 120px;
background-color: yellowgreen;
color: white;
text-decoration: none;
text-align: center;
font-weight: bold;
text-transform: upppercase;
padding: 5px;
}
a:hover, active {
background-color: green
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html> |
Else CSS
|
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style> |