用html5写一个导航栏,背景色为浅蓝色,字体为白色,鼠标悬停时背景色为深蓝色
时间: 2024-05-20 19:16:10 浏览: 12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<style type="text/css">
nav {
background-color: #87CEFA; /*浅蓝色*/
padding: 10px;
text-align: center;
}
nav a {
color: #fff; /*白色*/
font-size: 18px;
padding: 10px;
text-decoration: none;
}
nav a:hover {
background-color: #1E90FF; /*深蓝色*/
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">产品中心</a>
<a href="#">新闻动态</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
</body>
</html>
相关问题
用html5写一个状态栏,背景色为浅蓝色,字体为白色,状态栏里面有按钮,头条,娱乐,热点,体育,财经,科技
<!DOCTYPE html>
<html>
<head>
<title>状态栏</title>
<style>
.status-bar {
background-color: #4d4dff;
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px;
}
.status-bar button {
background-color: #fff;
color: #4d4dff;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.status-bar button:hover {
background-color: #4d4dff;
color: #fff;
}
</style>
</head>
<body>
<div class="status-bar">
<button>头条</button>
<button>娱乐</button>
<button>热点</button>
<button>体育</button>
<button>财经</button>
<button>科技</button>
</div>
</body>
</html>
HTML+CSS,构建一个左边栏,要求:含有十个元素,背景为灰色,鼠标悬停时,背景变为绿色。
可以使用HTML和CSS来构建一个左边栏,满足你的要求。以下是一个示例代码:
HTML代码:
```html
<div class="sidebar">
<ul>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
<li>元素4</li>
<li>元素5</li>
<li>元素6</li>
<li>元素7</li>
<li>元素8</li>
<li>元素9</li>
<li>元素10</li>
</ul>
</div>
```
CSS代码:
```css
.sidebar {
background-color: gray;
}
.sidebar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar li {
padding: 10px;
cursor: pointer;
}
.sidebar li:hover {
background-color: green;
}
```
这段代码创建了一个灰色背景的左边栏,并包含了十个元素。当鼠标悬停在元素上时,背景颜色会变为绿色。你可以根据需要进一步调整样式和内容。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)