标签css下的文章

admin 发布于 12月29, 2018

stylelint笔记

在github上有一个stylelint的账号:

alt

我们可以将其放到webpack中进行使用。

// webpack.config.js
const StyleLintPlugin = require("stylelint-webpack-plugin");

new StyleLintPlugin({
    context: "src",
    configFile: path.resolve(__dirname, "stylelint.config.js"),
    files: [
        '**/*.less',
        '**/*.scss'
    ],
    failOnError: false,
    quiet: true,
    // fix: true
})
// stylelint.config.js
module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    'color-no-invalid-hex': true,
    'string-quotes': 'single',
  },
};

eslint的用法其实是差不多的。

阅读全文 »

admin 发布于 09月25, 2018

footer始终居于底部的css方案

footer始终居于底部,这个其实还是比较容易的。。做法无非是body相对定位(搞一个最小高度100%),footer绝对定位。

好像没什么问题,然而比如页面做了一个弹出层,这时候footer会发生抖动,原因就是footer绝对定位,且给了一个宽度100%。

要解决也容易,就是给footer的模块,加两个监听事件:scrollOpenscrollClose。在open的时候,将它的宽度用100%减去滚动条的宽度,close的时候设置回来即可。

阅读全文 »

admin 发布于 03月20, 2018

css效果之尖角弧度

上周在写一个css效果时,碰到这样的图:

alt

alt

初看比较简单,下面不就是一个三角形么,然后让其透明即可。

设计师看了我的实现,说:不对,左右两边需要把尖角改成有弧度的。

阅读全文 »

admin 发布于 01月24, 2018

一些记录与吐嘈

最近处于懒散模式,可能是快放假了,所以产出方面就少了一些,其实最近也没啥可以总结的(在js方面),在css方面倒是有一些。。

这两周就差不多写了两个组件,一个是流程,一个是步骤条。

阅读全文 »

admin 发布于 09月14, 2017

记一个弹窗相关的css bug

去年写了一个modal,然后在整个部门都在用,虽然未来的发展是整个要变成react,但目前还是得沿用,所以在使用的过程中,难免会发现一些问题。

譬如垂直居中的问题:

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

看似没有问题,但其实还是有问题,主要是以下两个问题:

  • 在计算拖动位置的时候,最左边不是判断<0,而是判断小于弹层的一半,还有其他几个方向,也要做相应的处理(这个解决不是难事)
  • 自适应的弹窗,当宽度或者高度不是偶数时,字体会模糊。(暂时无解)

阅读全文 »

admin 发布于 04月18, 2017

dataTables简单使用

dataTables是一款jquery插件,据我同事的介绍,是jquery比较牛逼的一款插件。

因为dataTables的css这一块,和我们实际效果有出入,所以我就顺便兼职了写css。另外就是分页那一块的插件js编写。

实际效果图如下:

dataTables

阅读全文 »

admin 发布于 01月19, 2017

css两端对齐

这阵子因为部门没人,所以被拉去做一个金融项目。

这个项目没有使用react、vue等高大上的东西,因为要兼容IE8。所以就采用了jQuery以及其他的一些js插件。本想使用requirejs的,后来想想代码并不是太复杂,没必要引入模块管理器。

在写项目的过程中,由于很久没写css了,感觉手生的很。遇到下面的一个效果:

开户进度

实现上并不是太难,难的是如何等分。

于是跟css大师志爷请教了一篇,他发了我一个链接:别想多了,只不过是两端对齐而已

依样画葫芦,终于搞定。

<div class="process">
    <label>开户流程:</label>
    <div class="step">
        <div class="item">
            <i>1</i>上传影印件
        </div>
        <div class="item">
            <i>2</i>在线审核
        </div>
        <div class="item">
            <i>3</i>开户成功
        </div>
    </div>
</div>
.process label,
.process .step,
.process .step .item {
    display: inline-block;
    vertical-align: top;
}

.process .step {
    width: 500px;
    height: 24px;
    text-align: justify;
}

.process .step:after {
    content: "";
    display: inline-block;
    position: relative;
    width: 100%;
    height: 1px;
    top: -28px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    background-color: #ccc;
    z-index: -1;
}

.process .step .item {
    background: #fff;
    padding-left: 5px;
}

.process .step i{
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    font-style: normal;
    line-height: 16px;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    background-color: #bbb;
    color: #fff;
    margin-right: 5px;
}

阅读全文 »

admin 发布于 11月08, 2016

css简单气泡的实现

我们先来看一下效果图吧:

tip-arrow

这种效果,如果切图是相当简单的。当然这次我们希望是用css来实现。单独一层border是无法实现空心的箭头,所以我们需要有两层。可以简单地使用beforeafter两个伪类。

在实现具体效果前,我也搜索了一下,结果找到一篇好文:可自定义配置箭头的CSS3气泡提示框

基于它,我实现下面的scss版本:

@mixin tip-arrow($colorBg, $colorBorder, $size, $pos, $borderWidth: 1px) {
    position: relative;
    background: $colorBg;
    border: $colorBorder solid $borderWidth;
    &:before, &:after {
        @if $pos == "left" {
            right: 100%;
            top: 50%;
        }
        @if $pos == "right" {
            left: 100%;
            top: 50%;
        }
        @if $pos == "top" or (length($pos) == 2 and nth($pos, 1) == "top") {
            bottom: 100%;
            left: 50%;
        }
        @if (length($pos) == 2 and nth($pos, 1) == "top") and nth($pos, 2) >= 0 {
            left: nth($pos, 2) + ($size + round($borderWidth * 1.41421356));
        }
        @if (length($pos) == 2 and nth($pos, 1) == "top") and nth($pos, 2) < 0 {
            left: unquote("calc( 100% - #{($size + round($borderWidth * 1.41421356))} - #{abs(nth($pos, 2))} )");
        }
        @if $pos == "bottom" or (length($pos) == 2 and nth($pos, 1) == "bottom") {
            top: 100%;
            left: 50%;
        }
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-width: $size;
        @if $pos == "left" {
            border-right-color: $colorBg;
            margin-top: -$size;
        }
        @if $pos == "right" {
            border-left-color: $colorBg;
            margin-top: -$size;
        }
        @if $pos == "top" or (length($pos) == 2 and nth($pos, 1) == "top") {
            border-bottom-color: $colorBg;
            margin-left: -$size;
        }
        @if $pos == "bottom" or (length($pos) == 2 and nth($pos, 1) == "bottom") {
            border-top-color: $colorBg;
            margin-left: -$size;
        }
    }
    &:before {
        border-width: $size + round($borderWidth * 1.41421356);
        @if $pos == "left" {
            border-right-color: $colorBorder;
            margin-top: -($size + round($borderWidth * 1.41421356));
        }
        @if $pos == "right" {
            border-left-color: $colorBorder;
            margin-top: -($size + round($borderWidth * 1.41421356));
        }
        @if $pos == "top" or (length($pos) == 2 and nth($pos, 1) == "top") {
            border-bottom-color: $colorBorder;
            margin-left: -($size + round($borderWidth * 1.41421356));
        }
        @if $pos == "bottom" or (length($pos) == 2 and nth($pos, 1) == "bottom") {
            border-top-color: $colorBorder;
            margin-left: -($size + round($borderWidth * 1.41421356));
        }
    }
}

注意:上面的版本只实现了,上、下、左、右、左上、右上。左下和右下,未实现,但可以实现,只是我目前的需求里面不需要而已。

具体调用:

.dui-tip-arrow,
.dui-tip-error-arrow{
    font-size: 12px;
    display: inline-block;
    border-radius: 3px;
}

.dui-tip-arrow {
    padding: 8px 15px;
    border: #d2d2d3 solid 1px;
    &.dui-tip-left-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, left);
    }

    &.dui-tip-right-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, right);
    }

    &.dui-tip-top-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, top);
    }

    &.dui-tip-top-left-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, top 15px);
    }

    &.dui-tip-top-right-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, top -15px);
    }

    &.dui-tip-bottom-arrow {
        @include tip-arrow(#fff, #d2d2d3, 5px, bottom);
    }
}

.dui-tip-error-arrow {
    height: 18px;
    line-height: 18px;
    background: #ffa5a5;
    color: #fff;
    padding: 0 5px;
    display: inline-block;
    border: #ffa5a5 solid 1px;
    &.dui-tip-error-left {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, left);
    }

    &.dui-tip-error-right {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, right);
    }

    &.dui-tip-error-top {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, top);
    }

    &.dui-tip-error-bottom {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, bottom);
    }

    &.dui-tip-error-top-left {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, top 5px);
    }

    &.dui-tip-error-top-right {
        @include tip-arrow(#ffa5a5, #ffa5a5, 5px, top -5px);
    }

}

注,左上是通过top 5px,5px是指距离最左边顶点的距离。右上则是通过top -5px,负数代表它是右边,5px是指距离最右边顶点的距离。

有了这个玩意,那么将来遇到其他的气泡,就可以基于上面的代码做扩展了。

阅读全文 »

admin 发布于 10月11, 2016

div元素disabled

今天碰到了一个问题,是怎样某个下拉框(模拟)disabled的。

通常这种事情是组件提供方法,我只要调用它的disable方法即可。但因为这个组件,我一开始在写的时候,并没有将它考虑的非常全,导致无法快速搞定这个需求。

当然最好的方法是重新完善一下组件,然后提供API即可。但我是那种比较懒的人,所以就开始折腾一下,能不能通过其他的方式来搞定。

阅读全文 »