足球游戏_中国足彩网¥体育资讯$

Html+css实现纯文字和带图标的按钮
来源:易贤网 阅读:4269 次 日期:2016-06-15 11:57:13
温馨提示:易贤网小编为您整理了“Html+css实现纯文字和带图标的按钮”,方便广大网友查阅!

本文总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图标的按钮,下面就来说说这两种按钮的实现方法。效果图如下:

名字

代码如下:

XML/HTML Code

1.</pre><pre name="code" class="html"><!DOCTYPE html>     

2.<html lang="zh-CN">     

3.<head>     

4.  <title>按钮写法</title>     

5.  <meta charset="UTF-8">     

6.  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">     

7.  <link rel="stylesheet" href="css/style.css">     

8.<style type="text/css">     

9.  a:hover{text-decoration: none;}     

10.  .btn{     

11.    display: inline-block;     

12.    margin-top: 10px;     

13.    padding: 10px 24px;     

14.    border-radius: 4px;     

15.    background-color: #63b7ff;     

16.    color: #fff;     

17.    cursor: pointer;     

18.  }     

19.  .btn:hover{     

20.    background-color: #99c6ff;     

21.  }     

22.  .inbtn{     

23.    border: none;     

24.  }     

25.  .bubtn{     

26.    border: none;     

27.  }     

28.  .btn{     

29.    font-style: normal;     

30.  }     

31.  .bgbtn span{     

32.    margin-left: 10px;     

33.    padding-left: 20px;     

34.    background: url(/images/edit.png) left center no-repeat;     

35.  }     

36.  .bgbtn02 img{     

37.    margin-bottom: -3px;     

38.    margin-right: 10px;     

39.  }     

40.</style>     

41.</head>     

42.<body>     

43.<!--<a>标签按钮-->     

44.<a href="" class="btn">a标签按钮</a>     

45.<!--<input>标签按钮-->     

46.<input class="inbtn btn" type="button" value="input标签按钮"/>     

47.<!--<button>标签按钮-->     

48.<button class="bubtn btn">button标签按钮</button>     

49.<!--任意标签按钮-->     

50.<i class="ibtn btn">i标签按钮</i>     

51.<!--带背景图标按钮-->     

52.<a href="" class="bgbtn btn">     

53.  <span>带图标按钮</span>     

54.</a>     

55.<a href="" class="bgbtn02 btn">     

56.  <img src="/images/edit.png"/>带图标按钮     

57.</a>     

58.</body>     

59.</html>     

至于各种标签的优缺点,还是需要大家去体会啦,如果大家有什么好玩的按钮要写,我们一起实现哦。

中国足彩网信息请查看网页制作
易贤网手机网站地址:Html+css实现纯文字和带图标的按钮
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标