.

被迫琢磨Blog网页代码 [2004-07-11] luscky 发表在 我做


--------------------------------------------------------------------------------

到Dengjie's Blog上，看到他那儿有个下拉列表，不知道怎么搞，就使出老办法：查看源代码。把这样一段代码＾C出来，再＾V进自己的模板中，就OK了。

<SELECT class=butno
onchange="if(this.selectedIndex &amp;&amp; this.selectedIndex != 0)
{ window.open(this.value); } this.selectedIndex=0;">
<OPTION value="=== 我的书签 ===" selected>=== 我的书签 ===</OPTION>
<OPTION value=http://www.5dblog.com/service/gotolink.asp?id=587&amp;
url=http://www.dengjie.com/>Dengjie‘s Blog</OPTION>
</SELECT>


简要分析：（代码盲，纯粹瞎猜）
select是下拉列表标志；
class大约是样式风格；
onchange后应当是执行的程序动作；
option后面是相应的链接。

弄完之后，还挺得意呢，又觉得排版不好看，就上下挪了一番，可谁承想，却把左边的栏目样式搞得是乱七八糟。

这下可费了大劲了，我原来对自己的版面是挺喜欢的，这下如何还原呢？不由后悔当初怎么也不备份一下。

没办法，只好找个新的未经过修改的Blog，（因为我用的是默认的模板）打开代码看一看→重新登录→进入本站改一改→重新登录→再打开新的看一看→再重新登录→再进入本站改一改……

一个下午就这样过去了……

总算还原，现在总结一下：
1、代码开头的全局样式定义很重要，是对整个版面起作用的，后面的只要调用就成了。

/******* 全局样式定义 *******/
body,td,p,div,input,select,textarea{font-family: "Verdana","Arial"; font-size:12px}
a {color: #0000ff; text-decoration: none}
a:hover {color: #cc6600}
table.pan {text-align:center}
td.pantitle {font:bold 12px;letter-spacing:2px;color:white;
background-color:#7388c1;line-height:normal;padding:4 2 2 2}
td.pancontent {border:1px solid #666666;background-color:#bfcae6}
td.pansplit {height:5px}
.digital {font-family:Georgia}


其中，td.pantitle、td.pancontent和td.pansplit分别定义了左边栏目中的标题单元格、内容单元格和空单元格的样式。
后面要用到时，只要这样调用就成了：（以“最新评论”的标题单元格为例，其他相似）

<TR>
<TD class=pantitle>
<P align=center><FONT color=#ffffff>最新评论</FONT></P></TD></TR>


2、下拉列表也是可以在5DBlog中编辑模板的时候直接插入的。
上面的工具栏第二行倒数第五个按钮就成的这个作用，我还搞了半天。好菜呀……

不过，当年秦始皇焚书坑儒，让百姓“以吏为师”，我在身边也找不到什么老师，一向就只好“以已为师”，这，是不是我聊可自夸的地方呢？