阅读 67

弹出框项目总结

遮罩层

  • html
<div id="mask"></div>
复制代码
  • css
#msak{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.7);
    z-index:7;
}
复制代码

宽、高要相等,然后边的圆角要设为50%;

<div><div>
复制代码
div{
    width:60px;
    height:60px;
    border-radius:50%;
}
复制代码

直角三角形

长、宽为0,设置两直角边的border值,分别为with,style和color。

<div><div>
复制代码
border-top:20px solid red;
border-left:20px solid transparent;
复制代码
  • 如果是其他形状的三角形,则需要设置三个边的值;
div{
    border-top:50px solid transparent;
    border-right:100px solid red;
    border-bottom:50px solid transparent;
}
复制代码

图片和文字水平居中

 div {
            width: 90px;
            height: 86px;
            border: 1px solid black;
            text-align: center;
        }

        div img {
            width: 50px;
            height: 50px;
        }

        div span {
            display: inline-block;
            width: 70px;
            height: 20px;
            overflow: hidden;
        }
复制代码
<div>
    <img src="xxxx" alt="">
    <span>xxxx</span>
</div>
复制代码

水平方向横向滚动

父元素的宽度设为auto,overflow-x设为auto,white-space设为nowrap。

ul{
    width:auto;
    overflow-x:auto;
    white-space:nowrap;
}
li{
    display:inline-block;
    width:90px;
    height:86px;
}

复制代码

竖直方向滚动条

父元素的height比内部子元素的高度小,且设置overflow为auto

div{
    height:360px;
    overflow:auto;
}
复制代码