Den Schiebetüreffekt von Webseiten auf Basis von HTML+CSS realisieren

Einen solchen Navigationseffekt sieht man oft auf Webseiten. Programmierer haben ihm aufgrund seiner weiten Verbreitung den Namen „Slide Door“ gegeben. Dieser Artikel stellt Ihnen den Web-Schiebetüreffekt vor, der auf der HTML+CSS-Technologie basiert. Freunde, die ihn benötigen, können darauf verweisen

1. Was ist eine Schiebetür?

Aufgrund seiner weiten Verbreitung haben die meisten Programmierer ihm den Namen „Schiebetüren“ gegeben. Bevor Sie sich mit Schiebetüren vertraut machen, müssen Sie zunächst verstehen, was Schiebetüren sind.

Offizielle Website von Xiaomi, Web-Schiebetüreffekt

2. Technologie, die zur Realisierung einer Schiebetür erforderlich ist

1. Einfache HTML-Grundlagen

2. Einfache grundlegende CSS-Stile

3. CSS-Positionierung

3. So implementieren Sie eine Schiebetür

1. Bereiten Sie einen HTML-Code vor

2. Fügen Sie einige Stile zur aktuellen HTML-Struktur hinzu

<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>

3. Verwenden Sie die Positionierung, um die Schiebetür zu erreichen Effekt

<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>

Gemäß den oben genannten Schritten können Sie einen einfachen Schiebetüreffekt erzielen, probieren Sie es aus.

4. Beispiel einer Schiebetür

Das folgende Beispiel wird als Hausaufgabe verwendet. Weitere Informationen finden Sie auf der offiziellen Website von Shanghai Shangxuetang http://www.shsxt.com/

Verwandte Empfehlungen:

css+html zur Implementierung eines einfachen Kalenders

Das obige ist der detaillierte Inhalt vonDen Schiebetüreffekt von Webseiten auf Basis von HTML+CSS realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!