网页页面导航栏上用CSS标示当今页实际效果

2021-03-16 05:25 jianzhan

  当今网页页面--例如说如今的网页页面是主页,那末在导航栏栏上主页的颜色等和别的栏目有一定的不一样,用以给访问者1个显著的标示。下面来讲下实际的做法,菜单的基础完成和1般的CSS菜单没多大差别,侧重说下怎样完成当今页。
  设菜单有5个栏目:home、about、products、services、contact,各自给每一个栏目1 个ID,m1-m5,CSS可写成以下:
#home#navli#m1a,
#about#navli#m2a,
#products#navli#m3a,
#services#navli#m4a,
#contact#navli#m5a{color:#FFF;background:#DC4E1Burl(navbg.gif)no-repeat;}
  xhtml:
<ulid="nav">
<liid="m1"><ahref="index.html">Home</a></li>
<liid="m2"><ahref="about.html">About</a></li>
<liid="m3"><ahref="products.html">Products</a></li>
<liid="m4"><ahref="services.html">Services</a></li>
<liid="m5"><ahref="contact.html">Contact</a></li>
</ul>

  随后各自给每一个网页页面的bady标识1个单独的ID,比如给主页的ID是home,其余的类推 。
  这样做法的益处是每一个网页页面的菜单全是1样的,便捷改动,动态性页包括也非常容易。