前端学习之练习 - 码农教程

css中 :after 选择器向选定的元素之后插入内容，使用content 属性来指定要插入的内容

p:after
{ 
content:"- Remember this";
}

利用after实现清除css中浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left{
            float: left;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
        }

       /*利用after 在对应div标签后添加内容，并设置内容不显示，从而达到当class=item这些标签浮动时，外面的div标签设置的背景色可以显示*/
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="item left"></div>
        <div class="item left"></div>

        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>
        <div class="item left"></div>

    </div>

    <div>asdf</div>

    <!--<div class="body clearfix">-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->
        <!--<div class="item left"></div>-->

    <!--</div>-->

    <!--<div class="test">ABC </div>-->
</body>
</html>

例子

:hover在鼠标移到链接上时添加的特殊样式。:hover 选择器器可用于所有元素，不仅是链接。

a:hover
{ 
    background-color:yellow;
}

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

    <style>
        .left{
            float: left;
        }
        .clearfix:after{
            content: '.';
            display: block;
            clear: both;
            visibility: hidden;
            height: 0;
        }
        .container{
            background-color: red;
        }

        .container .item{
            width: 180px;
            height: 150px;
            background-color: #303a40;
            border: 1px solid red;
            overflow: hidden;
            position: relative;
        }
        .hide{
            display: none;
        }
        .container .item:hover{
            border: 1px solid green;
        }

        .container .item .text{
            display: none;
        }
         /*鼠标放在class=item元素上后面class=text元素的样式 本例显示1000和背景色*/
        .container .item:hover .text{
            display: block;
        }
    </style>

</head>
<body>

<div class="container clearfix">
        <div class="item left">
            <div class="bg">
                <img style="height: 150px; width: 180px;" src="1.jpg">
            </div>
            <div class="text">
                <!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->
                <div style="z-index:9;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background-color: red;opacity: 0.6"></div>
                <div style="z-index:10;position: absolute;left: 0;right: 0;top: 0;bottom: 0;">1000</div>
            </div>
        </div>

    </div>


</body>
</html>

鼠标放在图片上显示一些信息

后台管理界面例子

Jquery动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="display: none">hello world</p>
<input id="show" type="button" value="显示">
<input id="hide" type="button" value="隐藏">
<input id="toggle" type="button" value="toggle">
<script src="jquery-2.1.4.min.js"></script>
<script>

    $("#show").click(function () {
             $("p").show(2000,function () {
                 alert(123)
             });
    });

    $("#hide").click(function () {
             $("p").hide(1000);
    });


     $("#toggle").click(function () {
             $("p").toggle(1000);
    });
    /*toggle元素若显示就隐藏，元素隐藏就显示

</script>    
</body>
</html>

显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div" style="display:none ;width: 200px;height: 200px;background-color: rebeccapurple"></div>

<input id="In" type="button" value="fadeIn">
<input id="out" type="button" value="fadeout">
<input id="toggle" type="button" value="fadetoggle">
<input id="fadeto" type="button" value="fadeto">

<script src="jquery-3.1.1.js"></script>
<script>
    $("#In").click(function () {
        $("div").fadeIn(2000);
    })

    $("#out").click(function () {
        $("div").fadeOut(1000);
    })

     $("#toggle").click(function () {
        $("div").fadeToggle(1000);
    });
   
    /*fadeToggle元素是隐藏就显示，元素显示就隐藏*/
    $("#fadeto").click(function () {
        $("div").fadeTo(1000,0.9);
    });
</script>
</body>
</html>

浅入浅出

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

 <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>


</body>

<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
      $("#title").mouseover(function () {
          $(this).css("cursor","move")
      }).mousedown(function (event) {
           var start_x=event.screenX;
           var start_y=event.screenY;

          var parent_left=$(this).parent().offset().left;
          var parent_top=$(this).parent().offset().top;

          $(this).on("mousemove",function (e) {
               var new_x=e.screenX;
               var new_y=e.screenY;


              var new_parent_x=parent_left+(new_x-start_x);
              var new_parent_y=parent_top+(new_y-start_y);


              $(this).parent().css("left",new_parent_x+"px");
              $(this).parent().css("top",new_parent_y+"px");
          }).mouseup(function () {
              $(this).off("mousemove")
          })
      })


</script>

</html>

拖动面板

原文地址：https://www.cnblogs.com/quanloveshui/p/11390010.html