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>

  • 相关阅读:
    hihoCoder #1176 : 欧拉路·一 (简单)
    228 Summary Ranges 汇总区间
    227 Basic Calculator II 基本计算器II
    226 Invert Binary Tree 翻转二叉树
    225 Implement Stack using Queues 队列实现栈
    224 Basic Calculator 基本计算器
    223 Rectangle Area 矩形面积
    222 Count Complete Tree Nodes 完全二叉树的节点个数
    221 Maximal Square 最大正方形
    220 Contains Duplicate III 存在重复 III
  • 原文地址:https://www.cnblogs.com/pxxdbk/p/12568396.html
Copyright © 2011-2022 走看看