zoukankan      html  css  js  c++  java
  • CSS的图片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; gb2312" />
    <title>A simple CSS photo-album</title>

    <style type="text/css">
    /* default link style - needed to make the :active work correctly in IE */
    a, a:visited, a:hover, a:active {
    color:#000;
    }
    /* style the outer cntaining div to fit the landscape, portrait and buttons */
    #album {
    320px;
    height:360px;
    background:#eee;
    border:1px solid #aaa;
    margin:0 auto;
    }
    /* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
    .gallery {
    padding:0;
    margin:320px 0 0 0;
    list-style-type:none;
    position:relative;
    320px;
    }
    /* remove the default image border */
    .gallery img {
    border:0;
    }
    /* make the list horizontal */
    .gallery li {
    float:left;
    }
    /* style the link text to be central in a surrounding box */
    .gallery li a, .gallery li a:visited {
    font-size:11px;
    float:left;
    text-decoration:none;
    color:#000;
    background:#fff;
    text-align:center;
    26px;
    height:26px;
    line-height:24px;
    border:1px solid #444;
    margin:2px;
    }
    /* position the images using an absolute position and hide them from view */
    .gallery li a img {
    position:absolute;
    top:-320px;
    left:0;
    visibility:hidden;
    border:0;
    }
    /* fix the top position for the landscape images */
    .gallery li a img.landscape {
    top:-280px;
    }
    /* fix the left position for the portrait images */
    .gallery li a img.portrait {
    left:40px;
    }
    /* style the hover background color for the text boxes */
    .gallery li a:hover {
    background:#ddd;
    }
    /* style the active/focus colors for the text boxes (required for IE) */
    .gallery li a:active, .gallery li a:focus {
    background:#444;
    color:#fff;
    }
    /* make the images visible on active/focus */
    .gallery li a:active img, .gallery li a:focus img {
    visibility:visible;
    }
    </style>

    </head>

    <body>

    <div id="info">


    <div id="album">
    <ul class="gallery">
    <li><a href="#nogo">01<img class="landscape" src="landscape_1.jpg" alt="landscape image 1" title="landscape image 1" /></a></li>
    <li><a href="#nogo">02<img class="landscape" src="landscape_2.jpg" alt="landscape image 2" title="landscape image 2" /></a></li>
    <li><a href="#nogo">03<img class="portrait" src="portrait_1.jpg" alt="portrait image 1" title="portrait image 1" /></a></li>
    <li><a href="#nogo">04<img class="portrait" src="portrait_2.jpg" alt="portrait image 2" title="portrait image 2" /></a></li>
    <li><a href="#nogo">05<img class="landscape" src="landscape_3.jpg" alt="landscape image 3" title="landscape image 3" /></a></li>
    <li><a href="#nogo">06<img class="portrait" src="portrait_3.jpg" alt="portrait image 3" title="portrait image 3" /></a></li>
    <li><a href="#nogo">07<img class="landscape" src="landscape_4.jpg" alt="landscape image 4" title="landscape image 4" /></a></li>
    <li><a href="#nogo">08<img class="landscape" src="landscape_5.jpg" alt="landscape image 5" title="landscape image 5" /></a></li>
    <li><a href="#nogo">09<img class="portrait" src="portrait_4.jpg" alt="portrait image 4" title="portrait image 4" /></a></li>
    <li><a href="#nogo">10<img class="portrait" src="portrait_5.jpg" alt="portrait image 5" title="portrait image 5" /></a></li>
    </ul>
    </div>

    </body>
    </html>

  • 相关阅读:
    JDBC 复习4 批量执行SQL
    JDBC 复习3 存取Oracle大数据 clob blob
    Oracle复习
    Linux命令(1)grep
    JDBC 复习2 存取mysql 大数据
    JDBC 复习1 DBUtil
    php 环境搭建问题
    Windows 批处理 bat 开启 WiFi 菜单选项 设置ID PWD
    Bat 批处理启动和停止Oracle 服务
    docker 学习1 WSL docker ,Windows docker
  • 原文地址:https://www.cnblogs.com/MaxIE/p/529164.html
Copyright © 2011-2022 走看看