本文介绍了一段HTML和CSS代码，展示了如何使用CSS实现一个响应式的网站导航栏，包括链接样式、鼠标悬停效果和整体布局。通过实例，读者可以了解如何运用HTML结构和CSS3技巧来创建专业级的导航菜单。
先看一下效果图：
HTML代码如下：
<body>
<div>
<a href="#">首页</a>
<a href="#">课程培训</a>
<a href="#">视频教程</a>
<a href="#">原创丛书</a>
<a href="#">企业合作</a>
<a href="#">认证考试</a>
<a href="#">项目库</a>
<a href="#">公开课</a>
<a href="#">自助服务</a>
<a href="#">关于我们</a>
</div>CSS代码
<style>
div {
width: 1000px; /* 宽度 */
height: 45px; /* 高度 */
background-color: #00dbde;
background-image: linear-gradient(
90deg,
#00dbde 0%,
#fc00ff 100%
); /* 背景颜色 */
margin-left: auto; /* 左外边距 */
margin-right: auto; /* 右外边距 */
margin-top: 100px; /* 外边距-高 */
box-shadow: 0px 5px 7px #696969; /* 阴影 */
}
a {
margin-left: 34px;
line-height: 45px; /* 行高 */
text-decoration: none; /* 去掉下划线 */
color: #ffffff; /* 文本颜色 */
}
a:hover {
font-weight: 700; /* 加粗 */
}
</style>
1265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
