被迫琢磨Blog网页代码

      技术迷 2004-7-11 18:39
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中编辑模板的时候直接插入的。
上面的工具栏第二行倒数第五个按钮就成的这个作用,我还搞了半天。好菜呀……

不过,当年秦始皇焚书坑儒,让百姓“以吏为师”,我在身边也找不到什么老师,一向就只好“以已为师”,这,是不是我聊可自夸的地方呢?
标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}
}