在主页顶部Logo下的紫色条上加入四个导航链接:首页、关于我们、产品和联系我们,颜色、大小、字体均自定义。首页链接到index.html,其它链接地址为名称的首字母.html,如关于我们链接到gywm.Html(不存在的网页需要进行创建);dw代码
时间: 2024-01-24 09:17:54 浏览: 110
<header>
<div class="logo">
<img src="images/logo.png" alt="Logo">
</div>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="gywm.html">关于我们</a></li>
<li><a href="cp.html">产品</a></li>
<li><a href="lxwm.html">联系我们</a></li>
</ul>
</nav>
</header>
<style>
header {
background-color: #6C3483;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.logo img {
height: 40px;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-right: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
nav ul li a {
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding: 10px;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
nav ul li a:hover {
background-color: #FFFFFF;
color: #6C3483;
}
</style>
阅读全文