昨起兴折腾的《对留言输入框的小小美化》,反响不错,受各位童鞋喜爱,今儿继续,来个无图纯代码实现方法。
还是先改动comments.php,请童鞋对比查看,没的加上去,多的删去,或者直接复制此段代码替换相应代码:
<div> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1"/> <label for="author"><small>昵称:</small><?php if ($req) _e(" "); ?></label> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2"/> <label for="email"><small>邮箱:</small><?php if ($req) _e(" "); ?></label> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /> <label for="url"><small>网址:</small></label> </div>
再添加以下代码至style.css:
#respond form input {font:12px;color:#333;width:170px;padding:3px 3px 3px 45px;margin-right:10px;} #respond form div {margin:0 0 10px 3px;} #respond form div label {margin-left:-40px;} #respond form div label small {color:#777; font-size:16px; position:relative;left:-190px;} *html #respond form div label small {position:relative; top:-2px;} *+html #respond form div label small {position:relative; top:-2px;}
OK,效果是不是一样呀?而且还省了3张图片哦~鼓掌!!!
PS:CSS代码参考Wopus中文博客平台,酋长可别怪我不问自求哦~细



呵呵,用图好看点;
要是人家没安装雅黑……
@未命名文档 那也是,不过速度是王道,为了这一点点要加载3张图片不值的……
突然发现:我们的顶部导航条是一样的啊!
难道是意外?好奇妙啊!
好有个性哦
@filescn 多谢支持~~
技术巾,好好学习一下。
先留个脚印
我是来拿‘技术的’
我是来偷技术的
偶的使用中………
友情路过!在IE下出现昵称邮箱网址掉下来了,鼠标放到input时回到应该位置.不知道是不是我个人有这情况
@Await 我这IE8及兼容模式,chrome下都没问题……
我试过了,可惜不适合我的留言板,我的commentform没你这么宽。。。
简洁大方!
@颜小城 不妨拿去小折腾一下,对熟悉CSS也挺有帮助地!
折腾过了,你过来看看我的评论框,就是模仿你的样式,算不算盗版了你的呀?
BTW:我静态化了全站,能告诉我如何隐藏资料框吗?网上的方法好像不行
挺不错的,比在下面加一段汉字强。
木木的网速很快啊,用缓存插件了么?
只做了头像缓存,小张的主机总体来说还是非常优秀的~
效果跟你的评论框一样吗?
恩,是的~
看来我的主题不支持那个~~~~~~
这个是CSS,啥主题都行吧?
怎么实现点击图片,这个评论框背景消失呢?
就是输入文字的时候 背景消失。