CSS布局实战

1、 ul li中上图下字，图片、文字居中。

<ul>
    <li>
        <img src="dash.png" style="display:block;height:20px;width: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;width: 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>

 

posted @ 2018-03-25 15:57  coshaho  阅读(534)  评论(0)  编辑  收藏  举报