|
阅读:1071回复:14
blog 模板.搞了不少时间的说...
[a href="http://www.wait4c.com/"]BLOG[/a]新出的模板功能,一直没有测试~
这两天弄了下,还是挺灵活的,页面设计我不在行,只是想试下w3c的标准页面做法~ 我的首页代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>{$BLOGNAME}</title>
<style>
body {
background-color: #efefef;
font-family: tahoma;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
a {
color: #E2144A;
text-decoration : none
}
h1 h2{
font-family: tahoma;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 119px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#main {
margin-right: auto;
margin-left: auto;
width: 780px;
}
#top {
width:780px;
margin-right: auto;
margin-left: auto;
padding: 0px;
height:80px;
background-color:#ffffff;
text-align:left;
}
#banner{
width: 780px;
text-align: right;
height: 80px;
color: #ffffff;
background-image:url("palette.png");
background-repeat: no-repeat;
background-color: #cd853f;
}
#left {
text-align:left;
float:left;
}
#system {
clear:both;
width:780px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #ffffff;
height:60px;
}
#right {
float: right;
width: 640px;
border: 1px solid #cccccc;
background-color: #ffffff;
text-align:left;
padding: 4px;
}
#mask{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: #efefef;
}
#mainbg{
background-color: #ffffff;
float:left;
paddig: 4px;
width: 780px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
</style>
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>
<body>
<!--盖住底色-->
<div id="mask">
<!-- top -->
<div id="top">
<div id="banner"><h2>PaLetté </h2>God is not here now. </div>
</div>
<!-- main -->
<div id="main">
<div id="mainbg">
<div id="left">
<ul id="nav">
<li><a href="#">Function</a>
<ul>
<li><a href="../bbs/logout.asp?url=%2Fblog%2Fblog%2Easp%3Fuser%3D4618" title="LogOff">LogOff.</a></li>
<li><a href="newpost.asp" title="New Log">WritE.</a></li>
<li><a href="mytype.asp" title="Management">ManaGe</a></li>
<li><a href="../blog/" title="Blog of wait4c">BlogOfWait4C</a></li>
<li><a href="http://0000.blog.wait4c.com/" title="Home">hOme</a></li>
</ul>
</li>
<li><a href="#">New Topic</a>
<ul>
<!-- BEGIN TOPTOPIC 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC:24}">{$TOPIC:16}</A></li>
<!-- END TOPTOPIC --><BR/>
</ul>
</li>
<li><a href="#">Type</a>
<ul>
<!-- BEGIN MYTYPE -->
<li><A HREF="viewtype.asp?user={$USERID}&typeid={$ID}" title="{$TYPENAME}">{$TYPENAME}</A></li>
<!-- END MYTYPE -->
</ul>
</li>
<li><a href="#">New Comments</a>
<ul>
<!-- BEGIN TOPCOMMENT 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$COMMENT}">{$COMMENT:16}</A></li>
<!-- END TOPCOMMENT -->
</ul>
<li><a href="#">Links</a>
<ul>
<!-- BEGIN MYLINK -->
<li><A HREF="{$URL}" title="{$NAME}">{$NAME}</A></li>
<!-- END MYLINK -->
</ul>
</li>
</li>
</ul>
</div>
<div id="right">
<!-- BEGIN TOPBLOG 10 -->
<A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC}">{$TOPIC}</A><br/>
{$ABSTRACT}<br/>
发表于{$WRITETIME}<br/>
<A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC}">阅读全文</A> 共 {$COMMENTCOUNT} 篇评论
<hr height="1" style="color:#dddddd">
<br/>
<!-- END TOPBLOG -->
</div>
</div>
</div>
<!-- foot -->
<div id="system">
Owner: 0000
OICQ: 66612092
PoweredBy: wait4c.com<br/>
建议使用 1024*768 <a href="http://www.getfirefox.com/" target="_blank"><u>FireFox</u></a> 1.0 以上浏览
</div>
</div>
</body>
</html>
演示地址: http://www.wait4c.com/blog/blog.asp?user=4618 BTW:有一个小BUG, 不能在显示内容页的 title 上用 {$topic} 作为本页的标题.希望松松改进~ |
|
|
|
1C#
发布于:2005-09-11 16:24
Re:blog 模板.搞了不少时间的说...
有一个地方不标准的说~~就是页面下面的
建议使用 1024*768 <a href="http://www.getfirefox.com/" target="_blank"><u>FireFox</u></a> 1.0 以上浏览不能用 target="_blank", 要用 <a href="document.html" rel="external">打开一个新窗口</a>,并配合以下 javascript: function externallinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank";
}
}
window.onload = externallinks;
[ 2005-09-11 16:24:46 0000 修改 ] |
|
|
|
2C#
发布于:2005-09-11 16:31
Re:blog 模板.搞了不少时间的说...
汉逑! |
|
|
|
3C#
发布于:2005-09-11 16:51
Re:blog 模板.搞了不少时间的说...
楼上说什么....
刚把 css 和 javascript 从<head>中分离出来,放到文件里了. 要是可以在给编辑文件或是保持上传文件名不变就好了~~ |
|
|
|
4C#
发布于:2005-09-11 16:57
Re:blog 模板.搞了不少时间的说...
现在的状态:
以供参考 首页: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="gojyo.akayi(at)gmail.com" />
<meta name="Copyright" content="0000(at)wait4c.com版权所有" />
<meta name="description" content="0000的调色板" />
<meta content="linux java php wait4c osdn mysql oracle" name="keywords" />
<link rel="stylesheet" href="../bbs/userfiles/4618/2005091116523470250.css" type="text/css" media="all" />
<script type="text/javascript" src="../bbs/userfiles/4618/2005091116304828164.js"></script>
<title>{$BLOGNAME}</title>
</head>
<body>
<!--盖住底色-->
<div id="mask">
<!-- top -->
<div id="top">
<div id="banner" class="red_banner"><h2>PaLetté </h2>God is not here now. </div>
</div>
<!-- main -->
<div id="main">
<div id="mainbg">
<div id="left">
<ul id="nav">
<li><a href="#">Function</a>
<ul>
<li><a href="../bbs/logout.asp?url=%2Fblog%2Fblog%2Easp%3Fuser%3D4618" title="LogOff">LogOff.</a></li>
<li><a href="newpost.asp" title="New Log">WritE.</a></li>
<li><a href="mytype.asp" title="Management">ManaGe</a></li>
<li><a href="../blog/" title="Blog of wait4c">BlogOfWait4C</a></li>
<li><a href="blog.asp?user=4618" title="Home">hOme</a></li>
</ul>
</li>
<li><a href="#">New Topic</a>
<ul>
<!-- BEGIN TOPTOPIC 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC:24}">{$TOPIC:16}</A></li>
<!-- END TOPTOPIC --><BR/>
</ul>
</li>
<li><a href="#">Type</a>
<ul>
<!-- BEGIN MYTYPE -->
<li><A HREF="viewtype.asp?user={$USERID}&typeid={$ID}" title="{$TYPENAME}">{$TYPENAME}</A></li>
<!-- END MYTYPE -->
</ul>
</li>
<li><a href="#">New Comments</a>
<ul>
<!-- BEGIN TOPCOMMENT 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$COMMENT}">{$COMMENT:16}</A></li>
<!-- END TOPCOMMENT -->
</ul>
<li><a href="#">Links</a>
<ul>
<!-- BEGIN MYLINK -->
<li><A HREF="{$URL}" title="{$NAME}">{$NAME}</A></li>
<!-- END MYLINK -->
</ul>
</li>
</li>
</ul>
</div>
<div id="right">
<!-- BEGIN TOPBLOG 10 -->
<A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC}">{$TOPIC}</A><br/>
{$ABSTRACT}<br/>
发表于{$WRITETIME}<br/>
<A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC}">阅读全文</A> 共 {$COMMENTCOUNT} 篇评论
<hr height="1" style="color:#dddddd">
<br/>
<!-- END TOPBLOG -->
</div>
</div>
</div>
<!-- foot -->
<div id="system">
Owner: 0000
OICQ: 66612092
PoweredBy: wait4c.com<br/>
建议使用 1024*768 <a href="http://www.getfirefox.com/" target="_blank" title="GetFirefox from mozilla"><u>FireFox</u></a> 1.0 以上浏览
</div>
</div>
</body>
</html>
分类页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="gojyo.akayi(at)gmail.com" />
<meta name="Copyright" content="0000(at)wait4c.com版权所有" />
<meta name="description" content="0000的调色板" />
<meta content="linux java php wait4c osdn mysql oracle" name="keywords" />
<link rel="stylesheet" href="../bbs/userfiles/4618/2005091116523470250.css" type="text/css" media="all" />
<script type="text/javascript" src="../bbs/userfiles/4618/2005091116304828164.js"></script>
<title>{$THETYPENAME}-{$BLOGNAME}</title>
</head>
<body>
<!--盖住底色-->
<div id="mask">
<!-- top -->
<div id="top">
<div id="banner" class="yello_banner"><h2>PaLetté </h2>God is not here now. </div>
</div>
<!-- main -->
<div id="main">
<div id="mainbg">
<div id="left">
<ul id="nav">
<li><a href="#">Function</a>
<ul>
<li><a href="../bbs/logout.asp?url=%2Fblog%2Fblog%2Easp%3Fuser%3D4618" title="LogOff">LogOff.</a></li>
<li><a href="newpost.asp" title="New Log">WritE.</a></li>
<li><a href="mytype.asp" title="Management">ManaGe</a></li>
<li><a href="../blog/" title="Blog of wait4c">BlogOfWait4C</a></li>
<li><a href="http://0000.blog.wait4c.com/" title="Home">hOme</a></li>
</ul>
</li>
<li><a href="#">New Topic</a>
<ul>
<!-- BEGIN TOPTOPIC 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC:24}">{$TOPIC:16}</A></li>
<!-- END TOPTOPIC --><BR/>
</ul>
</li>
<li><a href="#">Type</a>
<ul>
<!-- BEGIN MYTYPE -->
<li><A HREF="viewtype.asp?user={$USERID}&typeid={$ID}" title="{$TYPENAME}">{$TYPENAME}</A></li>
<!-- END MYTYPE -->
</ul>
</li>
<li><a href="#">New Comments</a>
<ul>
<!-- BEGIN TOPCOMMENT 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$COMMENT}">{$COMMENT:16}</A></li>
<!-- END TOPCOMMENT -->
</ul>
<li><a href="#">Links</a>
<ul>
<!-- BEGIN MYLINK -->
<li><A HREF="{$URL}" title="{$NAME}">{$NAME}</A></li>
<!-- END MYLINK -->
</ul>
</li>
</li>
</ul>
</div>
<div id="right">
<FONT COLOR="#339900" STYLE="font-size: 15px">文集:{$THETYPENAME}</FONT><BR><BR>
<!-- BEGIN BLOGLIST 5 -->
<A HREF="viewtopic.asp?id={$ID}" STYLE="font-size: 14px; color: #333300">{$TOPIC}</A><BR>发表于{$WRITETIME}
{$ABSTRACT}<br/>
<A HREF="viewtopic.asp?id={$ID}">阅读全文</A> 共 {$COMMENTCOUNT} 篇评论<br/><br/>
<!-- END BLOGLIST -->
</div>
</div>
</div>
<!-- foot -->
<div id="system">
Owner: 0000
OICQ: 66612092
PoweredBy: wait4c.com<br/>
建议使用 1024*768 <a href="http://www.getfirefox.com/" target="_blank"><u>FireFox</u></a> 1.0 以上浏览
</div>
</div>
</body>
</html>
文章内容页 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh_CN">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta content="all" name="robots" />
<meta name="author" content="gojyo.akayi(at)gmail.com" />
<meta name="Copyright" content="0000(at)wait4c.com版权所有" />
<meta name="description" content="0000的调色板" />
<meta content="linux java php wait4c osdn mysql oracle" name="keywords" />
<link rel="stylesheet" href="../bbs/userfiles/4618/2005091116523470250.css" type="text/css" media="all" />
<script type="text/javascript" src="../bbs/userfiles/4618/2005091116304828164.js"></script>
<title>{$BLOGNAME}</title>
</head>
<body>
<!--盖住底色-->
<div id="mask">
<!-- top -->
<div id="top">
<div id="banner" class="green_banner"><h2>PaLetté </h2>God is not here now. </div>
</div>
<!-- main -->
<div id="main">
<div id="mainbg">
<div id="left">
<ul id="nav">
<li><a href="#">Function</a>
<ul>
<li><a href="../bbs/logout.asp?url=%2Fblog%2Fblog%2Easp%3Fuser%3D4618" title="LogOff">LogOff.</a></li>
<li><a href="newpost.asp" title="New Log">WritE.</a></li>
<li><a href="mytype.asp" title="Management">ManaGe</a></li>
<li><a href="../blog/" title="Blog of wait4c">BlogOfWait4C</a></li>
<li><a href="blog.asp?user=4618" title="Home">hOme</a></li>
</ul>
</li>
<li><a href="#">New Topic</a>
<ul>
<!-- BEGIN TOPTOPIC 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$TOPIC:24}">{$TOPIC:16}</A></li>
<!-- END TOPTOPIC --><BR/>
</ul>
</li>
<li><a href="#">Type</a>
<ul>
<!-- BEGIN MYTYPE -->
<li><A HREF="viewtype.asp?user={$USERID}&typeid={$ID}" title="{$TYPENAME}">{$TYPENAME}</A></li>
<!-- END MYTYPE -->
</ul>
</li>
<li><a href="#">New Comments</a>
<ul>
<!-- BEGIN TOPCOMMENT 7 -->
<li><A HREF="viewtopic.asp?id={$ID}" title="{$COMMENT}">{$COMMENT:16}</A></li>
<!-- END TOPCOMMENT -->
</ul>
<li><a href="#">Links</a>
<ul>
<!-- BEGIN MYLINK -->
<li><A HREF="{$URL}" title="{$NAME}">{$NAME}</A></li>
<!-- END MYLINK -->
</ul>
</li>
</li>
</ul>
</div>
<div id="right">
<!-- BEGIN ARTICLE -->
<A HREF="viewtopic.asp?id={$ID}" STYLE="font-size: 14px; color: #333300">{$TOPIC}</A><BR> <SPAN STYLE="color: #669999; font-size: 12px; font-family: Verdana; line-height: 20px">发表于{$WRITETIME}</SPAN><br/>
{$CONTENT}<br/>
{$TOPICMANAGE}
<!-- END ARTICLE -->
<!--评论-->
<!-- BEGIN COMMENT -->
{$NAME}({$TIME}): <BR>
{$COMMENT}<BR><BR>
<!-- END COMMENT -->
发表评论<BR>
{$REPLYTOPIC}
</div>
</div>
<!-- foot -->
<div id="system">
Owner: 0000
OICQ: 66612092
PoweredBy: wait4c.com<br/>
建议使用 1024*768 <a href="http://www.getfirefox.com/" target="_blank"><u>FireFox</u></a> 1.0 以上浏览
</div>
</div>
</div>
</body>
</html>
css 文件: body {
background-color: #efefef;
font-family: tahoma;
font-size: 12px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
}
a {
color: #E2144A;
text-decoration : none
}
h1 h2{
font-family: tahoma;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 119px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#main {
margin-right: auto;
margin-left: auto;
width: 780px;
}
#top {
width:780px;
margin-right: auto;
margin-left: auto;
padding: 0px;
height:80px;
background-color:#ffffff;
text-align:left;
}
#banner{
width: 780px;
text-align: right;
height: 80px;
color: #ffffff;
background-image:url("./2005091109542552106.png");
background-repeat: no-repeat;
}
.green_banner{
background-color: #32cd32;
}
.red_banner{
background-color: #e2144a;
}
.yello_banner{
background-color: #ba55d3;
}
#left {
text-align:left;
float:left;
}
#system {
clear:both;
width:780px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #ffffff;
height:60px;
}
#right {
float: right;
width: 640px;
border: 1px solid #cccccc;
background-color: #ffffff;
text-align:left;
padding: 4px;
}
#mask{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: #efefef;
}
#mainbg{
background-color: #ffffff;
float:left;
paddig: 4px;
width: 780px;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
js 文件: startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
[ 2005-09-11 16:59:42 0000 修改 ] |
|
|
|
5C#
发布于:2005-09-11 17:06
Re:blog 模板.搞了不少时间的说...
我只会把主页弄的花里胡哨的,
别的都还不会呢,学习中~~~~~`````` |
|
|
6C#
发布于:2005-09-11 17:08
Re:blog 模板.搞了不少时间的说...
哈哈....刚发现楼上的BLOG也是用的DIV布局~~
DIV似乎正在成熟~~ |
|
|
|
7C#
发布于:2005-09-11 17:15
Re:blog 模板.搞了不少时间的说...
又发现一个BUG,在使用模板后就不能用 <a href="viewtype.asp?user=4618" title="undefined">Undefined</a>来显示"未分类"的log了`~ |
|
|
|
8C#
发布于:2005-09-11 21:06
Re:blog 模板.搞了不少时间的说...
0000,你说的两个问题已经改正了,请查收 |
|
|
|
9C#
发布于:2005-09-12 20:32
Re:blog 模板.搞了不少时间的说...
嘿嘿,文章内容页是按楼主的改的,不介意吧?哈哈~~~~~~~~~~` |
|
|
10C#
发布于:2005-09-12 22:07
Re:blog 模板.搞了不少时间的说...
哈哈,欢迎参与测试~~ |
|
|
|
11C#
发布于:2005-09-12 22:28
Re:blog 模板.搞了不少时间的说...
to banruozhu:
对不起,偶过去看看你那个页面的时候顺手做个测试,发现出了问题....可能你的blog暂时不能正常使用,偶明天给你想办法哦,8好意思,偶8是故意的... PS:还好发现了这个BUG,回头找松松~~ |
|
|
|
12C#
发布于:2005-09-12 22:40
Re:blog 模板.搞了不少时间的说...
晕,老大,你涮我吧~~~~~~~~~~`` |
|
|
13C#
发布于:2005-09-12 22:42
Re:blog 模板.搞了不少时间的说...
不对啊,首页的不是按你的弄的,怎么连首页都影响了?
奇怪~~~~~~~~~~~ |
|
|
14C#
发布于:2005-09-13 10:52
Re:blog 模板.搞了不少时间的说...
已经改好了。呵呵,0000 不厚道啊,拿别人的 BLOG 做试验 |
|
|