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>