纯CSS滑动门页面切换效果

最新推荐文章于 2024-08-05 14:55:17 发布

diaochourou0502

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量139

点赞数

原文链接：http://www.cnblogs.com/hm21/archive/2012/09/20/2695129.html

版权

需要切换的页面body中加

<body id="onn_1">,<body id="onn_2">,<body id="onn_3">,<body id="onn_4">,

切换的菜单里加

<ul>
  <li><a href=“/”  id=“on_1”><span>网站首页</span></a></li>
  <li><a  href=“/About” id=“on_2”><span>公司简介</span></a></li>
  <li><a href=“/News”  id=“on_3”><span>新闻资讯</span></a></li>
  <li><a href=“/Product”  id=“on_4”><span>产品中心</span></a></li>
  <li><a  href=“/Job” id=“on_5”><span>人才招聘</span></a></li>
  <li><a href=“/Rongyu” id=“on_6”><span>荣誉资质</span></a></li>
  <li><a href=“/Contact” id=“on_7”><span>联系我们</span></a></li>
</ul>

Css

#onn_1 #on_1{background:red;width:100px;height:41px;display:block;}
#onn_2 #on_2{display:block;}
#onn_3 #on_3{display:block;}
#onn_4 #on_4{display:block;}
#onn_5 #on_5{display:block;}
#onn_6 #on_6{display:block;}
#onn_7 #on_7{display:block;}