奇新CMS/代码样式说明

来自站长百科
跳转至: 导航、​ 搜索

奇新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 {}


参考来源[ ]

奇新CMS使用手册导航

安装

系统安装

后台管理

基本信息|网站设置|论坛管理|专题管理|属性值|宣传管理友情链接管理|用户管理|公告管理|文章发布|文章内容修改|文章其他操作|主题管理|插件制作配置|

模版标签

模版安装配置|添加飘浮图片|添加宣传图片|添加地图|属性值使用|栏目链接引用|列表添加|其他标签

主题样式

代码样式说明|页面布局调整|视频列表网页代码及样式|书刊列表网页代码及样式|#main网页代码及样式|#sidebar网页代码及样式|文章正文网页代码及样式|无缝滚动图片网页代码及样式|图片列表网页代码及样式|栏目分类列表网页代码及样式|图片新闻网页代码及样式|文章列表网页代码及样式|栏目列表网页代码及样式|.box区域网页代码及样式|#menubar菜单代码及样式|#header菜单代码及样式