查看: 273|回复: 0

[DIV/CSS] HTML+CSS技术实现网页滑动门效果

发表于 2018-1-1 08:00:00

一、什么是滑动门

大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。

小米官网,网页滑动门效果

二、实现滑动门所需技术

  1. 简单HTML基础知识
  2. 简单的CSS基础样式
  3. CSS定位

三、如何实现滑动门
1.准备好一段html代码

  1. <div class="bg">
  2. <ul>
  3. <li>
  4. <a href="#">手机 电话卡</a>
  5. <div class="div1">
  6. <p>这是我的第一个滑动门</p>
  7. <img src="img/海贼.jpg" alt="" width="100%" height="100%">
  8. </div>
  9. </li>
  10. <li>
  11. <a href="#">手机 电话卡</a>
  12. <div class="div2"></div>
  13. </li>
  14. <li>
  15. <a href="#">手机 电话卡</a>
  16. <div class="div3"></div>
  17. </li>
  18. <li>
  19. <a href="#">手机 电话卡</a>
  20. <div class="div3"></div>
  21. </li>
  22. </ul>
  23. </div>
复制代码

  

2.给当前HTML结构添加一些样式

  1. <style>
  2. body,ul,li,div{
  3. margin:0;
  4. padding:0;
  5. }
  6. ul{
  7. list-style: none;
  8. padding:20px 0px;
  9. width: 234px;
  10. background: rgba(0,0,0,.6);
  11. /*定位 作为父级使用*/
  12. position: relative;
  13. }
  14. ul li{
  15. height: 42px;
  16. line-height: 42px;
  17. padding-left: 20px;
  18. }
  19. ul li:hover{
  20. background: #ff6700;
  21. }
  22. ul li a{
  23. color: #fff;
  24. text-decoration: none;
  25. font-size: 14px;
  26. }
  27. </style>
复制代码

  

3.使用定位实现滑动门效果

  1. /*滑动门*/
  2. ul .div1,.div2,.div3{
  3. width: 800px;
  4. height: 460px;
  5. background: skyblue;
  6. /*使用定位实现滑动门-------重要步骤*/
  7. /*上海尚学堂java
  8. 加薇心 java8733 了解更多获取资料
  9. */
  10. position: absolute;
  11. top:0;
  12. left:234px;
  13. display: none;
  14. }
  15. /*当鼠标悬停在内容上是显示对应的代码块*/
  16. ul li:hover .div1{
  17. display: block;
  18. width:800px;
  19. opacity: 1;
  20. }
  21. ul li:hover .div2{
  22. display: block;
  23. background: pink;
  24. width:600px;
  25. height: 460px;
  26. }
复制代码

  

根据上面步骤,就可以实现简单的滑动门效果,快去试试吧。

四、滑动门实例
下面这个实例作为课下作业,详情请参考上海尚学堂官网http://www.shsxt.com/



回复

使用道具 举报