zoukankan      html  css  js  c++  java
  • 面试题目积累

    一、css部分

    1.如何实现sticky footer布局;

    http://www.open-open.com/lib/view/open1487572092207.html

    2.、如何实现一行文本太多的时候适用省略号

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

    3、如何实现背景图片的滤镜和模糊效果

    可以给背景设置为透明度,来实现滤镜

    background:rgba(7,17,27,.4);

    同时添加一张绝对定位的图片,利用index属性使得其置于底层 

        .bg-img {
            filter: blur(10px);
            position: absolute;
             100%;
            height:100%;
            top: 0;
            left: 0; 
            z-index: -1;
        }

    4、移动布局中的dpr问题,如何实现1像素边框

    (利用媒体查询,after伪类,以及transform:scale属性)

    @mixin border-1px($color) {
        position: relative;
        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
             100%;
            border-bottom: 1px solid $color;
        }
    }
    @media(-webkit-min-device-pixel-ratio:1.5),
    (min-device-pixel-ratio:1.5) {
        .border-1px {
            &:after {
                transform: scaleY(0.7);
            }
        }
    }
    
    @media(-webkit-min-device-pixel-ratio:2),
    (min-device-pixel-ratio:2) {
        .border-1px {
            &:after {
                transform: scaleY(0.5);
            }
        }
    }
  • 相关阅读:
    迭代器,生成器的理解
    需求
    关于dom 0级 2级 3级事件的理解
    夯实前端基础
    前端面试题 收集
    前端易忘点,持续更新
    form target 文件上传
    ES6 symbol
    bzoj1260 [CQOI2007]涂色paint
    bzoj1083 [SCOI2005]繁忙的都市
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/6607763.html
Copyright © 2011-2022 走看看