zoukankan      html  css  js  c++  java
  • 2019.7.11相框的制作

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    .photo{
    700px;
    height: 400px;
    margin: 20px auto;
    background-color: #f79090;
    }
    .maxPic{
    500px;
    height: 300px;
    border: 10px dotted #fff;
    background-color: #7eccf9;
    margin: 0 20px;
    overflow:hidden;
    float: left;

    }
    .maxPic img{
    500px;
    height: 300px;
    }

    .minPic{
    90px;
    height: 300px;
    border: 10px solid #fff;
    overflow-y: auto;
    float: left;
    }
    .minPic img{
    80px;
    height: 60px;
    }
    .maxPic,.minPic{
    /*float: left;*/
    }
    </style>
    </head>
    <body>
    <div class="photo">
    <h1>电子相册</h1>
    <div class="maxPic">
    <img src="img/pic01.jpg" id="img01" />
    <img src="img/pic02.jpg" id="img02"/>
    <img src="img/pic03.jpg" id="img03"/>
    <img src="img/pic04.jpg" id="img04"/>
    <img src="img/pic05.jpg" id="img05"/>
    <img src="img/pic06.jpg" id="img06"/>
    <img src="img/pic07.jpg" id="img07"/>
    </div>
    <div class="minPic">
    <a href="#img01"><img src="img/pic01.jpg" /></a>
    <a href="#img02"><img src="img/pic02.jpg" /></a>
    <a href="#img03"><img src="img/pic03.jpg" /></a>
    <a href="#img04"><img src="img/pic04.jpg" /></a>
    <a href="#img05"><img src="img/pic05.jpg" /></a>
    <a href="#img06"><img src="img/pic06.jpg" /></a>
    <a href="#img07"><img src="img/pic07.jpg" /></a>
    </div>
    </div>
    </body>
    </html>

    分析

    重要元素:

    overflow:hidden 隐藏

    overflow-y:auto 纵向排列

    <a href=#id值></a>设置锚点,要让所链接的id为id值

    float 浮动,脱离文档流,一般让块级元素变为行内元素 使用后记得用clear清除

    定位

    相对定位
    元素不会脱离文档流 元素原有的位置会保留
    以自身的位置为目标做较小的偏移
    适用场合:实现元素微调的时候
    /*position: relative;
    top: 50px;
    left: 50px;*/

    绝对定位
    元素脱离文档流 不占据页面的空间
    元素相对于它最近的已定位的祖先元素实现位置的初始化;
    如果没有已经定位的祖先元素,那么元素会相对于body或者是html最大的祖先元素实现位置的初始化
    已定位:position的属性值设置为:relative absolute fixed
    绝对定位的一些影响
    绝对定位的元素变成块级元素
    绝对定位的元素可以使用margin,但是auto会失效

    固定定位
    作用;将元素固定在页面可视区的某个位置处,不会随着滚动条变化而移动
    固定定位的元素会脱离文档流
    固定定位的元素会变成块级元素
    固定定位永远是相对于body实现定位

    元素覆盖

    z-index:值  值越大,越在上,设置负数则在最下面

  • 相关阅读:
    KDrive 與 Embedded Linux
    windows内存管理初探
    开源方案
    boot time 优化
    psplash
    linux下操纵大于2G文件
    【技术贴】Windows图片和传真查看器打开图片慢,正在生成预览的解决办法!
    【转】c++.primer.plus.第五版.中文版[下载]
    【技术贴】魂斗罗坦克Normal Tanks第五关以及第5、6、7、关的LICENCE CODE的查
    【转】奇文共欣赏,疑义相与析:原文转载《电脑维护技巧》(N条举措N条理由)并请大家交流研讨
  • 原文地址:https://www.cnblogs.com/awei313558147/p/11180959.html
Copyright © 2011-2022 走看看