编辑“奇新CMS/.box区域网页代码及样式”

{{奇新CMS导航}}
<nowiki><div class="box"></div></nowiki>块定义

.box主要定义在[[奇新CMS/main网页代码及样式|#main]]下，代码如下：
<pre>
<div class="box">
      <div class="box_h"><b><!--左侧内容--></b><i><!--右侧内容--></i></div>
      <div class="box_b"> <!--这里是网页代码显示区域-->
       <b class="bl"></b><i class="br"></i> </div>
      <div class="box_f"><b></b><i></i></div>
 </div>
<style type="text/css">
.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>
</pre>

[[CSS]]样式示例：
<pre>
.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%;}
</pre>


==参考来源==
*http://cms.zfqjava.com.cn/archive/article/1/article-1639.html

[[category:奇新CMS|B]]
{{奇新CMS使用手册导航}}