汇总常用技巧——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. Codeforces Round #355 (Div. 2)

    A 弯腰 #include<cstdio> #include<cstring> #include<iostream> #include<queue> # ...

  2. 关于C#动态调用VC Dll的方法（转）

    http://blog.csdn.net/null1/article/details/3953155

  3. 【转载】lua中的require机制

    [转载自]http://blog.chinaunix.net/uid-552961-id-2736410.html lua中的require机制 为了方便代码管理,通常会把lua代码分成不同的模块,然 ...

  4. ubuntu 13.04下sublime text 3使用中文输入法

    主要思路参考 http://blog.yanwen.org/archives/1955.html libsublime-imfix.so 这个库自己编译和从他这下载的 md5一样.可以不用编译了.直接 ...

  5. c功能实战

    1,linux C连接ftp实现简单的上传下载; libcurl/libftp/busybox; oracle查看用户信息 1. 查询oracle中所有用户信息 select * from dba_u ...

  6. 【C语言】-循环结构-while语句

    while语句: while循环可实现"当型"循环,即当条件成立时,执行循环体.适合无法确定循环执行次数的情况. while (表达式) { 循环语句 } 注意: 表达式为循环控制 ...

  7. C++中实现从std::string类型到bool型的转换

    利用输入字符串流:std::istringstream bool b; std::string s = "true"; std::istringstream(s) >> ...

  8. Jsp的三、七、九

    1.jsp的三个编译指令 <%page %> <%taglib %> <%include %> 2.jsp的七个动作指令 forward param include ...

  9. Quartz管理类

    package com.sihuatech.project.task.manager; import java.text.ParseException; import org.quartz.CronT ...

  10. C# Winform 支持Hex与ASCII输入和切换的文本框

    最近一直在做一个支持串口,TCP,UDP通讯调试的一体化工具(也就是C#串口调试工具 v2.0的第三版),其中涉及到16进制数据和ASCII码的输入,所以继承了TextBox的基础上,写了这个支持He ...