汇总常用技巧——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>

jquery 文字向上滚动+CSS伪类before和after的应用的更多相关文章

  1. jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  2. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  3. CSS伪类before，after制作左右横线中间文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  6. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  7. 应用越来越广泛的css伪类

    说起css伪类,学习web前端网页设计的同学们应该对此应该不是很陌生,以前很多的网页的特效大多是通过js来实现的.但是随着CSS3不断开发,利用css实现网页的特效不仅响应不错,而且还减少了很多的代码 ...

  8. (五)CSS伪类(Pseudo-class)

    CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...

  9. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

随机推荐

  1. 在PHPmyadmin中删除数据库

    删除数据库用sql语句 的方法:   删除数据库DROP DATABASE `数据库名称`; 删除数据库里的表DROP TABLE `数据库里的表名`;

  2. textarea使用注意事项

    问题现象: 意外的发现页面中 textarea 标签中的内容缩进了 猜测: CSS影响了? 过程:(辛酸得说说) 查了CSS,并没有发现,CSS是正常的 然后找了一个正常的,跟这个异常的进行了对比,代 ...

  3. berserkJS（大名：狂暴JS / 昵称：疯子JS）

    极分享:高质分享+专业互助=没有难做的软件+没有不得已的加班 http://www.finalshares.com/read-6763?f=g-20

  4. ABAP开发基础知识：内表(Internal Table)

    http://www.cnblogs.com/foxting/archive/2012/03/19/2406830.html 内表与结构体基本类似,它同样是程序运行中被临时创建的一个存储空间,它是一个 ...

  5. Java流操作之转换流

    流的操作规律: 1.明确流和目的. 数据源(源头):就是需要读取,可以使用两个体系:InputStream.Reader 数据汇(目的地):就是需要写入,可以使用两个体系:OutputStream.W ...

  6. .net iis 域名泛解析实战

    最近做个人网站想实现多个二级域名,一来为了好记,二来为了搜索引擎优化,搜索引擎对二级域名的收录还是比较快的.刚开始做了4,5个二级域名,每个都是在域名解析后台手动添加的,不过随着二级域名越来越多,发现 ...

  7. SaltStack管理从这里开始

    Modules 1:查看所有module列表: salt 'jcfx-4' sys.list_modules jcfx-4: - acl - aliases - alternatives - apac ...

  8. [转]windows下srand48()和drand48()的问题

    转自:windows下srand48()和drand48()的问题 #ifndef DRAND48_H #define DRAND48_H #include <stdlib.h> #def ...

  9. Clarkson不等式

  10. JS基础DOM篇之一：何为DOM？

    近日在园子看了一篇文章,一位前端负责人问应聘者何为DOM事件流的三个阶段,我当时一看也是懵圈,于是强迫症复发,遂想要搞清楚它.谁知在查资料的过程中发现有好多关于DOM的概念也是模糊不清,便决定继续延伸 ...