#p1:before{
content: "哈哈哈 ";
color: red;
}
#p1:after{
content: "哈哈哈";
color: #452dff;
}
content: url('img.jpg');
content: attr(href);
content: " (" attr(href) ")"

太极图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         #p1:before{

             content: "哈哈哈 ";

             color: red;

         }

         #p1:after{

             content: "哈哈哈";

             color: #452dff;

         }

        #a1:after{

            content: attr(href);

        }

         #yin-yang {

             width: 96px;

             height: 48px;

             background: #eee;

             border-color: red;

             border-style: solid;

             border-width: 2px 2px 50px 2px;

             border-radius: 100%;

             position: relative;

         }

         #yin-yang:before {

             content: "";

             position: absolute;

             top: 50%;

             left:;

             background: #eee;

             border: 18px solid red;

             border-radius: 100%;

             width: 12px;

             height: 12px;

         }

         #yin-yang:after {

             content: "";

             position: absolute;

             top: 50%;

             left: 50%;

             background: red;

             border: 18px solid #eee;

             border-radius:100%;

             width: 12px;

             height: 12px;

         }

     </style>

 </head>

 <body>

 <p id="p1">我是一个兵  </p>

 <a id="a1" href="https://www.baidu.com">百度</a>

 <br>

 <div id="yin-yang"></div>

 </body>

 </html>

分割线

.mask { overflow: hidden; height: 20px; }
.mask:after { content: ''; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px/12px; box-shadow: 0 0 8px black; }

随机推荐

  1. JQ兼容性问题

    checkbox操作 1:设置为选中状态   $(this).prop("checked", true); 2:判断是否选中     $(this).is(":check ...

  2. 把WinXP装进内存 性能飚升秒杀固态硬盘

    现在用户新配置的电脑,内存很少有小于2GB的,配置4GB内存的朋友也有不少.容量如此大的内存,我们在使用电脑的日常操作中绝对用不完.而目前制约系统性能最大的瓶颈就是硬盘的传输速度,所以,这里教你怎么把 ...

  3. delphi如何获得当前操作系统语言环境

    function GetWindowsLanguage: string; var WinLanguage: ..] of char; begin VerLanguageName(GetSystemDe ...

  4. CCNA实验(5) -- OSPF

    enableconf tno ip do loenable pass ciscoline con 0logg syncexec-t 0 0line vty 0 4pass ciscologg sync ...

  5. CentOS ips bonding

    centos ip bonding 一个网卡多个ips,多个网口一个ip 1,配置一个网卡多ips的情况cp /etc/sysconfig/network-scripts/ifcfg-eth0 /et ...

  6. ThinkPad x200为何总是CPU占用50%

    2009年,我从美国买回一台ThinkPad X200 Tablet,Windows XP Tablet PC Edition 2005版,服役几年一直很正常.直到2012年初的时候,突然发现电脑非常 ...

  7. Android常用控件之ExpandableList的使用

    先来看下什么是ExpandableListView 跟列表有点像,这种是可以折叠的列表,下面来看下是如何在代码中实现 一.在布局文件中声明一个ExpandableListView <Linear ...

  8. 搭建一个Oracle到Oracle的Goldengate双向复制环境

    目标:搭建一个Oracle到Oracle的Goldengate双向复制环境(支持DDL+DML). 环境: OS:Red Hat Enterprise Linux Server release 5.5 ...

  9. 设计模式入门之桥接模式Bridge

    Abstraction:抽象部分的父类,定义须要实现的接口.维护对实现部分的引用,从而把实现桥接到Implementor中去 Implementor:实现部分的接口 RefinedAbstractio ...

  10. Nhibernate初入门基本配置（一）

    文章出处:http://www.cnblogs.com/GoodHelper/archive/2011/02/14/nhiberante_01.html 一.NHibernate简介 什么是?NHib ...