时间：2023-05-21 23:50:01 | 来源：网站运营
时间：2023-05-21 23:50:01 来源：网站运营
微信官网导航栏：本次所用到的背景图片images：
在线咨询
在刚才我们把滑动门原理了解后，趁热打铁，把微信官网导航栏制作下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微信导航栏</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } body { background: url(images/wx.jpg) repeat-x; } /*这个地方写错了 .nav { background: url(images/wx.jpg);*/ .nav a { display: inline-block; height: 33px; background: url(images/to.png) no-repeat; padding-left: 15px; font-size: 14px; line-height: 33px; color: #fff; } .nav a span { display: inline-block; height: 33px; background: url(images/to.png) no-repeat right; padding-right: 15px; } .nav ul li { float: left; padding: 0 5px; } .nav { margin-top: 20px; } </style></head><body> <div class="nav"> <ul> <li> <a href="#"> <span>首页</span> </a> </li> <li> <a href="#"> <span>帮助与反馈</span> </a> </li> <li> <a href="#"> <span>公众平台</span> </a> </li> <li> <a href="#"> <span>微信支付</span> </a> </li> <li> <a href="#"> <span>微信广告</span> </a> </li> <li> <a href="#"> <span>企业微信</span> </a> </li> <li> <a href="#"> <span>微信开放平台</span> </a> </li> <li> <a href="#"> <span>微信网页版</span> </a> </li> </ul> </div></body></html>效果：.nav a:hover { background: url(images/ao.png); } .nav a:hover span { background: url(images/ao.png) right; } 关键词：导航
