<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigation bar</title>
<style type="text/css">
nav{
background-color: #fff;
text-align: left;
height:45px;
/* border: 2px solid grey;*/
}
img{
vertical-align: middle;
padding-left: 30px;
padding-right: 50px;
}
a{
text-decoration: none;
color: black;
font-family:"Microsoft YaHei";
padding: 15px 10px;
font-size: 14px;
}
a:hover{
color: #63B8FF;
border-bottom: 3px solid #63B8FF;
}
.search{
width: 160px;
margin: 0px 10px 0px 30px;
}
.main{
background-color: #EEEED1;
height: 1000px;
}
</style>
</head>
<body>
<nav>
<img src="images/diyicaijing.jpg" width="90px" height="40px">
<a href="#">东方财富</a>|
<a href="#">第一财经</a>|
<a href="#">同花顺财经</a>|
<a href="#">财联社</a>|
<a href="#">股票入门基础</a>|
<a href="#">财经杂志</a>|
<a href="#">创业邦</a>|
<a href="#">润泽财经</a>
<input type="text" class="search" placeholder="请输入关键字">
<a href=""><img src="images/userIcon.png" width="18px" height="18px"></a>
</nav>
<div class="main"></div>
</body>
</html>
仿第一财经导航栏HTML+CSS简单示例
最新推荐文章于 2021-01-27 16:29:12 发布