zoukankan      html  css  js  c++  java
  • 纯CSS实现小圆点和三角形图案

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯CSS制作三角形和小圆点</title>
    <style>
    .arrowbox{40px;height:30px;background: #000;padding:10px;position: relative;text-align:center;margin:20px;color:#fff;line-height:30px;font-size:12px;}
    .arrowbox span{display: inline-block;overflow:hidden;vertical-align: middle;position:absolute;top:22px;right:5px;line-height:12px;font-size:12px;}
    .arrowbox span em{display:block;font-family:"Simsun";font-style:normal;font-weight:normal;}
    .arrowbox span.size1{7px;height:4px;}
    .arrowbox span.w_e{4px;height:7px;}
    .arrowbox span.size2{14px;height:8px;}
    .arrowbox span em.north{color:#fff;margin:-7px 0 0 -2px;}
    .arrowbox span em.south{color:#fff;margin:0 0 0 -2px;}
    .arrowbox span.w_e em.east{color:blue;margin: -2px 0 0 -7px;}
    .arrowbox span.w_e em.west{color:yellow;margin:-2px 0 0 0;}
    .arrowbox span.size2 em.south{margin:-5px 0 0 0}
    .arrowbox span.size2 em.north{margin:2px 0 0 0}
    .round{16px;height:16px;display: inline-block;font-size:20px;line-heigth:16px;text-align:center;color:#f00;text-decoration:none}
    .round:hover{color:blue;text-decoration:none} 
    </style>
    </head>
    <body>
    <div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
    <div class="arrowbox">首页<span class="size1"><em class="north">◆</em></span></div>
    <div class="arrowbox">首页<span class="size1"><em class="south">◆</em></span></div>
    <div class="arrowbox">首页<span class="w_e"><em class="east">◆</em></span></div>
    <div class="arrowbox">首页<span class="w_e"><em class="west">◆</em></span></div>
    <div class="arrowbox">首页<span class="size2"><em class="south">◆</em></span></div>
    <div class="arrowbox">首页<span class="size2"><em class="north">◆</em></span></div>
    <p>用font-size控制圆点的大小</p>
    <a href="#" class="round">●</a>
    </body>
    </html>
  • 相关阅读:
    叙旧
    注册表的基本操作(.Net)
    如何自己实现 JavaScript 的 new 操作符?
    装饰者模式和TypeScript装饰器
    彻底弄懂GMT、UTC、时区和夏令时
    Javascript 中 cookie 操作方式
    javascript实例教程:使用canvas技术模仿echarts柱状图
    实现memcached客户端:TCP、连接池、一致性哈希、自定义协议
    Linux终端快速检测网站是否宕机的6个方法
    爬虫是什么吗?你知道爬虫的爬取流程吗?
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/5192999.html
Copyright © 2011-2022 走看看