Html+css实现带图标的控件
</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实现带图标的控件的更多相关文章
- 解决方案:带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载可能出现 COM 组件的80040154错误
建议大家在微软的组件出现问题时,在GOOGLE上搜索解决方案,一般来说,总有结果: 带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载,可能出现 COM 组件的80 ...
- 让DELPHI自带的richedit控件显示图片
让DELPHI自带的richedit控件显示图片 unit RichEx; { 2005-03-04 LiChengbin Added: Insert bitmap or gif into RichE ...
- c# 通过.net自带的chart控件绘制饼图pie chart
c# 通过.net自带的chart控件绘制饼图pie chart 需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 具体的实现步骤: > ...
- kendo UI 倒如css 和 js 后 窗口控件上的工具栏图标不显示如何解决
examples 文档中找到window的例子打开一个 查看其中文件引入 <head> <title>API</title> <meta char ...
- 设置VS2010中自带的ActiveX控件测试容器TstCon
ActiveX控件:可以看做一个极小的服务器应用程序,他不能单独运行,需要嵌入到某个程序中才可以运行,我们可以自己写一个程序来测试自己写的程序(具体方法在下一篇文章阐述),第二种方法是利用VS(本人编 ...
- asp.net自带的异步刷新控件使用
一直都是使用jquery的$.ajax,由于刚刚加入的公司是用asp.net的,webform与之前的ajax加在一起显得很混乱,后来发现asp.net已经封装了一下ajax功能,就查了一下,并且做了 ...
- C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展
一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PdMyJd 可交互视频 此视频是可 ...
随机推荐
- Java基础 -- 泛型之泛型参数
泛型机制常用的参数有3个: “?”代表任意类型.如果只指定了<?>,而没有extends,则默认是允许任意类. extends关键字声明了类型的上界,表示参数化的类型可能是所指定的类型,或 ...
- Tomcat之NIO 启动与应用分析
概述 从入门Web开始一直在使用Tomcat,随着对网络相关的知识的进一步了解,觉得越有必有去阅读一下常用的开源服务器的整个工作流程,以及使用场景,对比几款服务器的优劣势.最终根据合适的业务场景进行优 ...
- C# Collection was modified;enumeration operation may not execute
一.问题描述 在做 数组.列表.集合遍历时,可能我们会遇见这个问题.Collection was modified;enumeration operation may not execute ,翻译的 ...
- 【leetcode 114. 二叉树展开为链表】解题报告
思路:递归,将左子树变成单链表形式,再将右子树变成单链表形式,最后将左子树单链表的末端连接到右子树单链表表头,将根节点的左孩子置空 void flatten(TreeNode* root) { if ...
- JavaScript中匿名函数循环传参数(不触发函数的执行)
我们都知道定义函数的方式有两种,一种是函数声明,另一种是函数表达式,函数声明的语法是这样的: function functionName(arg0, arg1, arg2) { // 函数体 } 函数 ...
- PAT L3-010【完全二叉树】
静态建树判一下1-n是不是为空就好了,如果有空的 就说明不是complete binary tree (和线段树建树差不多啊)Left=2*root:Right=2*root+1 #include ...
- java基础之介绍
1.JAVA涉及在服务器领域上主要有 Linux.Unix.Windows等(其中Linux和Unix是大部分服务器用的主要的系统) 2.JAVA之所以发展的原因 1.java得到了很多的支持,拥有许 ...
- 2017-10-3 清北刷题冲刺班a.m
P99zhx a [问题描述]你是能看到第一题的 friends 呢.——hja怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给出了一种分单词的方法,何大爷认为两个单词是同一类的当这两 ...
- puppet批量管理500多台服务器
前言 puppet使用了有一段时间了,之前写的手顺书一直未发布到blog上来,今天正好有空,写下一点笔记.公司在用的服务器有500多台,基本都为CentOS,版本有5和6两种,管理起来很不方便,尤其是 ...
- python 之 函数 基础2
5.36 命名关键字 什么是命名关键字参数? 格式:在*后面参数都是命名关键字参数 特点: 1 必须被传值 2 约束函数的调用者必须按照key=value的形式传值 3 约束函数的调用者必须用我们指定 ...