诗雨远方的博客

需要的是思想,不是形式。 贵州中测信息技术有限公司 www.iwiteks.com

常用css(个人使用)
常用css(个人使用)

    最近写前端,感觉有些css比较固定,关于布局使用主流flex布局基本可以解决一切主流布局,让布局在是困扰,现在主要是想记录一些自己常用的css。若后面遇到会持续添加呢。

1、vue div绑定背景图片

:style="{backgroundImage:`url(${imgUrl})`}"

2.div绑定背景图片图片缩放不拉伸

 width: 60px
 height 61px
 background-size: cover
 background-repeat: no-repeat

3、P标签隐藏2行

p {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
  }

4、div绝对布局并水平居中,即是让一个小div进行水平居中

.categaryPublish {
    z-index: 999;
    width: 50px;
    height: 50px;
    bottom: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

5、div加下边框线

  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4

6、给一个div加上蒙层

.bg {
          height: 100%;
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
 }

7、一个常用按钮样式

button修饰

.btn {
        color: $color-text-2;
        width: 70px;
        height: 33px;
        border: solid 1px #E0E0E0;
        border-radius 3px
        background-color: #fff;
        &:focus {
          outline: none
        }
      }

或者对div进行修饰

.settingButton {
     color: white;
    width: 57px;
     height: 29px;
    border: solid 1px #E0E0E0;
    border-radius 25px
     background-color: #CED5DC;
     &:focus {
     outline: none
     }
}

8、div加上阴影效果,box-shaow用法

box-shadow: 0px 0px 15px #C5C5C5;


9、线 hr

.hrline {

  height:1px;border:none;solid #E4E4E4;
}


10、Git几种颜色表示

1、红色:表示没有提交到本地git仓库
2、绿色:表示本地仓库有而服务器上没有
3、蓝色:表示被修改过


若后面遇到会持续添加,自己做笔记用,哈哈

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013144287/article/details/80328439
文章标签: css 笔记 记录
个人分类: html+js+jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

常用css(个人使用)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭