汇总常用技巧——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. leetcode@ [241] Different Ways to Add Parentheses (Divide and Conquer)

    https://leetcode.com/problems/different-ways-to-add-parentheses/ Given a string of numbers and opera ...

  2. [读书笔记]了不起的node.js(四)

    这周的学习主要是nodejs的数据库交互上,并使用jade模板一起做了一个用户验证的网站.主要是遇到了一下几个问题. 1.mongodb版本过低 npm ERR! Not compatible wit ...

  3. 将树莓派Raspberry Pi设置为无线路由器(WiFi热点AP,RTL8188CUS芯片)

    http://wangye.org/blog/archives/845/ 最近又开始折腾起Raspberry Pi来了,因为某处上网需要锐捷拨号,于是我就想能不能让我的树莓派代劳,当然首先要将其改造为 ...

  4. Java 8 开发顶级技巧

    本文由码农网 – 小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 我使用Java 8编码已经有些年头,既用于新的应用程序,也用来迁移现有的应用,感觉是时候写一些我发现的非常有用的 ...

  5. 细谈Linux和windows差异之图形化用户接口、命令行接口

    相信来看本博文的朋友,肯定是已经玩过linux好段时间了,才能深刻理解我此番话语. 这是在Windows下的命令行接口 这是windows下的用户接口 就是它,explorer.ext,可以去尝试.把 ...

  6. fscanf（格式化字符串输入）

    fscanf(格式化字符串输入) 相关函数 scanf,sscanf 表头文件 #include<stdio.h> 定义函数 int fscanf(FILE * stream ,const ...

  7. Xcode中c++&Object-C混编,详细介绍如何在cocos2dx中访问object函数以及Apple Api

    转自:http://www.himigame.com/iphone-cocos2dx/743.html Cocos2dx系列博文的上一篇详细介绍了如何在Xcode中利用jni调用Android的Jav ...

  8. js url传值中文乱码之解决之道

    在websphere 中使用的是url=encodeURI(encodeURI(url)); //用了2次encodeURI 测试成功,第一次转换没有尝试, 处理方法一. js 程序代码:url=en ...

  9. 【转】/etc/grub.conf文件详解

    转自:http://leejia.blog.51cto.com/4356849/788902 grub.conf是grub的主配置文件,通过这个配置文件,grub才能找到kernel,系统才能正常启动 ...

  10. IPv6介绍

    一.为什么需要IPv6 为了扩大地址空间,拟通过IPv6重新定义地址空间.IPv4采用32位地址长度,只有大约43亿个地址,估计在2005-2010年间将被分配完毕,而IPv6采用128位地址长度,几 ...