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. jquery筛选元素函数

    jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...

  2. PAT12-012【建最小堆】

    卧槽..没看清 值 还有负的.. PS: 注意他说是一个一个插入的,也就是插在完全二叉树的最末位置,然后向上更新. #include<bits/stdc++.h> using namesp ...

  3. 洛谷P1311 选择客栈

    P1311 选择客栈 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一 ...

  4. this android sdk requires android developer toolkit version

    this android sdk requires android developer toolkit version 10.0.0 or above. current version is 8.0. ...

  5. PAT甲级——1094 The Largest Generation (树的遍历)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/93311728 1094 The Largest Generati ...

  6. java中静态代码块的用法 static用法详解和static静态导入

    (一)java 静态代码块 静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序 ...

  7. POJ1009 Edge Detection

    题目来源:http://poj.org/problem?id=1009 题目大意: 某图像公司用run length encoding(RLE)的方式记录和存储了大量的图像.程序的目标是读入压缩后的图 ...

  8. CF E .Tree with Small Distances(树上的贪心）

    题意: 这是一颗有n-1条边的无向树 , 在树上加最少的边使树的1节点到其他节点的距离最多为 2 : 分析:很容易考虑的贪心的做法,但是该如何的贪心呢 ? 我一开始是打算贪心节点的儿子最多那一个 , ...

  9. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  10. jquery $.fn $.fx 的意思以及使用

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面简单为大家介绍下jquery $.fn $.fx到底是怎么一回事 $.fn是指jquery的命名空间,加 ...