• 一些css杂项笔记


    div[class*="col-"]{

      background-color: gold;

      border: 1px solid #ccc;

    }

    //给class开头等于col-的div添加样式;

    <div class="col-lg-5 col-md-5 hidden-sm hidden-xs">

      <img src="images/perion.png" class="img-responsive">

    </div>

    //bootstrap的hidden-sm hidden-xs:在sm、xs的尺寸下隐藏;

    .list-item{

      height: 112px;

      padding-left: 138px;

      background: url(../images/icons.png) left top no-repeat;

      margin-bottom: 39px;

      overflow: hidden;

    }

    //这里用overflow:hidden来消除margin-top的塌陷??
    //有没有碰到过margin-top的塌陷问题?
    //原理是怎么的?
     
    .case-list .col-lg-3 .mask{
      position: absolute;
      left: 0;
      top: 0;
       100%;
      height: 100%;
      background-color: #ccc;
      color: #fff;
      padding: 10px;
      display: none;
    }
    .case-list .col-lg-3:hover .mask{
      display: block;
    }
    //展示在图片上遮罩; 绝对定位,相对父级100%; 平时不显示;鼠标放在父级上显示这个遮罩;
     
    <div class="container-fluid">
      <div class="container">
      </div>
    </div>
    //container被包在container-fluid里面;外面包裹宽度是100%;里面是固定宽度;
     
    css相邻兄弟选择器:
    可选择紧接在另一元素后的元素,且二者有相同的父元素;
    如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
    h1 + p {
      margin-top: 5px;
    }
     
     
  • 相关阅读:
    Vue项目搭建及原理三
    Vue项目搭建及原理一
    JS Cookie丢失问题
    1027 Colors in Mars
    1028 List Sorting
    1029 Median
    1030 Travel Plan
    1031 Hello World for U
    1032 Sharing
    1033 To Fill or Not to Fill
  • 原文地址:https://www.cnblogs.com/tenWood/p/6486280.html
Copyright © 2020-2023  润新知