Realizing the sliding door effect of web pages based on HTML+CSS-CSS Tutorial-php.cn

Realizing the sliding door effect of web pages based on HTML+CSS

不言

Release： 2018-06-05 15:01:59

Original

2867 people have browsed it

You often see such a navigation effect on web pages. Because of its widespread use, programmers have given it a name called sliding door. This article introduces to you how to realize the sliding door effect of web pages based on HTML CSS technology. Friends who need it can refer to it

, What is a sliding door

You often see such a navigation effect on web pages. Because of its widespread use, most programmers have given it a name called sliding door. .Before learning about sliding doors, you must first understand what sliding doors are.

Xiaomi official website, web sliding door effect

2. Technology required to realize sliding door

Simple HTML basics
Simple CSS basic styles
CSS positioning

3. How to implement a sliding door

1. Prepare a piece of HTML code

<p class="bg">
     <ul>
         <li>
             <a href="#">手机 电话卡</a>
             <p class="p1">
                 <p>这是我的第一个滑动门</p>
                 <img src="img/海贼.jpg" alt="" width="100%" height="100%">
             </p>
         </li>
         <li>
             <a href="#">手机 电话卡</a>
             <p class="p2"></p>
         </li>
         <li>
             <a href="#">手机 电话卡</a>
             <p class="p3"></p>
         </li>
         <li>
             <a href="#">手机 电话卡</a>
             <p class="p3"></p>
         </li>
     </ul>
 </p>

Copy after login

2. Add some styles to the current HTML structure

<style>
     body,ul,li,p{
         margin:0;
         padding:0;
     }
     ul{
         list-style: none;
         padding:20px 0px;
         width: 234px;
         background: rgba(0,0,0,.6);
/*定位 作为父级使用*/
         position: relative;
     }
     ul li{
         height: 42px;
         line-height: 42px;
         padding-left: 20px;
     }
     ul li:hover{
         background: #ff6700;
     }
     ul li a{
         color: #fff;
         text-decoration: none;
         font-size: 14px;
     }
 </style>

Copy after login

3. Use positioning to achieve the sliding door effect

/*滑动门*/
     ul .p1,.p2,.p3{
         width: 800px;
         height: 460px;
         background: skyblue;
/*使用定位实现滑动门-------重要步骤*/
 /*上海尚学堂java
加薇心 java8733 了解更多获取资料
*/
         position: absolute;
         top:0;
         left:234px;
         display: none;
     }
/*当鼠标悬停在内容上是显示对应的代码块*/
     ul li:hover .p1{
         display: block;
         width:800px;
         opacity: 1;
     }
     ul li:hover .p2{
         display: block;
         background: pink;
         width:600px;
         height: 460px;
     }

Copy after login

According to the above steps, you can achieve a simple sliding door effect, go and try it.

4. Sliding door example

The following example is used as homework. For details, please refer to the official website of Shanghai Shangxuetang http:/ /www.shsxt.com/

##Related recommendations:

css html implementation of a simple calendar

The above is the detailed content of Realizing the sliding door effect of web pages based on HTML+CSS. For more information, please follow other related articles on the PHP Chinese website!