html/css - 메뉴바 만들기

2018. 4. 4. 21:42

<!DOCTYPE html>

<html>

<head>

<title>Portfolio</title>

<style>

/*reset*/

*{margin: 0px; padding: 0px;}

li{list-style: none;}

a{text-decoration: none;}

/*common*/

.wrapper{width: 1170px; margin: 0 auto;}

.clearfix{content: ''; display: block; clear: both;}

/*header*/

header{height: 75px; background-color: #006F84; border: 1px solid #253342;

positon: fixed; width: 100%; z-index: 9999; top: 0; left: 0;}

h1{color: white; line-height: 75px; float: left;}

.menu{float: right;}

.menu li{float: left;}

.menu a{line-height: 75px; color: white; padding: 0 15px; display: block;}

</style>

</head>

<body>

<h1>Portfolio</h1>

<nav>

<li><a href="#">about me</a></li>

<li><a href="#">photo</a></li>

</ul>

</nav>

</div>

</header>

</body>

</html>

출처: http://ironsky.tistory.com/21

h-elena