百度空间 | 百度首页 
               
 
查看文章
 
【原】第一时间给出“留言板”代码
2007/02/07 10:34 P.M.

  今天,百度空间终于给用户增加了留言板功能!真是千呼万唤始出来,迫不及待的测试出留言板区域的CSS代码,测试方法可参考【原】百度空间CSS终极技巧。如有遗漏,敬请指正。

  另外,大家改模版的时候要注意,留言板的首页样式是追加在最新评论区(#m_comment)后面的,而内部页面是追加在用户评论区(#in_send)后面的,所以有些改动可能会影响原来的模板样式。

/******留言板******/
#mod_board.mod{} /*留言板模块*/
#mod_board table.modth{} /*以下6项如果不设定则继承通用模块的样式*/
#mod_board td.modtl{}
#mod_board div.modhead{}
#mod_board span.modtit{}
#mod_board td.modtc{}
#mod_board td.modtr{}

/*其它代码与最新评论区完全相同,可以用#mod_board罩着修改,但一定要放到评论区代码的后面才能生效*/

/******留言板内部页面******/
#spBCmtAuthor{} /*留言姓名输入框*/
#spBCmtURL{} /*留言网址输入框*/
#spBCmtText{}   /*留言输入框*/
#vercode input{}   /*验证码输入框*/
#in_send td.f14 input{} /*添加留言按钮*/

#in_msg {} /*留言区*/
#in_msg div.tit{} /*留言区标题*/
#in_msg a{} /*留言区链接*/
#in_msg a:hover{} /*悬停效果*/
#in_msg td.index{} /*留言序号*/
#in_msg div.user{} /*留言用户*/
#in_msg div.user a img{} /*用户头像*/
#in_msg div.user a:hover img{} /*悬停效果*/
#in_msg td.cnt{} /*留言时间*/
#in_msg div.desc{} /*留言内容*/
#in_msg div.line{} /*分界线*/

p.s. CSS初学者可以略过下面的内容,建议CSSer参考一下。

  由于留言板内部页面与评论区域的代码交叉嵌套,因此在设计模板时应注意语句的先后顺序,这一点在monyer《致Baiduer CSS初学者》中已详细指出。下面给出评论区与留言区的建议语句排序:

/******内部发表评论区域******/
#in_send{} /*发表评论区域背景*/
#in_send input{} /*内部发表评论及留言区域的输入区,包括单选框、文本框和按钮*/
#in_send div.tit{} /*发表评论标题*/
#in_send table{} /*发表评论内容*/
#in_send td.f14{} /*提示语*/
input.#spBlogCmtor{} /*姓名输入框*/
input.#spBlogCmtURL{} /*网址输入框*/
#spBlogCmtText{}   /*评论输入框*/

/******留言板内部页面******/
input.#spBCmtAuthor{} /*留言姓名输入框*/
input.#spBCmtURL{} /*留言网址输入框*/
#spBCmtText{}   /*留言输入框*/
#vercode input{}   /*验证码输入框*/
#in_send td.f14 input{} /*留言按钮*/

#in_msg{} /*留言区*/
#in_msg div.tit{} /*留言区标题*/
#in_msg a{} /*留言区链接*/
#in_msg a:hover{} /*悬停效果*/
#in_msg table.item{} /*留言列表*/
#in_msg td.index{} /*留言序号*/
#in_msg div.user{} /*留言用户*/
#in_msg div.user a img{} /*用户头像*/
#in_msg div.user a:hover img{} /*悬停效果*/
#in_msg td.cnt{} /*留言时间*/
#in_msg div.desc{} /*留言内容*/
#in_msg div.line{} /*分界线*/

  其中部分代码与之前给出的代码略有出入(例如input.#spBCmtAuthor{}),这是因为相关的html代码为:

...
<td class="f14">姓 名:</td>
<td><input type="text" name="spBCmtAuthor" id="spBCmtAuthor" style="width:220px" onKeyDown="cont(this,50);" onKeyUp="cont(this,50);" maxlength="49"></td>
...

  因此,input.#spBCmtAuthor{}的写法比#spBCmtAuthor{}更为精确。 另外,#in_send input{} 可用来控制留言板“姓名”单选框的样式。但一定要把它提到最前,否则,会干扰姓名、网址等输入框的样式。

相关文章:【原】分享模板,分享快乐
     【原】百度空间CSS终极技巧
     【原】旧报纸模板
     【原】博客流量统计


类别:学学用用 | 添加到搜藏 | 浏览() | 评论 (229)
 
最近读者:
 
网友评论:
1
2007/02/07 10:45 P.M. | 回复
先沙发了
 
2
2007/02/07 10:46 P.M. | 回复
饿```真是感激```
 
3
2007/02/07 10:49 P.M. | 回复
稍等,这只是留言板页面的代码,我马上给出首页的代码~
 
4
2007/02/07 10:50 P.M. | 回复
█◤☆◥◤☆◥█ 送星星千百颗... █☆☆☆☆☆☆█ █◣☆☆☆☆◢█ 生命活的精彩灿烂... ██◣☆☆◢██ ███◣◢███ 愿你快乐 ^_^ #〓?〓〓〓〓〓?〓〓〓〓〓〓?〓〓〓〓〓?〓#   ↓     ↓      ↓     ↓  ☆★☆   ☆★☆    ☆★☆   ☆★☆ ☆ 祝 ☆ ☆ 你 ☆  ☆ 幸 ☆ ☆ 福 ☆  ☆★☆   ☆★☆    ☆★☆   ☆★☆   ↓     ↓      ↓     ↓   ※     ※      ※     ※   ★★★   ★★★  ★★★★★ ★★★★★   ★★★★★★★★★★★ 祝你快乐!   ★★★★★★★★★    ★★★★★★★     ★★★★★      ★★★       ★ 有时间记得回访哦~~~~~~~~~~~~~
 
5
2007/02/07 11:15 P.M. | 回复
- -
 
6
2007/02/07 11:18 P.M. | 回复
向你学习了。
 
7
2007/02/07 11:20 P.M. | 回复
高手
 
8
2007/02/07 11:31 P.M. | 回复
真的好厉害`` !!
 
9
2007/02/07 11:43 P.M. | 回复
路过
 
10
2007/02/08 07:41 A.M. | 回复
呵呵,厉害,比偶的详细多了 ---------土豆
 
11
2007/02/08 07:45 A.M. | 回复
鱼不懂这个,还是将就着用吧,呵呵!
 
12
2007/02/08 09:55 A.M. | 回复
我也不懂...
 
13
2007/02/08 12:19 P.M. | 回复
呵呵 不算晚 3Q 回去研究咯~
 
14
2007/02/08 12:34 P.M. | 回复
临时将空间底色调整了一下,希望能让你下次访问时候眼睛会舒服点! 感谢你的宝贵意见! 可以加你为好友吗? 请求偶已经发出,可以的话不妨将我加到你的好友中。
 
15
2007/02/08 12:35 P.M. | 回复
借用你的文章!
 
16
2007/02/08 01:06 P.M. | 回复
呵呵 今天正找着 留言版的原代码 没想到你这早就写出来了 感谢ING
 
17
2007/02/08 01:30 P.M. | 回复
我是新来的,请多多指教,祝一切随心
 
18
2007/02/08 01:50 P.M. | 回复
哈哈!猎猪犬-藏獒有办法训练了!
 
19
2007/02/08 01:51 P.M. | 回复
可惜,我的个人档案打不开,郁闷~~`
 
20
2007/02/08 03:08 P.M. | 回复
汗= = 完全不懂的= =
 
21
2007/02/08 04:07 P.M. | 回复
额 在主页的代码不懂= =
 
22
2007/02/08 04:09 P.M. | 回复
你的空间真是好看,设计的独具一格!
 
23
2007/02/08 04:13 P.M. | 回复
过奖了,那些都是形式,好博客的唯一标准还是内容~
 
24
2007/02/08 05:25 P.M. | 回复
厉害!!可惜不是太懂!!
 
25
2007/02/08 09:29 P.M. | 回复
#mod_board.mod {color:#33D6FF;font-size:12px;line-height:15px;text-indent:25px;background:url(http://pic.23717.com/pic/icon/15/icon1/1990.gif) no-repeat;} 好像弄不起来= =
 
26
2007/02/08 09:37 P.M. | 回复
#mod_board.mod 在最底层,会被上面的modth盖住,你可以试试加在#mod_board table.modth{}里~
 
27
2007/02/08 09:39 P.M. | 回复
形式都很好,内容都不懂
 
28
2007/02/08 10:07 P.M. | 回复
帖吧地址:http://post.baidu.com/f?kz=170743811
 
29
2007/02/08 10:10 P.M. | 回复
我试试
 
30
2007/02/08 10:12 P.M. | 回复
8懂 我就是想像友情连接前的象素图图一样= =
 
31
2007/02/08 10:14 P.M. | 回复
我帮你看看啊~~
 
32
2007/02/08 10:18 P.M. | 回复
嗯啊~ 嘿嘿~
 
33
2007/02/08 10:21 P.M. | 回复
忘记了···偶明天还得上课= = GG~ THANKS 我明天回来继续研究~嘿嘿~
 
34
2007/02/08 10:23 P.M. | 回复
把你的#m_comment div.item改称下面的样式即可~ #m_comment div.item{color:#33D6FF;font-size:12px;line-height:15px;text-indent:25px;background:url(http://pic.23717.com/pic/icon/15/icon1/1990.gif) no-repeat;}
 
35
2007/02/08 10:51 P.M. | 回复
您要不说 我还没发现这个......
 
36
2007/02/08 11:55 P.M. | 回复
小弟今年上大学,准备学计算机,好佩服大哥~~~~ 一定多学学
 
37
2007/02/09 04:45 A.M. | 回复
问一下,怎么自己制作这个,看着这么难?我要什么都要自己做出来的,能做么?
 
38
2007/02/09 04:49 A.M. | 回复
怎么自己做啊!!!!!急死我了。。555555555555555555
 
39
2007/02/09 06:32 P.M. | 回复
如果是初学者还是慢慢来吧,微雨心情的空间有很多不错的教程。
 
41
2007/02/10 03:53 P.M. | 回复
哎 我最差劲了 什么都不会 在学哦 5555555555
 
42
2007/02/10 03:56 P.M. | 回复
额 不知 汗哪.....
 
43
2007/02/10 07:17 P.M. | 回复
太强了~!你`~~谢S了`~~~!!!! 虽然我看不懂~但还是很大胆的乱点复制了一段,然后再很大胆的给括号里加上颜色,贴到代码那里去了`~~嘿嘿`~真的把我的问题解决啦~~~我的留言区字体终于不再因为颜色问题而看不到了~~~~呵呵嘿嘿`~~
 
44
2007/02/11 03:25 P.M. | 回复
工人是不低头的。
 
45
2007/02/11 04:14 P.M. | 回复
谢谢~~~^-^~~
 
46
2007/02/11 07:56 P.M. | 回复
dasdasdsa
 
47
2007/02/11 11:36 P.M. | 回复
哈哈 正找这代码呢
 
48
2007/02/12 08:08 A.M. | 回复
亲爱的太感谢了~! 正找呢...谢谢~!
 
49
2007/02/13 10:06 A.M. | 回复
吥會用.. - -#
 
50
2007/02/13 11:42 A.M. | 回复
太棒拉~~感谢!
 
51
2007/02/13 09:50 P.M. | 回复
看不懂!
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu