zoukankan      html  css  js  c++  java
  • 美女画册

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    body {
    font-family: "Helvetica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
    }
    h1 {
    color: #333;
    background-color: transparent;
    }
    a {
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
    }
    ul {
    padding: 0;
    }
    li {
    float: left;
    padding: 1em;
    list-style: none;
    }
    #imagegallery {
    }

    #imagegallery a {
    margin: 0px 20px 20px 0px;
    padding: 0px;
    display: inline;
    }

    #imagegallery a img {
    border: 0;
    }
    </style>
    </head>
    <body>
    <h2>
    美女画廊
    </h2>

    <div id="imagegallery">
    <a href="images/1.jpg" title="美女A">
      <img src="images/1-small.jpg" width="100px" alt="美女1" />
    </a>
    <a href="images/2.jpg" title="美女B">
      <img src="images/2-small.jpg" width="100px" alt="美女2" />
    </a>
    <a href="images/3.jpg" title="美女C">
      <img src="images/3-small.jpg" width="100px" alt="美女3" />
    </a>
    <a href="images/4.jpg" title="美女D">
      <img src="images/4-small.jpg" width="100px" alt="美女4" />
    </a>
    </div>

    <div style="clear:both"></div>

    <img id="image" src="images/placeholder.png" alt="" width="450px" />

    <p id="des">选择一个图片</p>
    <script>
      var imagegallery = document.getElementById("imagegallery");
      var link = imagegallery.getElementsByTagName("a");
      var imgs = document.getElementById("image");
      var des = document.getElementById("des");
      for (let i = 0; i < link.length; i++){
        link[i].onclick = function (){
        imgs.src = this.href;
        des.innerHTML = this.title;
        return false; //取消a标签的默认行为
      }
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    Task 5.1 电梯调度程序需求调研报告
    Task 4 求数组的连续子数组的最大和(团队合作)
    class 3 求数组中的最大值(单元测试)
    《你的灯亮着吗》读书笔记3
    优惠购书
    校友聊NABCD
    环状二维数组(改进版)
    环状二维数组
    环状一维数组
    二维数组最大值
  • 原文地址:https://www.cnblogs.com/pxxdbk/p/12568396.html
Copyright © 2011-2022 走看看