课程思政学习网站首页要求有导航列表加css 样式代码实现
以下是一个简单的导航列表加CSS样式的代码实现示例:
HTML代码:
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">思政</a></li>
<li><a href="#">学习</a></li>
<li><a href="#">网站</a></li>
</ul>
</nav>
CSS代码:
nav {
background-color: #f2f2f2; /* 设置导航背景颜色 */
padding: 10px; /* 设置导航内边距 */
}
ul {
list-style: none; /* 去掉列表标记 */
margin: 0; /* 去掉列表外边距 */
padding: 0; /* 去掉列表内边距 */
}
li {
display: inline-block; /* 将列表项设置为行内块元素 */
margin-right: 20px; /* 设置列表项之间的右边距 */
}
a {
color: #333; /* 设置链接颜色 */
text-decoration: none; /* 去掉链接下划线 */
font-weight: bold; /* 设置链接字体加粗 */
}
a:hover {
color: #f00; /* 鼠标悬停时改变链接颜色 */
}
这段代码将会生成一个带有背景颜色、无列表标记、链接加粗且鼠标悬停时改变颜色的导航列表。您可以根据需要进行调整和修改
原文地址: https://www.cveoy.top/t/topic/g930 著作权归作者所有。请勿转载和采集!