简明现代魔法 -> CSS层叠样式表 -> 常用的栏目框框设计

常用的栏目框框设计

2010-04-28

效果演示

前端代码

<div class="report_section dashboard">
	<div class="subsections">
    
<div class="section section_1">
	<ul class="dashboard_modules">
		<li>
        	<div class="legacy"> 
            	<div class="dashboard_module"> 
               		<div class="title_bar"> 
                    	<div class="rounder"></div> 
                        <span> 最近加入商家  </span>    													
					</div>  
  					<div class="graph bars">
1111
					</div> 
                    <p><b></b></p>  
            	</div>
         	</div>
		</li> 
	</ul>
</div>
			
<div class="section section_2">
	<ul class="dashboard_modules">
		<li>
        	<div class="legacy"> 
            	<div class="dashboard_module"> 
               		<div class="title_bar"> 
                    	<div class="rounder"></div> 
                        <span> 点击排行  </span>    													
					</div>  
  					<div class="graph bars">
1111
					</div> 
                    <p><b></b></p>  
            	</div>
         	</div>
		</li> 
	</ul>
</div>  
                
	</div>
</div>

CSS 代码如下：

.report_section{float:left; width:100%}
.report_section .section{float:left;width:48%}
.report_section.dashboard .section{width:49%}
.report_section .section.section_2{float:right}
.divided_stack .section{float:left;margin:0}
.divided_stack .section.section_1{margin:0;padding-right:1.7em}
.divided_stack .section.section_2{margin:0; border-left:1px solid #666}
.dashboard_modules{margin:0;padding:0;list-style:none}
.dashboard_module{width:auto;margin:0 0 2em 0}
.legacy .dashboard_module div,.dashboard_gadget_body{clear:both}
.dashboard_intro{margin:0 0 1em}
.title_bar,.dashboard_intro{float:left;width:100%;color:#fff;background:#666;position:relative}
.dashboard_intro{margin-bottom:1em}
.dashboard_intro h2,.title_bar span{font-size:14px;font-weight:bold;padding:0.3em 0.3em}
.dashboard_module .title_bar span{display:block;float:left;width:90%;margin-left:.7em;padding-left:12px;background:url(../images/icons/gripper.gif) no-repeat center left;cursor:move}
.dashboard_module a.gadget_remove_button{right:6px;background:url(../images/icons/remove.gif) no-repeat;position:absolute;top:.7em;display:block;padding:10px 0 0 0;width:10px;height:0;overflow:hidden;text-indent:-5000px;font-weight:normal;cursor:pointer}
.dashboard_module a.gadget_settings_button{right:20px;background:url(../images/gadget-settings-button.png) no-repeat}
.dashboard_module .goog-menu-button{position:absolute;right:6px}.dashboard_module p{margin:0;border:solid #bbb;border-width:1px 1px 0;font-size:95%;text-align:left;background:#e5e5e5}
.rounder{height:1px;line-height:1px;border-left:1px solid white;border-right:1px solid white}
.legacy .dashboard_module p b{bottom:-1px;display:block;padding:0.5em 0.75em 0.7em;border-bottom:1px solid #bbb}
.dashboard_module .graph{position:relative;border:solid #ddd;border-width:0 1px;height:14em;overflow:hidden;background:#fff}
.dashboard_module .graph .graph_wrapper{display:table;border:0;width:100%;height:100%;vertical-align:middle;text-align:center}
.dashboard_module .graph .graph_wrapper .graph_wrapper{display:table-cell;border:0;padding:0 2%;width:96%;vertical-align:middle;text-align:center}