1、 ul li中上图下字，图片、文字居中。
<ul> <li> <img src="dash.png" style="display:block;height:20px;20px;margin: 0 auto"> <span style="float:left;text-align:center;">Dashboard</span> </li> </ul>
文字换行：display:block
图片居中：margin: 0 auto
文字居中：float:left;text-align:center
2、页面遮罩的实现
z-index属性决定了元素的显示层级，z-index越大，显示层级越靠上。
opacity表示透明度。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>html 最简遮罩层</title> <script type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } </script> </head> <body> <div id="popDiv" style="z-index:99;display:none;position:absolute;margin-top: 20%;margin-left: 40%;background-color: #FFF;"> 分析中...<br/> <a href="javascript:closeDiv()">关闭遮罩层</a> </div> <div id="bg" style="display:block;background-color: #ccc; 100%;position:absolute;height: 100%;opacity: 0.5;z-index: 1;"></div> <div style="padding-top: 10%;padding-left:40%;z-index:1;"> <input type="Submit" name="" value="打开遮罩层" onclick="javascript:showDiv()" /> </div> </body> </html>
3、样式优先级!important
.menu_accordion .nav-first-level li div { background-color:#FFFFFF!important; }
4、阻止div换行
（1）使用tbale封装div为列
（2）使用样式float:left;
（3）使用样式display:inline;
<html> <head> <style type="text/css"> .myrow{ border:#c3c3c3 1px solid; height:30px; margin:5px; } .myfloat{ float:left; margin:2px; } .mydisplay{ display:inline; margin:2px; } .myline{ border-style:solid; border-color:#c3c3c3; border-width:0px 0px 0px 1px; height:20px; } </style> </head> <body> <div id="row1" class="myrow"> <table> <tbody> <tr> <td> <div> 根因1 </div> </td> <td> <div> </div> </td> <td> <div> 故障场景1 </div> </td> <td> <div> </div> </td> </tr> </tbody> </table> </div> <div id="row2" class="myrow" style="height:30px"> <div class="myfloat"> 根因2 </div> <div class="myfloat myline" > </div> <div class="myfloat"> 故障场景2 </div> <div class="myfloat"> </div> </div> <div id="row3" class="myrow"> <div class="mydisplay"> 根因3 </div> <div class="mydisplay"> </div> <div class="mydisplay"> 故障场景3 </div> <div class="mydisplay"> </div> </div> </body> </html>
<html> <head> <style type="text/css"> .myrow{ border:#c3c3c3 1px solid; height:26px; margin:5px; width:90%; } div div{ float:left; height:26px; margin:2px 5px 2px 5px; } .myline{ border-style:solid; border-color:#c3c3c3; border-width:0px 0px 0px 1px; height:20px; } .myid{ width:10%; } .mycause{ width:70%; } .myimg{ background-image: url(myimg.png); background-color: #FFFFFF; width:23px; height:23px; margin:3px 0px 3px 5px; } body{ font-size:15px; color:#666; font-family:"Helvetica","微软雅黑"; } </style> </head> <body> <div class="myrow"> <div class="myimg"> </div> <div class="myid" > 根因1 </div> <div class="myline" > </div> <div class="mycause" > 故障场景1 </div> <input type="checkbox" style="margin:7px"> <div> </div> </div> <div class="myrow"> <div class="myimg"> </div> <div class="myid" > 根因2 </div> <div class="myline" > </div> <div class="mycause" > 故障场景2 </div> <input type="checkbox" style="margin:7px"> <div> </div> </div> </body> </html>