现在我做的效果是这样
但是我现在想要的效果是这样
CSS代码如下
[img=http:/
a{ color:#FFFFFF; text-decoration:none;} a:hover{ background-color:#F71469; text-decoration:none;background-image:none;} .mainNav{background:#ff478c; font-size:18px; height:45px; line-height:12px; overflow:hidden;} .mainNav ul{list-style:none; list-style-position:outside; list-style-image:none;} .mainNav ul li{ float:left;} .mainNav ul li a{padding:0 30px; text-decoration:none; text-align:center;}<body> <div class="mainNav"> <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> <li><a href="#">瘦身</a></li> <li><a href="#">星座</a></li> </ul> </div></body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> a{ color:#FFFFFF; text-decoration:none;} a:hover{ background-color:#F71469; text-decoration:none;background-image:none;} .mainNav{background:#ff478c; font-size:18px; height:45px; overflow:hidden;padding-left:20px;} .mainNav ul{list-style:none; list-style-position:outside; list-style-image:none; margin:0;padding:0;} .mainNav ul li{ float:left;} .mainNav ul li a{padding:0 30px; text-decoration:none; text-align:center; display:block;line-height:45px;height:45px;}</style></head><body><div class="mainNav"> <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> <li><a href="#">瘦身</a></li> <li><a href="#">星座</a></li> </ul> </div></body></html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
