1. </pre><pre name="code" class="html"><!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <title>按钮写法</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
    a:hover{text-decoration: none;}
    .btn{
    display: inline-block;
    margin-top: 10px;
    padding: 10px 24px;
    border-radius: 4px;
    #63b7ff;
    color: #fff;
    cursor: pointer;
    }
    .btn:hover{
    #99c6ff;
    }
    .inbtn{
    border: none;
    }
    .bubtn{
    border: none;
    }
    .btn{
    font-style: normal;
    }
    .bgbtn span{
    margin-left: 10px;
    padding-left: 20px;
    background: url(images/edit.png) left center no-repeat;
    }
    .bgbtn02 img{
    margin-bottom: -3px;
    margin-right: 10px;
    }
    </style>
    </head>
    <body>
    <!--<a>标签按钮-->
    <a href="" class="btn">a标签按钮</a>
    <!--<input>标签按钮-->
    <input class="inbtn btn" type="button" value="input标签按钮"/>
    <!--<button>标签按钮-->
    <button class="bubtn btn">button标签按钮</button>
    <!--任意标签按钮-->
    <i class="ibtn btn">i标签按钮</i>
    <!--带背景图标按钮-->
    <a href="" class="bgbtn btn">
    <span>带图标按钮</span>
    </a>
    <a href="" class="bgbtn02 btn">
    <img src="data:images/edit.png"/>带图标按钮
    </a>
    </body>
    </html>

原文链接:http://www.jb51.net/web/433202.html

Html+css实现带图标的控件的更多相关文章

  1. 解决方案：带格式化文本控件（ RichText）的模板如果在InfoPath的浏览器中加载可能出现 COM 组件的80040154错误

      建议大家在微软的组件出现问题时,在GOOGLE上搜索解决方案,一般来说,总有结果:  带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载,可能出现 COM 组件的80 ...

  2. 让DELPHI自带的richedit控件显示图片

    让DELPHI自带的richedit控件显示图片 unit RichEx; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichE ...

  3. c# 通过.net自带的chart控件绘制饼图pie chart

    c# 通过.net自带的chart控件绘制饼图pie chart   需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...

  4. kendo UI 倒如css 和 js 后 窗口控件上的工具栏图标不显示如何解决

    examples 文档中找到window的例子打开一个 查看其中文件引入 <head>    <title>API</title>    <meta char ...

  5. 设置VS2010中自带的ActiveX控件测试容器TstCon

    ActiveX控件:可以看做一个极小的服务器应用程序,他不能单独运行,需要嵌入到某个程序中才可以运行,我们可以自己写一个程序来测试自己写的程序(具体方法在下一篇文章阐述),第二种方法是利用VS(本人编 ...

  6. asp.net自带的异步刷新控件使用

    一直都是使用jquery的$.ajax,由于刚刚加入的公司是用asp.net的,webform与之前的ajax加在一起显得很混乱,后来发现asp.net已经封装了一下ajax功能,就查了一下,并且做了 ...

  7. C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展

    一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...

  8. 前端每日实战：158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  9. 前端每日实战：145# 视频演示如何用纯 CSS 创作一个电源开关控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PdMyJd 可交互视频 此视频是可 ...

随机推荐

  1. git branch简单使用

    1,branch的建立及使用git clone user@192.168.0.136:/media/projiect/omap4/nexttab/kernel kernel/android3.0/  ...

  2. Ansible Playbooks基本使用

    你将学到什么 如何使用playbook 如何编写playbook 如何使用roles PlayBook使用 基础环境 ### 64 位 Ubuntu 16.04 LTS,创建CentOS LXC容器w ...

  3. Libvirt代码架构

    Libvirt介绍 参考资料 Libvirt学习 通过virsh了解libvirt api的调用方式 通过virHypervisorDriver了解libvirt api的实现 virsh代码阅读 通 ...

  4. [CentOS7] 使用磁盘分割建立swap

    声明:本文主要总结自:鸟哥的Linux私房菜-第七章.Linux 磁碟與檔案系統管理,如有侵权,请通知博主 通过 vim /etc/fstab 使该新建的swap分区每次开机都自己挂载 至此,已经完成 ...

  5. Reboot

    目标是将浏览器的预设样式设为一致 Native font stack  本机字体堆栈 由于padding 及 border 会改变元素在运算后的宽度 此时的实际宽度为: width+左右padding ...

  6. [Xcode 实际操作]四、常用控件-(10)动作表样式警告窗口的使用

    目录:[Swift]Xcode实际操作 本文将演示动作表单窗口的使用. 动作表单可以给用户展现一系列的选项, 和警告窗口不同的是,动作表单的展示形式和设备的尺寸有关. 在项目导航区,打开视图控制器的代 ...

  7. tput 命令行使用说明

    转载自:https://blog.csdn.net/fdipzone/article/details/9993961 什么是 tput?tput 命令将通过 terminfo 数据库对您的终端会话进行 ...

  8. 洛谷P4878 [USACO05DEC]layout布局

    题目描述 正如其他物种一样,奶牛们也喜欢在排队打饭时与它们的朋友挨在一起.\(FJ\) 有编号为 \(1\dots N\) 的 \(N\) 头奶牛 \((2\le N\le 1000)\).开始时,奶 ...

  9. Python爬取天气预报

    实现爬取一天的天气预报 非常简单的一个小爬虫,利用的也是基本的request.BeautifulSoup.re库,算是简单的上手一个小测试吧 from urllib.request import ur ...

  10. spring定时任务的集中实现

    转载博主:感谢博主 http://gong1208.iteye.com/blog/1773177 Spring定时任务的几种实现 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前 ...