给ZBLOG输入框加个美化图标

时间:2011-08-14 17:43:21

面对空洞无味的,千篇一律的输入框窗口,总是让人提不起兴趣,在如今互联网人必一博的浪潮下,你的适当的改变点什么,通过一些细节优化,让你的博客显得与众不同,不随大流,坚持个性与特色,你才能在众多博客中脱颖而出。

如果你无法做到最好,那你就应该做到最有个性。互联网上,和你一样的博客数不甚数,你必须比他们多做些什么,你才能超越他们。

--------------------
呵呵,不要被上面一段话感到惊奇,好像我能让大家的博客变得很有特色似的,我可没这么大本事。

前面的一段话是为了给这篇文章凑些字数,做个前文铺垫。。。也为了让大家对下面的输入框美化提些兴趣。。
通过CSS给输入框前面加个小图标,大家可根据各自的模板情况,选择是否美化。

ZBLOG输入框

ZBLOG的用户可在主题CSS文件里面加上这几句输入框定义代码(其他博客系统可能需要适当修改):

CSS 代码
  1. #inpName {             

  2. background:url(图标地址) no-repeat;                

  3. border1px solid #999;               

  4. padding2px 2px 2px 16px;/*名称输入框*/              

  5. }               

  6. #inpEmail {               

  7. background:url(图标地址) no-repeat;                

  8. border1px solid #999;               

  9. padding2px 2px 2px 16px;/*邮箱输入框*/              

  10. }               

  11. #inpHomePage {               

  12. background:url(图标地址) no-repeat;                

  13. border1px solid #999;               

  14. padding2px 2px 2px 16px;/*网址输入框*/              

  15. }               

  16. #inpVerify{               

  17. background:url(图标地址) no-repeat;                

  18. border:1px solid #999;               

  19. padding:2px 2px 2px 16px/*验证码输入框*/                

  20. }   

还有评论输入框(#txaArticle),评论按钮(#frmSumbit)做适当修改,都可以通过CSS美化一下。。。

对不熟悉CSS的朋友解释一下他们的含义:
background:定义背景属性
no-repeat:表示图像不重复
border:边框属性
solid:实线
padding:背景定位

小图标素材:http://www.lanrentuku.com/gif/(懒人宝库)

本站所有文章均为小宇博客原创,转载请注明来源及出处!

作者:宇天行 (关于我

本文首发地址:https://www.huceo.com/post/265.html

或许您还会喜欢这些文章:

Tags: 作者:宇天行 | 分类:开发技术 | 评论:12 | 浏览:8061

您正在以游客身份发表评论:

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

给ZBLOG输入框加个美化图标
评论者2016-12-18 14:12:00回复评论
给ZBLOG输入框加个美化图标
对不熟悉CSS的朋友解释一下他们的含义
游客2015-01-19 10:54:41回复评论
给ZBLOG输入框加个美化图标
宇天行2011-08-29 23:20:40回复评论
。。。
宇天行2011-08-18 21:47:28回复评论
就是为了保护你的眼睛,才设计成这样的哦。。[F]Haha[/F]
宇天行2011-08-17 22:59:48回复评论
呵呵,挺热心的啊。。。
宇天行2011-08-29 23:02:22回复评论
呵呵,是啊。
宇天行2011-08-17 19:11:07回复评论
好看一些啊。
宇天行2011-08-17 19:10:43回复评论
有意思就好。
宇天行2011-08-17 19:10:18回复评论
呵呵,这句话不错。。。
花旗2011-08-17 00:27:37回复评论
[F]Misdoubt[/F]
花旗2011-08-17 00:26:11回复评论
代码加哪里?
花旗2011-08-17 00:25:08回复评论
哈哈,挺漂亮的。。
宇天行2011-08-15 21:39:46回复评论
评论之星哦,多谢支持。。
宇天行2011-08-15 22:31:16回复评论
你不会是把那张图片当成了评论框吧。。。。呵呵。。。[F]Haha[/F]
宇天行2011-08-15 21:32:10回复评论
怎么了?图片是个TAGS链接。。
宇天行2011-08-15 21:31:34回复评论
是吗?呵呵。。
宇天行2011-08-15 21:31:13回复评论
这和本文有什麽关系?
宇天行2011-08-15 21:30:27回复评论
对啊,大家关心的不就是这些么。。。
宇天行2011-08-15 20:48:21回复评论
随你。。。要加个链接哈。。
宇天行2011-08-15 20:47:23回复评论
呵呵,喜欢就常来。。
宇天行2011-08-29 23:17:14回复评论
嗯,是比以前好看一点。。
宇天行2011-08-15 20:46:43回复评论
我觉得正合适哈。。
宇天行2011-08-15 20:45:41回复评论
看起来是舒服一点。。。
宇天行2011-08-15 18:43:32回复评论
生来就折腾命啊。。。
宇天行2011-08-15 00:00:04回复评论
谢谢,一定不会让你失望。。。。
日欧冠2011-08-15 00:26:09回复评论
我也觉得挺不错的啊。
宇天行2011-08-14 23:57:41回复评论
呵呵,大家觉得好就行。。
引用2011-08-17 18:07:04回复评论
这个留言没删真是奇迹。
dzjkwnet2012-10-19 13:32:28回复评论
嗯,确实挺不错的分享文章,欢迎进入我的网站(www.dzjkw.net)。
www.banfangw.com2012-10-15 19:58:43回复评论
嗯,确实挺不错的分享文章991586
kaixin9852012-10-10 11:27:35回复评论
写的实在是太好了,一定要支持一下775495
ghjss2012-10-10 11:00:32回复评论
嗯,确实挺不错的分享文章,伴侣友链论坛banluyoulian.com谢谢啦!
ghjss2012-10-08 21:09:08回复评论
路过看看aidaaili.com爱搭爱理酒店预订网学习了,谢谢分享!
www.bbhyw.com2012-10-05 16:41:06回复评论
嗯,确实挺不错的分享文章292769
很不错,学习了
suN2012-01-29 11:14:11回复评论
不错不错~
易培训吧2011-11-04 19:50:43回复评论
这可是好东西呀
三防手机2011-11-03 10:36:33回复评论
多做一些不一样的东西在里面就会成为个性特色
王朋雨博客2011-11-01 21:37:21回复评论
楼顶说什么,挺乱的我不明白
忆草2011-08-26 22:59:57回复评论
不错有点意思 呵呵
宇天行2011-08-29 23:20:40回复评论
。。。
影评2011-08-18 15:38:54回复评论
博主的博客就弄得挺漂亮的,而且还保护眼睛
宇天行2011-08-18 21:47:28回复评论
就是为了保护你的眼睛,才设计成这样的哦。。[F]Haha[/F]
在线代理2011-08-17 21:28:44回复评论
好,过来继续支持,
宇天行2011-08-17 22:59:48回复评论
呵呵,挺热心的啊。。。
地球博客2011-08-17 17:22:28回复评论
各有特色,耳目一新。
宇天行2011-08-29 23:02:22回复评论
呵呵,是啊。
黄石SEO2011-08-17 16:30:00回复评论
加点东西是不太一样了,感觉还蛮有新意的!
宇天行2011-08-17 19:11:07回复评论
好看一些啊。
爱米特2011-08-17 14:17:49回复评论
不错不错有点意思 呵呵
宇天行2011-08-17 19:10:43回复评论
有意思就好。
走过一个人生,滑过一个生活,逛过一个博客,只为等那一个对的人的出现。
宇天行2011-08-17 19:10:18回复评论
呵呵,这句话不错。。。
花旗2011-08-17 00:27:15回复评论
怎么评论跑回复这里来了。
花旗2011-08-17 00:27:37回复评论
[F]Misdoubt[/F]
确实是很给力的东西…支持.