奇新CMS/代码样式说明
来自站长百科
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
……
<div id="page">
<div id="header"> <span> <!--Logo--> </span> <span> <!--Banner--> </span> </div>
<div id="menubar">
<ul class="menuList clearfix">
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<div id="navbar"><!--navbar--> </div>
<div id="content">
<div id="sidebar">
<div class="sidebar_h"></div>
<div class="sidebar_b">
<div class="box2">
<div> <b><!--box2--></b><i></i> </div>
<div class="box2_b"><b></b><i class="br"></i> </div>
<div class="box2_f"><b></b><i></i></div>
</div>
<div>
<div class="box2_h"> <b><!--box2--></b><i></i> </div>
<div class="box2_b"><b></b><i class="br"></i> </div>
<div class="box2_f"><b></b><i></i></div>
</div>
</div>
<div class="sidebar_f"></div>
</div>
<div id="main">
<div>
<div class="box_h"> <b><!--box--></b><i></i> </div>
<div class="box_b"><b></b><i class="br"></i> </div>
<div class="box_f"><b></b><i></i></div>
</div>
<div class="box">
<div> <b><!--box--></b><i></i> </div>
<div class="box_b"><b></b><i class="br"></i> </div>
<div class="box_f"><b></b><i></i></div>
</div>
</div>
</div>
<div id="footer">
<p> <!--Default Footer--> </p>
</div>
</div>
……
</body>
</html>
当了解奇新CMS页面代码后，就可以设计新的主题样式了。刚开始也许还不太熟悉，建议采用从整体到局部的方式设计，得到网页效果图并完成切图后，先添加外层标签样式（如#page等），这样可以看到整体页面效果，再编写#menubar, #navbar, .box, .box2，menuList2,. ser_online , .forum_ulist, .forum_table, .boxx, .forum_title, .forum_list 等样式。
可以使用预定义样式，当然也可以修改预定义样式以实现个性化页面，然后再做浏览器兼容性测试，最终完成主题样式的开发工作。
- 页面标签CSS背景图片的使用
奇新CMS全部应用CSS背景图片来呈现页面整体效果，做到表现与内容的完全分离，从而实现整站换肤的功能。每套主题样式采用自适应宽度的背景图片，这样只需要通过修改样式即可实现页面不同宽度的多种布局。
- 背景图片
背景图片主要用于以下标签：
html，body，#page，#header，#footer，#menubar，. menuList，. menuList li{}，
. menuList li a{}，. menuList li a:hover{}， #navbar，#content，.box, .box2等。
结合网页整体布局，可能添加的背景图片有：
.logo，. banner，#main，#sidebar，.sidebar_h，.sidebar_b，.sidebar_f等。
- 页面图标
页面图标主要用于如下标签：
.menulist li{} , .menulist li a {} , .menulist li a:hover {}
#navbar {}
. box_h b {} , box2_h b {}
. menuList2 li{} , . menuList2 li a{} , . menuList2 li a:hover{}
. articleList2 {}