CSS样式笔记

组合样式，CSS继承

.content {
    padding:0 0 0 5px;
    line-height: 30px;
    height: 30px;
    border: 1px solid #a6bee7;
    vertical-align: middle;
}

/*不加空格，则表示class="content small"且small只有跟在content后面有效，否则无效
有效，如<div class="content small">则div的宽度是29.如果.content .small有空格，则表示，content的子元素的样式是small，子元素继承content的样式如<div class="content"><div class="small">*/
.content.small { width: 29%; } 
.content.medium { width: 42.5%; } 
.content.large { width: 92%; }

 设置label标签样式，去掉每行都有边框

.disabled-label {
    width:90%;
    color:#cccccc;
    border: 1px solid #cccccc;
    display: inline-block;
}
 <asp:Label ID="Reason" runat="server" CssClass="disabled-label"></asp:Label>

 IE8下 Select文字垂直居中的办法

.select {
padding: 4px 0;
height: 30px;
line-height: 26px;
vertical-align: middle;
}

 让DIV内的li横向居中显示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .utop {
   
}

    .utop ul {
        display: table;
        margin-left: auto;
        margin-right: auto;
    }

        .utop ul li {
            float: left;
            text-decoration: none;
            border-style: none;
            list-style-type: none;
            padding:4px;
        }
    </style>
</head>
<body>
<div class="utop">
    <ul><li>sd</li><li>sd</li></ul>
</div>
</body>
</html>

 

posted @ 2015-07-07 14:06  OFreedom  阅读(190)  评论(0)  编辑  收藏  举报