先看一下效果图:
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>