汇总常用技巧——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. Android SDK Manager无法更新的解决办法

    Fetching https://dl-ssl.google.com/android/repository/addons_list-1.xmlFailed to fetch URL https://d ...

  2. ubuntu 常用软件配置

    1. 首先重装系统后需要执行: sudo apt-get install update 2. 然后安装必要的软件:    terminator, vim, git,

  3. 国外程序员整理的Java资源

    好资料,慢慢学习.http://www.importnew.com/14429.html 构建 这里搜集了用来构建应用程序的工具. Apache Maven:Maven使用声明进行构建并进行依赖管理, ...

  4. MapReduce概述,原理,执行过程

    MapReduce概述 MapReduce是一种分布式计算模型,运行时不会在一台机器上运行.hadoop是分布式的,它是运行在很多的TaskTracker之上的. 在我们的TaskTracker上面跑 ...

  5. jqgrid使用sql row_number进行分页

    背景 系统中使用了jqgrid的展示,现在要处理10w+的数据量 现状 使用了全查询的,查询到了10w+的数据放到了datatable中,每次页面刷新需要9秒多,并且传递给另一个dll来处理一些事情. ...

  6. -lrt

    在编写pthread有关的程序时,编译时老是报"undefined reference to `pthread_create'"的错误,原因是没有链接pthread相关的库,gcc ...

  7. gtest框架使用

    gtest文档说明: 由于公司单元测试的需要,自己花了大半天时间下载了一个gtest框架,使用了一些测试例子,总览了coderzh的玩转gtest测试框架,又看了几篇gtest博客,写下了以下内容,作 ...

  8. iOS---RunLoop深度剖析

    RunLoop 前言 RunLoop是iOS/OS开发中比较基础的一个概念,在苹果开发中用在事件处理,延迟加载,屏幕刷新等功能的处理,其实抛开语言,RunLoop是一个的架构模式,也就是RunLoop ...

  9. Oracle- 正则表达式查询

    发现Oracle支持正则表达式.先收藏. ORACLE中的支持正则表达式的函数主要有下面四个:1,REGEXP_LIKE :与LIKE的功能相似2,REGEXP_INSTR :与INSTR的功能相似3 ...

  10. 使用ApplicationLoader中出现报错：The IPA is invalid. It does not inlude a Payload directory

    问题处理方法: 1.将achieve的.app后缀的软件包放在一个payload的文件夹中 2.压缩该文件夹,改变.zip后缀为.ipa 3.使用applicationLoader上传该文件