汇总常用技巧——CSS伪类before和after的应用
先上效果图，建议遵循有图有真相的原则，可以上图的地方，还望不要嫌麻烦，毕竟有图的话 可以让读者少花些时间！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.span-right:before,.span-right:after{
content: '';
display:inline-block;
width: 20%;
margin: 5px 5%;
border-bottom: 1px solid #cacaca;
}
.span-right:after{
clear: both;
}
.round{
width:16px;
width: 16px;
height: 16px;
display: inline-block;
font-size: 1.5rem;
text-align: center;
color: #000;
text-decoration: none;
}
</style>
</head>
<body> <div>
<span class="span-right"><a href="#" class="round">●</a>2015-07-22<a href="#" class="round">●</a></span>
</div>
</body>
</html>
2015-10-20 实现页面加载自动播放音乐
说明：这里有个小坑，如果用jquer改写下面的js代码 执行时暂停不了 如果出现这个问题 就使用原声的js吧
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title class="link_names">
audio html5 自动波放 背景音乐 iganlei</title>
<head> <script type="text/javascript">
function musicPaused(f) {
var music = document.getElementById("clickSound");
if(f == 1){
music.pause();//停止播放
}else{
music.play();//正常播放
}
}
</script>
<audio id=" " autoplay="autoplay">
<source src="http://www.austgl.com/34830913.mp3">
</audio>
音乐马上想起（需支持html5的浏览器）
<input id="btn" type="button" onclick="musicPaused(1)" value="停止" />
<a href="#" onClick="musicPaused(1)">停止</a>
<a href="#" onClick="musicPaused(0)">开始</a>
jquery 实现文字向上滚动：如图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"/>
<title>test</title>
<meta charset="UTF-8">
<style type="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-25px"//每次向上滚动的高度
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',3000)//定时函数 每隔3s执行一次上面的滚动函数AutoScroll
});
</script>
</head> <body>
<div id="scrollDiv">
<ul>
<li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
<li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
<li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
<li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
<li><a href="http://i.cnblogs.com/EditPosts.aspx?postid=4666543">云D旋律</a></li>
</ul>
</div>
</body>
</html>