用html css实现logo和导航栏
时间: 2024-05-31 14:07:16 浏览: 133
以下是一个简单的例子,实现了一个logo和导航栏:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Logo and Navigation Bar</title>
<style type="text/css">
/* 设置导航栏样式 */
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* 设置Logo样式 */
.logo {
background-image: url('https://www.example.com/logo.png');
background-size: contain;
background-repeat: no-repeat;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<!-- Logo -->
<div class="logo"></div>
</body>
</html>
```
CSS代码中设置了导航栏和Logo的样式,其中导航栏使用了`<nav>`标签,Logo使用了一个`<div>`标签,并设置了背景图片。在HTML代码中,导航栏和Logo分别被放置在`<nav>`和`<div>`标签中。
阅读全文