zoukankan      html  css  js  c++  java
  • html幻灯效果页面

    方式一:

    <!DOCTYPE HTML>
    <html>
      <head>
      <style>
     
      #cont {
      position: relative;
      height: 300px;
      }
    img {
          position: absolute;
          width: 400px;
          height: 300px;
          z-index: 1;
        }
    img:first-child,
    img:target {
          z-index: 2;
        }
    
    #pag {
        width:400px;
    }
     
      </style>
      </head>
      <body>
      <div id="cont">
          <img id="img1" src="images/1.JPG">
          <img id="img2" src="images/2.JPG">
          <img id="img3" src="images/3.JPG">
          <img id="img4" src="images/4.JPG">
        </div>
        <div id="pag" align="center">
          <a href="#img1">1</a>
          <a href="#img2">2</a>
          <a href="#img3">3</a>
          <a href="#img4">4</a>
        </div>
      </body>
    </html>

    方式二:

    <!doctype html>
    <html>
      <head>
        <style>
        img {
          display: none;
          width: 400px;
          height: 300px;
        }
     
        input:checked + img {
          display: block;
        }
     
        input {
          position: absolute;
          left: -9999px;
        }
     
        label {
          cursor: pointer;
        }
        #pag{
            width:400px;
        }
        </style>
      </head>
      <body>
        <div id="cont">
          <input id="img1" name="img" type="radio" checked="checked">
          <img src="images/1.JPG">
          <input id="img2" name="img" type="radio">
          <img src="images/2.JPG">
          <input id="img3" name="img" type="radio" checked="checked">
          <img src="images/3.JPG">
          <input id="img4" name="img" type="radio">
          <img src="images/4.JPG">
        </div>
        <div id="pag" align="center">
          <label for="img1">1</label>
          <label for="img2">2</label>
          <label for="img3">3</label>
          <label for="img4">4</label>
        </div>
      </body>
    </html>

  • 相关阅读:
    【POJ2176】Folding
    【NOIP2018】赛道修建
    优雅的文本编辑器——Sublime Text 3的搭建与使用
    【NOIP2010】乌龟棋
    【POJ3585】Accumulation Degree
    【POJ3322】Bloxorz I
    python之路_常用模块介绍
    python之路_正则表达式及re模块
    python之路_内置函数及匿名函数
    python之路_递归函数及实例讲解
  • 原文地址:https://www.cnblogs.com/wishyouhappy/p/3724803.html
Copyright © 2011-2022 走看看