奇新CMS建站系统主题样式设计（不断补充中）

回复发帖

主题：奇新CMS建站系统主题样式设计（不断补充中）

- 作者： admin
- 发帖数：149
- 回帖数：24
- 注册日期：1970年1月1日

楼主 admin 发表于2011年3月10日上午8:02:23

奇新CMS系统采用DIV+CSS布局，不需要修改网页代码，通过设置CSS样式来控制网页布局。

#page{width:960px}：不需要考虑其子元素标签的宽度，调整较为简便。

#page{width: auto}：如果不设置其宽度，可以实现页面自适应宽度。其包含的各子元素标签#header, #menubar, #navbar , #content, #footer等根据padding数值的不同，需要单独定义其宽度。尤其对于ie6浏览器，这一点要特别注意，必须单独定义其宽度。

#page , #header , #menubar如按正常标签顺序显示图片，较为简单。如若背景图片根据页面布局需要采用绝对定位和负边距定位时（也就是菜单栏#menubar可能位于#page或#header背景图片的上侧、左侧或右侧时），必须精确定义其位置及菜单栏的显示。

.box，.box2布局：依据背景图片的大小及其位置显示，调整各标签的属性值。如采用圆角，调整标签还会有.box_f{}，. box_f b{} , box_f i{}。

.user_online{} 论坛在线用户列表调整，和整体页面保持一致。

.menuList2{} 栏目列表显示的调整。

.boxx{}，论坛帖子详细页显示，根据.box{}布局做相应的调整。

#menubar代码及样式

<div></div>为网页栏目列表，根据需要也可显示子栏目列表，支持单行、双行菜单显示，子菜单宽度自适应。

代码如下：

<li><a href="#" title="栏目名称">栏目名称（包含子菜单）</a>

<ul>

</li>

</ul>

</li>

</li>

</ul>

</div>

CSS样式示例：

#menubar{background:#96C2F1;position:relative;}

.menuList{height:45px;padding:0 30px ;line-height:45px;}

.menuList li {float:left;_display:inline;width:95px;text-align:center;border-right:1px solid #999;}

.menuList li.last{background:none}

.menuList li a{text-decoration:none;outline:none;;color:#222!important;text-align:center;width:95px;display:block;height:45px;}

.menuList li a:hover{;color:#fff!important;text-decoration:none; }

.menuList li ul.subMenuList { display:none; border:1px solid #999;border-width:1px 1px 0;}

.menuList li ul.subMenuList li{padding:0;margin:0;line-height:24px;height:24px;float:none;border:0;background:none;border-bottom:1px solid #999;}

.menuList li ul.subMenuList li a{padding:0 1.5em;;background:none;line-height:24px;height:24px;}

.menuList li ul.subMenuList li a:hover{padding:0 1.5em;;background:#abd8e3;}

#menubar .menuList LI.sfhover{position:relative;}

#menubar .menuList LI.sfhover .subMenuList {background:#96C2F1;; DISPLAY: block;LEFT: -1px; POSITION: absolute; top:45px;}

#menubar .menuList LI.sfhover .subMenuList li{margin:0;text-align:center;padding:0;background:none;}

#menubar .menuList LI.sfhover .subMenuList li a:hover{text-decoration:none;background:#abd8e3;}

#menubar li a{overflow:hidden;}

#menubar ul.subMenuList { text-align:left;width:auto}

#menubar ul.subMenuList li{width:100%;white-space:nowrap;text-align:left}

#menubar ul.subMenuList li a{padding:0 1.5em;;width:auto;_width:100%;text-align:left;overflow:visible}

#menubar ul.subMenuList li a:hover{padding:0 1.5em;;;width:auto;_width:100%;}

* + html #menubar ul.subMenuList {width:auto;border-width:1px}

* + html #menubar ul.subMenuList li {width:100%}

* + html #menubar ul.subMenuList li a{width:100%}

* + html #menubar ul.subMenuList li a:hover{width:100%}

* + html #menubar LI.sfhover .subMenuList li {width:100%}

说明：（1）单行、双行使用样式不同。

单行菜单代码如下：

双行菜单代码如下：

（2）.last用于扩展定义最后一个样式的特别定义，.subMenuList为子菜单样式。

.menult2_img_txt代码及样式

<ul class="menult2_img_txt"></ul>图片显示子栏目列表，代码如下：

<li>

</li>

<li>

</li>

</ul>

说明：

（1）. menult2_img_txt为奇新CMS系统的公共样式，可直接使用。默认CSS样式为不显示文字内容，您也可以修改或重新设置此样式。

（2）. menult2_ico_txt：另一种栏目列表显示方式，左侧显示图标，右侧为栏目名称。代码同上，直接将<ul>替换为<ul>即可。

. photoList_auto代码及样式

<ul class="photoList_auto clearfix"></ul>图片等比列缩放列表，代码如下：

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

说明：. photoList_auto为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

. img_txt_link代码及样式

<ul class=" img_txt_link "></ul>为左侧显示图标的友情链接列表，代码如下：

</ul>

. linkTextList代码及样式

<ul class=" linkTextList "></ul>为普通文字链接列表，代码如下：

</ul>

.linkLogoList代码及样式

<ul class=" linkLogoList "></ul>为图片链接列表，代码如下：

</ul>

. select_txt_link代码及样式

<ul class="select_txt_link "></ul>为显示选择框下拉列表的文字链接，代码如下：

</select>

</li>

</select>

</li>

</ul>

无缝滚动图片代码及样式

<div></div>，图片新闻无缝滚动，代码如下：

<td>

<td>

<ul>

</ul>

</td>

<td>

<ul>

</ul>

</td>

...

</tr></tbody></table>

</td>

<td>

<td>

<ul>

</ul>

</td>

<td>

<ul>

</ul>

</td>

...

</tr></tbody></table>

</td>

</tr></tbody></table>

</div>

说明：

（1）支持两种不同的代码，用于不同的页面显示，一种只显示图片，另一种则显示图片及其图片标题。

（2）. marqueePhotoList为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

（3）其他相关的公共样式：.mqptlt_v为显示纵向图片列表，.mqptlt_auto图片宽度自适应无缝滚动列表。

. photoList2_auto代码及样式

<ul class="photoList2_auto"></ul>图片新闻（图片等比列缩放），用于在#sidebar中显示，代码如下：

<li>

<ul>

</li>

<li>

图片新闻标题</a> </li>

</ul>

</li>

<li>

<ul>

<li>

图片新闻标题</a> </li>

</ul>

</li>

</ul>

说明：.photoList2_auto为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

. singleImg_lt_auto代码及样式

<ul class="singleImg_lt_auto"></ul>显示一幅图片（等比列缩放）和图片标题，代码如下：

</ul>

说明：

（1）. singleImg_lt_auto为奇新CMS系统的公共样式，可直接使用。

（2）其他相关的公共样式：. singleImg_lt显示为横向图片。

.articleList2代码及样式

<ul class="articleList2"></ul>，统一设置页面中不同栏目下文章列表样式，根据需要也可单独定义不同的样式。代码如下：

<li>

</ul>

说明：.articleList2为奇新CMS系统的公共样式，可直接使用。

.photoList代码及样式

<ul class="photoList clearfix"></ul>图片列表，代码如下：

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

说明：.photoList为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

.photoList代码及样式

<ul class="photoList clearfix"></ul>图片列表，代码如下：

<ul>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

说明：.photoList为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

.photoList2代码及样式

<ul class="photoList2"></ul>图片新闻，用于在#sidebar中显示，代码如下：

<ul>

<li>

<ul>

</li>

<li>

图片新闻标题</a> </li>

</ul>

</li>

<li>

<ul>

<li>

图片新闻标题</a> </li>

</ul>

</li>

</ul>

说明：.photoList2为奇新CMS系统的公共样式，可直接使用。您也可以修改或重新设置此样式。

.videoList代码及样式

<ul class="videoList clearfix"></ul>视频列表，代码如下：

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

.videoListw代码及样式

<ul class="videoListw clearfix"></ul>视频列表（宽屏显示），代码如下：

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

.bookList代码及样式

<ul class="bookList clearfix"></ul> 书刊列表（包括宽屏显示），代码如下：

<li>

<ul>

书刊列表 </a> </li>

</ul>

</li>

<li>

<ul>

书刊列表</a> </li>

</ul>

</li>

</ul>

.ztlist代码及样式

<div class="ztlist "></div>显示首页专题栏目，代码如下：

<ul>

</ul>

<ul>

<li><a target="_blank" title=" " href="#">专题相关文章或推荐到此的文章</a></li>

<li>

<a target="_blank" title=" " href="#">专题相关文章或推荐到此的文章</a></li>

</ul>

</div>

说明：.ztlist为专题整体布局，.zt用于显示专题介绍布局，.desp显示专题相关在首页显示的文章。

.gwzt代码及样式

<ul class="gwzt"></ul>过往专题，代码如下：

</ul>

.box代码及样式

<div class="box"></div>块定义

.box主要定义在#main下，代码如下：

</div>

<style>

.box{/*块定义*/ }

.box .box_h{ /*块内头部显示信息*/}

.box .box_h b{ /*左侧显示栏目标题等*/}

.box .box_h i{ /*右侧显示更多或其他链接*/}

.box .box_b{ /*块内主要内部显示区域*/}

.box .box_b b.bl{/*用于此处扩展功能，如背景图片*/}

.box .box_b i.br{/*用于此处扩展功能*/}

.box .box_f {/*块内底部显示信息，用于扩展功能*/}

.box .box_f b{/*如需设置此位置信息，可添加此样式定义*/ }

.box .box_f i{/*如需设置此位置信息，可添加此样式定义*/ }

</style>

CSS样式示例：

.box{height:1%;position:relative;margin: 0 0 10px;background: url(images/box_h_c.gif) repeat-x 0 0 ;border-bottom:0}

.box .box_h{position:relative;color:#0e7044;height:37px;

line-height:37px;background: url(images/box_h_b.gif) no-repeat 15px 60% ; }

.box .box_h b{position:absolute;left:0;top:0;height:37px;

padding-left:17px;background:url(images/box_h_l.gif) no-repeat 0 0;}

.box .box_h i{position:absolute;right:0;top:0;height:37px;

padding:0 15px 0 0;background:url(images/box_h_r.gif) no-repeat 100% 0}

.box .box_h i a{color:#999!important}

.box .box_h i a:hover{color:#666!important}

.box .box_b{padding:10px 10px 2px;border: solid #ABDAC8;border-width:0 1px;_width:100%}

.box .box_h a{color:#0e7044;}

.box .box_f {height:15px;position:relative;background: url(images/box_f_c.gif) repeat-x 0 100% }

.box .box_f b{height:15px;width:15px;position:absolute;left:-1px;bottom:0;_bottom:-1px;background: url(images/box_f_l.gif) no-repeat 0 100%;}

.box .box_f i{height:15px;width:15px;position:absolute;right:0;;bottom:0;_bottom:-1px;background: url(images/box_f_r.gif) no-repeat 100% 100%;}

.box2代码及样式

<div class="box2"></div>块定义

.box2主要定义在#sidebar下，代码如下：

</div>

</div>

<style>

.box2{/*此处样式表定义类似于.box*/ }

.box2 .box2_h{ }

.box2 .box2_h b{ }

.box2 .box2_h i{ }

.box2 .box2_b{ }

.box .box_b b.bl{/*用于此处扩展功能，如背景图片*/}

.box .box_b i.br{/*用于此处扩展功能*/}

.box2 .box2_f { }

.box2 .box2_f b{ }

.box2 .box2_f i{ }

</style>

.boxx代码及样式

<div class="boxx"></div>块定义

.boxx只用于论坛查看帖子详细内容页面中，代码如下：

<div>

</div>

</div>

.boxx{/*此处样式表定义类似于.box,用于论坛帖子列表中所有回复帖子应用的样式*/}

.boxx .boxx_h{}

.boxx .boxx_b{}

论坛页面代码及样式

论坛和页面保持一致，自动应用.box，.box2样式，从而使整站保持一致。

<UL class="forum_ulist clearfix"> </ul>论坛所有分类列表，默认3列显示，代码如下：

<li>

<dl>

</a><em>(今日： <b><!—新贴数--></b>)</em></dt>

</dl>

</li>

<li >

<dl>

</dl>

</li>

</ul>

说明：.new定义栏目有新贴时显示的图标

<table class="forum_table"></table>论坛单个分类列表，代码如下：

<tr>

</dl>

</td>

<td>

<p><a>奇新CMS宣传管理</a></p>

<cite>

<a>admin</a> - <span title="9">

</span></cite></td>

</tr>

</table>

修改网页字体及其他相关样式

更改网页字体的颜色：页面中各个部分文字的颜色及块状元素的背景色。

其他样式的调整：修改边框颜色，如下拉菜单，box，box2, .boxx，文章列表、论坛列表，焦点图片等。

回复引用

TOP

- 作者： fxqrose
- 发帖数：0
- 回帖数：4
- 注册日期：2010年12月3日

1 fxqrose 发表于2011年4月13日上午7:56:36: 学习中。。。

回复引用

TOP

- 作者： ytliuaaa
- 发帖数：0
- 回帖数：2
- 注册日期：2011年1月10日

2 ytliuaaa 发表于2011年4月22日上午7:55:15: 很好很好

回复引用

TOP

- 作者： info0532
- 发帖数：0
- 回帖数：4
- 注册日期：2010年10月25日

3 info0532 发表于2011年5月9日上午7:55:11: 这个不错，介绍的很详细。

回复引用

TOP

- 作者： y84552675
- 发帖数：1
- 回帖数：1
- 注册日期：2011年1月10日

4 y84552675 发表于2011年5月18日上午7:54:54: 不错，正在学做新主题。

回复引用

TOP

- 作者： zyt60
- 发帖数：1
- 回帖数：2
- 注册日期：2010年12月9日

5 zyt60 发表于2011年8月23日上午8:15:55: 楼主辛苦了

回复引用

TOP

- 作者： q6222592
- 发帖数：0
- 回帖数：3
- 注册日期：2010年10月21日

6 q6222592 发表于2011年9月9日上午7:46:06: 好好学习

回复引用

TOP

- 作者： q23ertt
- 发帖数：1
- 回帖数：5
- 注册日期：2010年9月1日

7 q23ertt 发表于2011年9月24日上午7:43:37: 感谢楼主分享

回复引用

TOP

回复发帖

返回列表 1