css作业知识补充

1、clear both可以让div里面的内容撑起div (左右没有没有浮动，还是块级标签，所以能撑起来) after在父级标签后面加上一标签  因为after是内联标签，需要变成块级标签，visibility: hidden 会隐藏内容但是会占据高度，只需要再把高度设置为0，里面的flat会自然的撑起父级标签

父级标签需要飘起的标准css

.clearfix:after{
     content: '111';
     display: block;
     clear: both;
     visibility: hidden;
     height: 0;
     }

2、画三角  border 给他个soild 就能出现三角 给不同的边不同的颜色就能出现不同颜色的三角  只需要把不需要的三角颜色设置为 无色transparent 默认颜色是黑色的所有不能不设置颜色

　鼠标放在上面三角上下变换  只需要hover时移动三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .up{
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid green;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .down{
            border-top: 30px solid green;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
            display: inline-block;
        }
        .c1{
            border: 30px solid transparent;
            border-top: 30px solid green;
            display: inline-block;
            margin-top: 40px;
            background-color: yellow;
        }
        .c1:hover{
            border: 30px solid transparent;
            border-bottom: 30px solid green;
            margin-top: 10px;
            background-color: blueviolet;
        }


    </style>
</head>
<body>
    <div class="up"></div>
    <div class="down"></div>
    <div style="height: 100px;background-color: red">
        <div class="c1"></div>
    </div>
</body>
</html>
三角

3、输入框和加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .wrap{
            height: 22px;
            width: 150px;
            border: 1px solid #ddd;
        }
        .wrap .minus{
            height: 22px;
            width: 22px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
        }
        .wrap .plus{
            height: 22px;
            width: 22px;
            line-height: 22px;
            text-align: center;
            cursor: pointer;
        }
        .wrap .count input{
            padding: 0;
            border: 0;
            width: 104px;
            height: 22px;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
    </style>
</head>
<body>

    <div class="wrap">
        <div class="minus left" onclick="Minus();">-</div>
        <div class="count left">
            <input id="count" type="text" value="456"/>
        </div>
        <div class="plus left" onclick="Plus();">+</div>
    </div>

    <script type="text/javascript">

        //定义函数
        function Plus(){
            var old_str = document.getElementById('count').value;
             var old_int = parseInt(old_str);
            var new_int = old_int + 1;
            document.getElementById('count').value = new_int;
        }
        //定义函数
        function Minus(){
            var old_str = document.getElementById('count').value;
            var old_int = parseInt(old_str);
            var new_int = old_int - 1;
            document.getElementById('count').value = new_int;
        }
    </script>

</body>
</html>
输入框和加减

4、输入框右边固定R图片

输入框绝对定位，图片相对定位到相应位置，然后模块加个有边距padding-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .user{
            position: relative;
            width: 250px;
        }
        .user input{
            height: 30px;
            width: 170px;
            padding-right: 30px;
        }
        .user .ren{
            position: absolute;
            top: 8px;
            left: 180px;
        }
    </style>
</head>
<body>
    <div class="user">
        <input type="text">
        <span class="ren">R</span>
    </div>
</body>
</html>
输入框加图片

5、hover

1、上面这张图片隐藏 虚拟化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ele{
            height: 200px;
            width: 200px;
            overflow: hidden;
            position: relative;
        }
        .ele .content{
            background: rgba(0,0,0,.6);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            visibility: hidden;
            color: white;
            text-align: center;
        }
        .ele:hover .content{
            visibility: visible;
        }
        .ele .content .c1{
            font-size: 32px;
            padding: 30px 0;
        }
        .ele .content .c2{
            font-size: 18px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div class="img"><img src="1.jpg"></div>
        <div class="content">
            <div class="c1">Alex</div>
            <div class="c2">1000-2000</div>
        </div>
    </div>
</body>
</html>
图片虚拟化

2、外部边框颜色隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .ele{
            background-color: #dddddd;
            border: 2px solid transparent;
        }
        .ele:hover{
            border: 2px solid red;
        }
        .ele:hover .ele-item{
            color: red;
        }
    </style>
</head>
<body>
    <div class="ele">
        <div>123</div>
        <div class="ele-item">123</div>
    </div>
</body>
</html>
隐藏外部边框

3、调用css库中的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css" />
</head>
<body>
    <span class="fa fa-cut"></span>
</body>
</html>
View Code

6、img在a标签内会有边框  ie里面可以看出来  ！importent不允许其他的css修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            font-size: 32px;
            background-color: red;
            color: white !important;
        }
        .c2{
            color: aqua;
        }
    </style>
</head>
<body>
        <div class="c1 c2">666</div>
</body>
</html>
View Code

7、overflow: auto 内容超过时会 出现滑条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 ;
        }
        .pg-header{
            height: 48px;
            background-color: #dddddd;
        }
        .pg-body .body-menu{
            position: absolute;
            width: 180px;
            background-color: antiquewhite;
            left: 0;
        }
        .pg-body .body-content{
            position: absolute;
            top: 48px;
            left: 182px;
            right: 0;
            bottom: 0;
            background-color: blueviolet;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header">

    </div>
    <div class="pg-body">
        <div class="body-menu">
            <ul>
                <li>11</li>
                <li>11</li>
                <li>11</li>
                <li>11</li>
            </ul>
        </div>
        <div class="body-content">
            <h1>

            </h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
            <h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1><h1>asdf</h1>
        </div>
    </div>
</body>
</html>
View Code

8、图层 固定位置弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .model{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.5);
            z-index: 2;
        }
        .content{
            height: 300px;
            width: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left:50%;
            z-index: 3;
            margin-left: -200px;
            margin-top: -200px;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;background-color: red">
        <h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1><h1>sdf</h1>
    </div>
    <div class="model"></div>
    <div class="content"></div>

</body>
</html>
View Code

9、postion  relative 与absolute 结合 固定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>删除</td>
        </tr>
        <tr>
            <td>第一</td>
            <td>第二</td>
            <td>
                <div style="position: relative;">
                    <a>删除</a>
                    <div style="position: absolute;left: 38px;top: -2px;">
                        <input type="button" value="确定" /> <input type="button" value="取消" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
弹出删除案例

 

posted @ 2016-07-05 11:30  若时光搁浅  阅读(149)  评论(0)    收藏  举报