[分享]模仿了一下 4.0 的 DIV+CSS 样式.跟大家分享一下
详细代码请看 http://www.lply.com/code.txt
顶部框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="generator" content="{$web_generator}">
<meta name="keywords" content="{$web_keywords}">
<meta name="description" content="{$web_description}">
<title>{$web_name} - {$web_tit}</title>
{$skin_css}
<script language=javascript src="{$web_dir}style/Functions.js"></script>
<body topmargin=0 leftmargin=0>
<center>
头部框架
{$lefter}
<div class="Header">
<div class="HeaderFrame">
<div class="HeaderLogo"><img border="0" src="/images/top_logo.gif"></div>
<div class="HeaderNav">
<div class="HeaderTop">
<div class="left"> </div>
<div class="item">
<a class="user"><%=user.username%>，您好 <span id="user_mail_new"></span></a>
<%if not user.isLogin() then%>
<a href="../User/register.asp">免费注册</a>
<%end if%>
<a href="../User/index.asp">用户中心</a>
<a href="../Common/help.asp">支持中心</a>
<a href="javascript:;" οnclick="javascript:window.external.AddFavorite('{$web_url}','{$web_name}')">收藏</a>
</div>
<div class="right"> </div>
</div>
<script language=JavaScript>
<!--
function doShowMailNew(strnum,strdir)
{
if (strnum<1) return;
if (strdir==null || strdir=="") strdir="/url.skin/images/account/";
var tmpstr="";
tmpstr+="<img class=/"icon/" src=/""+strdir+"ico_mail_new.gif/"> ";
tmpstr+="<a href=/"/url.account/mail.asp/">您有<font class=/"light/">"+strnum+"</font>条新短信</a>";
tmpstr+="<bgsound src=/""+strdir+"mail_sound.wav/">";
VDCSbrowser.getObject("user_mail_new").innerHTML=tmpstr;
}
doShowMailNew(0);
-->
</script>
<div class="space"></div>
<div class="HeaderMenu">
<div class="left"> </div>
<div class="item">
{$menu}
</div>
<div class="right"> </div>
</div>
</div>
</div>
</div>
{$righter}
{$ukong}
尾部框架
{$lefter}
<!-- -------------------- -->
<div id="Footer">
<div id="FooterFrame">
<div id="FooterAds">AD<br></div>
<div id="FooterMenu">
<div id="FooterMenuLeft"></div>
<div id="FooterMenuBody">
<div class="left">
<ul>
<li><a href="{$web_dir}Common/Help.asp">关于我们</a></li>
<li><a href="{$web_dir}Common/GuestBook.asp">网站留言</a></li>
<li><a href="{$web_dir}Common/Links.asp">友情链接</a></li>
<li><a href="{$web_dir}Common/Online.asp">与我在线</a></li>
</ul>
</div>
<div class="right"><a href="#top"><img border="0" src="/images/footer_top.gif"></a></div>
</div>
<div id="FooterMenuRight"></div>
</div>
<div id="FooterInfo">
<p>版权所有 2006 <a href="{$web_url}" target="_blank">{$web_name}</a> <a href="{$web_url}" target=_blank><b><font face=Arial>WWW.</font><font face=Arial color=#CC3300>LPLY</font><font face=Arial>.COM</font></b></a></p>
<p>地址: xxxxxxxxxx 电话: (86)000-0000000</p>
<p>本网站基于 <span class="version"><a href="http://www.lply.com/cms/4.0" target="_blank"><font class="name">LPLY CMS</font> <font class="no">4.0</font> <font class="mark">Beta1</font></a></span> 技术架构</p>
</div>
<div>
</div>
<div style="display:none;"></div>
<div style="text-align:center;"><font class="gray"></font></div>
</center>
</body>
</html>
{$righter}
<div id="container"><!--页面层容器-->
<div id="Header"><!--页面头部-->
</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->
</div>
<div id="MainBody"><!--主体内容-->
</div>
</div>
<div id="Footer"><!--页面底部-->
</div>
</div>
今天用自己的程序 试着修改成跟 4.0 一样的 DIV+CSS 并且模板方面尽可能的按照4.0的来做...
发现原来还真挺麻烦...
花了半个多小时才弄出一个论坛首页..
不过效果还是很不错的..
代码如下...希望能给大家点思路...
发现原来还真挺麻烦...
花了半个多小时才弄出一个论坛首页..
不过效果还是很不错的..
代码如下...希望能给大家点思路...
详细代码请看 http://www.lply.com/code.txt
顶部框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="generator" content="{$web_generator}">
<meta name="keywords" content="{$web_keywords}">
<meta name="description" content="{$web_description}">
<title>{$web_name} - {$web_tit}</title>
{$skin_css}
<script language=javascript src="{$web_dir}style/Functions.js"></script>
<body topmargin=0 leftmargin=0>
<center>
头部框架
{$lefter}
<div class="Header">
<div class="HeaderFrame">
<div class="HeaderLogo"><img border="0" src="/images/top_logo.gif"></div>
<div class="HeaderNav">
<div class="HeaderTop">
<div class="left"> </div>
<div class="item">
<a class="user"><%=user.username%>，您好 <span id="user_mail_new"></span></a>
<%if not user.isLogin() then%>
<a href="../User/register.asp">免费注册</a>
<%end if%>
<a href="../User/index.asp">用户中心</a>
<a href="../Common/help.asp">支持中心</a>
<a href="javascript:;" οnclick="javascript:window.external.AddFavorite('{$web_url}','{$web_name}')">收藏</a>
</div>
<div class="right"> </div>
</div>
<script language=JavaScript>
<!--
function doShowMailNew(strnum,strdir)
{
if (strnum<1) return;
if (strdir==null || strdir=="") strdir="/url.skin/images/account/";
var tmpstr="";
tmpstr+="<img class=/"icon/" src=/""+strdir+"ico_mail_new.gif/"> ";
tmpstr+="<a href=/"/url.account/mail.asp/">您有<font class=/"light/">"+strnum+"</font>条新短信</a>";
tmpstr+="<bgsound src=/""+strdir+"mail_sound.wav/">";
VDCSbrowser.getObject("user_mail_new").innerHTML=tmpstr;
}
doShowMailNew(0);
-->
</script>
<div class="space"></div>
<div class="HeaderMenu">
<div class="left"> </div>
<div class="item">
{$menu}
</div>
<div class="right"> </div>
</div>
</div>
</div>
</div>
{$righter}
{$ukong}
尾部框架
{$lefter}
<!-- -------------------- -->
<div id="Footer">
<div id="FooterFrame">
<div id="FooterAds">AD<br></div>
<div id="FooterMenu">
<div id="FooterMenuLeft"></div>
<div id="FooterMenuBody">
<div class="left">
<ul>
<li><a href="{$web_dir}Common/Help.asp">关于我们</a></li>
<li><a href="{$web_dir}Common/GuestBook.asp">网站留言</a></li>
<li><a href="{$web_dir}Common/Links.asp">友情链接</a></li>
<li><a href="{$web_dir}Common/Online.asp">与我在线</a></li>
</ul>
</div>
<div class="right"><a href="#top"><img border="0" src="/images/footer_top.gif"></a></div>
</div>
<div id="FooterMenuRight"></div>
</div>
<div id="FooterInfo">
<p>版权所有 2006 <a href="{$web_url}" target="_blank">{$web_name}</a> <a href="{$web_url}" target=_blank><b><font face=Arial>WWW.</font><font face=Arial color=#CC3300>LPLY</font><font face=Arial>.COM</font></b></a></p>
<p>地址: xxxxxxxxxx 电话: (86)000-0000000</p>
<p>本网站基于 <span class="version"><a href="http://www.lply.com/cms/4.0" target="_blank"><font class="name">LPLY CMS</font> <font class="no">4.0</font> <font class="mark">Beta1</font></a></span> 技术架构</p>
</div>
<div>
</div>
<div style="display:none;"></div>
<div style="text-align:center;"><font class="gray"></font></div>
</center>
</body>
</html>
{$righter}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DIV结构如下：
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此,页面布局与规划已经完成， 接下来我们要做的就是开始书写HTML代码和CSS。
│body {} /*这是一个HTML元素，具体我就不说明了*/
└#Container {} /*页面层容器*/
├#Header {} /*页面头部*/
├#PageBody {} /*页面主体*/
│ ├#Sidebar {} /*侧边栏*/
│ └#MainBody {} /*主体内容*/
└#Footer {} /*页面底部*/
至此,页面布局与规划已经完成， 接下来我们要做的就是开始书写HTML代码和CSS。
<div id="container"><!--页面层容器-->
<div id="Header"><!--页面头部-->
</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->
</div>
<div id="MainBody"><!--主体内容-->
</div>
</div>
<div id="Footer"><!--页面底部-->
</div>
</div>
写入CSS信息，代码如下：
程序代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
扫一扫
2201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
