html+css顶部导航
时间: 2023-11-26 21:48:19 浏览: 35
以下是一个简单的HTML和CSS实现顶部导航栏的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>顶部导航栏</title>
<style>
/* 设置导航栏样式 */
nav {
background-color: #333;
overflow: hidden;
}
/* 设置导航栏链接样式 */
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 设置鼠标悬停链接样式 */
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
</nav>
</body>
</html>
```
在上面的例子中,我们使用了`<nav>`标签来定义导航栏,使用CSS设置了导航栏和链接的样式。通过设置`float`属性,我们使链接在导航栏中水平排列。当鼠标悬停在链接上时,我们使用`:hover`伪类设置了链接的背景色和文字颜色。
相关问题
html+css侧边导航栏
HTML和CSS侧边导航栏示例:
HTML代码:
```
<div class="sidenav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
</div>
```
CSS代码:
```
/* 设置侧边导航栏样式 */
.sidenav {
height: 100%; /* 设置高度为100% */
width: 200px; /* 设置宽度为200px */
position: fixed; /* 设置固定定位 */
z-index: 1; /* 设置z-index为1 */
top: 0; /* 设置顶部为0 */
left: 0; /* 设置左侧为0 */
background-color: #f5f5f5; /* 设置背景色为灰色 */
overflow-x: hidden; /* 设置x轴溢出隐藏 */
padding-top: 20px; /* 设置上边距为20px */
}
/* 设置侧边导航栏链接样式 */
.sidenav a {
padding: 6px 8px 6px 16px; /* 设置内边距 */
text-decoration: none; /* 去除下划线 */
font-size: 20px; /* 设置字体大小为20px */
color: #000000; /* 设置字体颜色为黑色 */
display: block; /* 设置为块级元素 */
}
/* 设置鼠标悬停链接样式 */
.sidenav a:hover {
background-color: #555; /* 设置背景色为深灰色 */
color: #ffffff; /* 设置字体颜色为白色 */
}
```
效果如下图所示:
![侧边导航栏示例](https://i.loli.net/2021/04/08/ZU4fHx6bJz9iXWm.png)
html+css页面设计案例
以下是两个HTML+CSS页面设计案例:
1. 学生考试期末作业的水平
这个案例是给学生定制的,符合学生考试期末作业的水平。它采用DIV+CSS布局,共有多个页面,使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。有的页面还包含了一些JS效果,例如轮播图等。
2. HTML+CSS课程设计
这个案例是一套完整的HTML+CSS课程设计,包括一个主页以及六个子页面。它的制作精美良好,应付期末的网页课设或者期末大作业肯定是不成问题的。这个案例可以作为学习HTML+CSS的参考,可以从中学习到如何进行页面布局、如何使用CSS样式等。