<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航条变色</title> <style> ul{ width: 680px; height: 32px; margin: auto; background: rgb(230,0,18); padding-left:1px; } ul>li{ display: block; float: left; font-size: 10px; text-align: center; height: 32px;
}ul>li>a{display: block;color: white;text-decoration: none;border-right:1px solid rgb(208,0,16);padding: 0px 20px 0px 20px;line-height: 15px;margin-top: 8px;}li:hover{background: white;border-top: 1px solid rgb(230,0,18);}a:hover{color: black;}</style>
</head>
<body> <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> <li><a href="#">产品设计</a></li> <li><a href="#">关于我们</a></li> </ul></body></html>
相关推荐
