CSS补充内容

如果有公共的插件就可以把他写在外面，以后要用到的时候就可以把class设置的和他一样，然后就具备了和他一样的功能

visibility:hidden隐藏并且占高度

visibility:visible显示（默认）

display:none 隐藏不占高度

clearfix:affter 以后需要飘起来的标签名后面都可以加这个clearfix 然后就有了它里面的功能了自带clear both功能

hover：鼠标移动上去时，自己样式发生变化

cursor：pointer 也是把鼠标变成手的样式

1、里面的内容也改变，也可以写成.ele:hover .ele-item{......}

上面那种方法应用之后会出现当鼠标移动上去之后整体浮动的效果，为了避免这种情况，可以在ele里面再加一个边框，颜色是透明的就可以了

2、对内容大小的要求：如果只设置div的宽和高，但是内容比较多的时候是不会被改变的。因为内容会把div给撑起来

当要硬性规定尺寸的时候就要设置overflow:hidden 把多余的内容隐藏起来

overflow：outo就会出现一个滚轮，可以上下滚动查看多余的内容

角标：利用边框互相遮挡的原理

可以把其他方向的边框设置成透明的，这样就剩下三角形的一边了

如果想要一半的三角形可以把一边设置成0 ，然后再把另外两个方向的颜色设置透明

正常显示向下的角标，鼠标移动上去之后显示向上的角标

注：块级标签margin-top是可以一直向上移动的甚至可以出了屏幕框，但是内联标签就不行了他到达某个位置的时候就移动不上去了

如果添加图片的时候最好给图片的边框设置成0，因为他默认会有边框在IE浏览器打开时就会看见边框，所以把边框设置成0就看不到了

如果对一个标签进行多次同样的操作，遵循就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            height:38px;
            background-color: #2459a2;
            text-align: center;
        }
        .pg-body .menu{
            position: absolute;
            width: 180px;
            background-color: bisque;
            left: 0;
        }
        .pg-body .con{
            position: absolute;
            top: 38px;
            left: 182px;
            right: 0;
            bottom: 0;
            background-color: lavender;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="menu">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
        <div class="con">
            <h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2>
            <h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2>
            <h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2>
            <h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2>
        </div>
    </div>
</body>
</html>

上边和左边菜单不动，右边有滚轮

登陆注册：

重叠了几层的页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{margin: 0}
        .c1{background-color: yellowgreen;
            height: 2000px;
            z-index: 1}
        .c2{position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: black;
            opacity: 0.5;
            z-index: 2}
        .c3{height: 300px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 3;
            margin-left: -200px;
            margin-top: -150px}
    </style>
</head>
<body>
    <div class="c1">
        <h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2><h2>hello</h2>
    </div>
    <div class="c2"></div>
    <div class="c3"></div>

</body>
</html>

漂浮在屏幕上的窗口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .left{float: left}
        .w{height: 25px;
            width: 150px;
            border: 1px solid #dddddd;
            position: absolute;
        top: 10px}
        .w .m{height: 25px;
              width: 25px;
              line-height: 25px;
              text-align: center}
        .w .p{height: 25px;
              width: 25px;
              line-height: 25px;
              text-align: center}
        .w .count input{
            padding: 0;
            border: 0;
            width: 98px;
            height: 23px;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
    </style>
</head>
<body>

    <div class="w">
        <div class="m left">-</div>
        <div class="count left">
            <input type="text" />
        </div>
        <div class="p left">+</div>
    </div>

</body>
</html>

练习

结果：

当鼠标移动上去就变成小手需要加一句

练习：点+或-修改里面的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .left{float: left}
        .w{height: 25px;
            width: 150px;
            border: 1px solid #dddddd;
            position: absolute;
        top: 10px}
        .w .m{height: 25px;
              width: 25px;
              line-height: 25px;
              text-align: center;
              cursor:pointer}
        .w .p{height: 25px;
              width: 25px;
              line-height: 25px;
              text-align: center;
               cursor:pointer}
        .w .count input{
            padding: 0;
            border: 0;
            height: 23px;
            width: 98px;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
    </style>
</head>
<body>

    <div class="w">
        <div class="m left" onclick="min();">-</div>
        <div class="count left">
            <input id="count" type="text" />
        </div>
        <div class="p left" onclick="plus();">+</div>
    </div>
    <script type="text/javascript">
        function  plus() {
            var old = document.getElementById('count').value;
            var old_int = parseInt(old);
            var new_int = old_int + 1;
            document.getElementById('count').value = new_int;
        }
        function  min() {
            var old = document.getElementById('count').value;
            var old_int = parseInt(old);
            var new_int = old_int - 1;
            document.getElementById('count').value = new_int;
        }
    </script>
</body>
</html>

+ - 修改input

posted @ 2017-07-15 15:18 7788碎片阅读(52) 评论(0) 收藏举报

7788碎片

CSS补充内容

hover：鼠标移动上去时，自己样式发生变化

公告