主题:奇新CMS建站系统主题样式设计(不断补充中)
 楼主 admin 发表于2011-3-10 8:02:23
奇新CMS建站系统主题样式设计(不断补充中)

奇新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>为网页栏目列表,根据需要也可显示子栏目列表,支持单行、双行菜单显示,子菜单宽度自适应。

代码如下:

<div  id="menubar">

  <ul  class="menuList clearfix">

<li><a href="#">栏目名称</a></li>

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

<ul>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a>

<li><a href="#">子菜单</a></li>

<li><a href="#">子菜单</a>

</li>

</ul>

    </li>

<li><a href="#">栏目名称</a></li>

<li class=”last”><a href="#">栏目名称</a>

</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)单行、双行使用样式不同。

单行菜单代码如下:

<ul>…</ul>

双行菜单代码如下:    

<ul>…</ul>

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

 

 

.menult2_img_txt代码及样式

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

<ul  class="menult2_img_txt">

<li>

<a href="#">

<span>栏目名称</span>

<span></span>

<img src=" " alt="" /></a>

</li>

<li>

<a href="#">

<span>栏目名称</span>

<span></span>

<img src=" " alt="" /></a>

</li>

</ul>

说明:

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

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

 

. photoList_auto代码及样式

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

<ul class="photoList_auto clearfix">

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

</ul>

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

 

. img_txt_link代码及样式

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

<ul class=" img_txt_link ">

<li><a href="#"><img alt="" title="" src=" " />链接名称</a></li>

<li><a href="#"><img alt="" title="" src=" " />链接名称</a></li>

</ul>

 

. linkTextList代码及样式

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

<ul class=" linkTextList ">

<li><a href="#">链接名称</a></li>

<li><a href="#">链接名称</a></li>

</ul>

 

.linkLogoList代码及样式

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

<ul  class=" linkLogoList ">

<li><a href="#"><img alt="" title="" src=" " /> </a></li>

<li><a href="#"><img alt="" title="" src=" " /> </a></li>

</ul>

 

. select_txt_link代码及样式

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

<ul class="select_txt_link ">

<li><select>

          <option selected="selected">-- 分类链接 --</option>

          <option>链接名称</option>

          <option>链接名称</option>

      </select>

</li>

<li> <select>

          <option selected="selected">-- 分类链接 --</option>

          <option>链接名称</option>

          <option>链接名称</option>

      </select>

</li>

</ul>

 

 

无缝滚动图片代码及样式

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

<div style="overflow: hidden;">

  <table width="100%"><tbody><tr>

    <td>

 <table><tbody><tr>

    <td>

   <ul>

     <li><a target="_blank" title="图片标题" href="#"><img alt="图片标题" title="图片标题" src="图片路径"></a></li>

     <li><a target="_blank" title="图片标题" href="#">图片标题</a></li>

   </ul>

    </td>

    <td>

   <ul>

     <li><a target="_blank" title="图片标题" href="#"><img alt="图片标题" title="图片标题" src="图片路径"></a></li>

     <li><a target="_blank" title="图片标题" href="#">图片标题</a></li>

   </ul>

    </td>

         ...

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

    </td>

    <td>

 <table><tbody><tr>

    <td>

   <ul>

     <li><a target="_blank" title="图片标题" href="#"><img alt="图片标题" title="图片标题" src="图片路径"></a></li>

     <li><a target="_blank" title="图片标题" href="#">图片标题</a></li>

   </ul>

    </td>

    <td>

   <ul>

     <li><a target="_blank" title="图片标题" href="#"><img alt="图片标题" title="图片标题" src="图片路径"></a></li>

     <li><a target="_blank" title="图片标题" href="#">图片标题</a></li>

   </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中显示,代码如下:

<ul class="photoList2_auto">

   <li>

   <ul>

     <li><a target="_blank" title="#">

<img alt="图片新闻标题" title="图片新闻标题" src="显示图片路径" /></a>

</li>

     <li>

<a target="_blank" title="#" href="#">

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

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#">

<img alt="图片新闻标题" title="图片新闻标题" src="显示图片路径" /></a></li>

     <li>

 <a target="_blank" title="#" href="#">

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

   </ul>

   </li>

</ul>

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

 

. singleImg_lt_auto代码及样式

<ul class="singleImg_lt_auto"></ul>显示一幅图片(等比列缩放)和图片标题,代码如下:

<ul class="singleImg_lt_auto">

  <li><a target="_blank" title="#"><img alt=" " title=" " src=" " /></a></li>

  <li> <a target="_blank" title="#" href="#">图片标题</a></li>

</ul>

说明:

(1). singleImg_lt_auto为奇新CMS系统的公共样式,可直接使用。

(2)其他相关的公共样式:. singleImg_lt显示为横向图片。

 

.articleList2代码及样式

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

<ul  class="articleList2">

  <li> <a target="_blank" title="文章标题" href="#">文章标题</a><span>日期</span> </li>

  <li><a target="_blank" title="文章标题" href="#">文章标题</a>

<span>日期</span> </li>

<li>

<a target="_blank" title="文章标题" href="#">文章标题</a><span>日期</span> </li>

  </ul>

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

 

.photoList代码及样式

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

<ul  class="photoList clearfix">

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

</ul>

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

 

.photoList代码及样式

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

<ul>

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="图片标题" title="图片标题" src="显示图片路径" /></a></li>

     <li> <a target="_blank" title="#" href="#">图片标题</a> </li>

   </ul>

   </li>

</ul>

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

 

.photoList2代码及样式

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

<ul>

   <li>

   <ul>

     <li><a target="_blank" title="#">

<img alt="图片新闻标题" title="图片新闻标题" src="显示图片路径" /></a>

</li>

     <li>

<a target="_blank" title="#" href="#">

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

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#">

<img alt="图片新闻标题" title="图片新闻标题" src="显示图片路径" /></a></li>

     <li>

 <a target="_blank" title="#" href="#">

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

   </ul>

   </li>

</ul>

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

 

.videoList代码及样式

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

<ul class="videoList clearfix">

<li>

   <ul>

     <li><a target="_blank" title=" " href="#"><img alt=" " title=" " src=" " /></a></li>

     <li> <a target="_blank" title=" " href="">视频标题</a> </li>

     <li>简要说明 </li>

     <li>作者: </li>

     <li>发布时间: </li>

   </ul>

</li>

<li>

   <ul>

     <li><a target="_blank" title=" " href="#"><img alt=" " title=" " src=" " /></a></li>

     <li> <a target="_blank" title=" " href="">视频标题</a> </li>

     <li>简要说明 </li>

     <li>作者: </li>

     <li>发布时间: </li>

   </ul>

</li>

</ul>

 

.videoListw代码及样式

<ul  class="videoListw clearfix"></ul>视频列表(宽屏显示),代码如下:

<ul  class="videoListw clearfix">

<li>

   <ul>

     <li><a target="_blank" title=" " href="#"><img alt=" " title=" " src=" " /></a></li>

     <li> <a target="_blank" title=" " href="">视频标题</a> </li>

     <li>简要说明 </li>

     <li>作者: </li>

     <li>发布时间: </li>

   </ul>

</li>

<li>

   <ul>

     <li><a target="_blank" title=" " href="#"><img alt=" " title=" " src=" " /></a></li>

     <li> <a target="_blank" title=" " href="">视频标题</a> </li>

     <li>简要说明 </li>

     <li>作者: </li>

     <li>发布时间: </li>

   </ul>

</li>

</ul>

 

.bookList代码及样式

<ul class="bookList clearfix"></ul> 书刊列表(包括宽屏显示),代码如下:

<ul class="bookList clearfix">

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt="" title="" src=" " /></a></li>

     <li> <a target="_blank" title="#" href="#">

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

   </ul>

   </li>

   <li>

   <ul>

     <li><a target="_blank" title="#"><img alt=" " title="" src=" " /></a></li>

     <li> <a target="_blank" title="#" href="#">

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

   </ul>

   </li>

</ul>

 

.ztlist代码及样式

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

<div  class="ztlist ">

 <ul>

   <li><a href="#"><img src="#" /></a></li>

   <li><a href="#">专题名称</a></li>

   <li>专题介绍</li>

 </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  class="gwzt">

   <li><a href="#"><img src="#" /></a></li>

   <li><a href="#">专题名称</a></li>

   <li>专题介绍</li>

 </ul>

 

.box代码及样式

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

.box主要定义在#main下,代码如下:

<div class="box">

      <div><b><!--左侧内容--></b><i><!--右侧内容--></i></div>

      <div> <!--这里是网页代码显示区域-->

       <b></b><i></i> </div>

      <div><b></b><i></i></div>

 </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 class="box2">

       <div><b><!--左侧内容--></b><i><!--右侧内容--></i> </div>

       <div> <!--这里是内容显示区域-->

        <b></b><i></i>

       </div>

       <div><b></b><i></i></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  class="boxx">

        <div> <b></b><i></i></div>

        <div>    

        <b></b><i></i>

        </div>

        <div><b></b><i></i></div>

   </div>

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

.boxx .boxx_h{}

.boxx .boxx_b{}

 

论坛页面代码及样式

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

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

<UL class="forum_ulist clearfix">

    <li>

         <dl>

          <dt><a href="#">

<!--板块名称--></a><em>(今日: <b><!—新贴数--></b>)</em></dt>

          <dd>主题:, 贴数: /dd>

          <dd><span title=" "><!--日期--></span></dd>

         </dl>

       </li>

<li >

         <dl>

          <dt><a href="#"><!--板块名称--></a></dt>

          <dd>主题:, 贴数: /dd>

          <dd><span title=" "><!--日期--></span></dd>

         </dl>

       </li>

</ul>

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

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

<table  class="forum_table">

     <tr>

      <td><dl>

        <dt><a href="#"><!--板块名称--></a><em>(今日: <b><!—新贴数--></b>)</em></dt>

        <dd><!--板块描述--></dd>

        <dd><p> </p></dd>

       </dl>

      </td>

      <td><em>19</em></td>

      <td>

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

       <cite>

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

<!--日期--></span></cite></td>

     </tr>

</table>

 

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

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

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

 

 

 1 fxqrose 发表于2011-4-13 7:56:36

学习中。。。

 2 ytliuaaa 发表于2011-4-22 7:55:15

很好很好

 3 info0532 发表于2011-5-9 7:55:11

这个不错,介绍的很详细。

 4 y84552675 发表于2011-5-18 7:54:54

不错,正在学做新主题。

 5 zyt60 发表于2011-8-23 8:15:55

楼主辛苦了

 6 q6222592 发表于2011-9-9 7:46:06

好好学习

 7 q23ertt 发表于2011-9-24 7:43:37

感谢楼主分享

奇新云平台
切换