CSS,HTML,CSS用标签ul，li制作导航栏示例源码
CSS用标签<ul><li>制作导航栏示例源码
如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="UTF-8">
<title>标题</title>
<style>
<div style="heigth:400px">sssss</div> ul {
list-style: none;
display: inline-block;
padding-left: 0;
}
li {
display: inline-block;
width: 140px;
heigth: 51px;
text-align: center;
line-height: 51px;
}
div.logo {
width: 160px;
height: 51px;
background: url(logo.png);
display: inline-block;
margin-right: 10%;
}
div.logo,
ul {
vertical-align: middle;
}
li:hover {
color: white;
background-color: #11278a;
cursor: pointer;
font-weight: bold;
}
body,
ul {
margin: 0;
}
li:nth-child(1) {
background-color: #11278a;
color: white;
font-weight: bold;
}
header {
height: 55px;
padding-bottom: 2px;
border-bottom: 1px solid #e3e3e3;
}
nav {
display: inline-block;
}
</style>
</head>
<body>
<header>
<div></div>
<nav>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>vueJs</li>
<li>AngularJs</li>
<li>More...</li>
</ul>
</nav>
</header>
</body>
</html>
来源忘了是哪了！
Tag: CSS HTML