标签:
1.ul li居中
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */ } /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /* 向左漂移,将竖排变为横排 */ } /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */ div.menu ul li a, div.menu ul li a:visited { background-color: #465c71; /* 背景色 */ border: 1px #4e667d solid; /* 边框 */ color: #dde4ec; /* 文字颜色 */ display: block; /* 此元素将显示为块级元素,此元素前后会带有换行符 */ line-height: 1.35em; /* 行高 */ padding: 4px 20px; /* 内部填充的距离 */ text-decoration: none; /* 不显示超链接下划线 */ white-space: nowrap; /* 对于文本内的空白处,不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 */ } /* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */ div.menu ul li a:hover { background-color: #bfcbd6; /* 背景色 */ color: #465c71; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ } /* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */ div.menu ul li a:active { background-color: #465c71; /* 背景色 */ color: #cfdbe6; /* 文字颜色 */ text-decoration: none; /* 不显示超链接下划线 */ }
前台html
<div class="menu"> <ul> <li><a href="javascript:void(0);">主页</a></li> <li><a href="javascript:void(0);">工作日志</a></li> <li><a href="javascript:void(0);">设备运行记录</a></li> <li><a href="javascript:void(0);">其他</a></li> </ul> </div>
2.选择第一个子元素
有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margin-right,可能影响之后元素的排版)。
<div> <span></span> <span></span> <span></span> <span></span> </div>
这时如果能排除第一个元素,并给其他元素设置margin-left
属性,就能实现比较好的效果了。可以利用not
和first-child
,通过下面的CSS实现。
div > span :not(:first-child) { margin-left:10px }
还可以利用兄弟元素选择器+
,像这样:
div > span + span { margin-left:10px }
如果HTML是这样的,应该怎么做呢?
<div> <span></span> <p></p> <span></span> <span></span> </div>
其实也很简单,用通配符就可以了:
div > * :not(:first-child) { margin-left:10px }
3.子元素在父元素中上下居中
.denglu-chenggong { display: inline-block; vertical-align: middle; width: 80%; padding: 30px 0px; border-radius: 5px; background: #FFFFFF; } .denglu-bg { text-align: center; height: 100%; } .denglu-bg:before { content: ‘‘; display: inline-block; height: 100%; vertical-align: middle; } .denglu-cgtu { width: 50px; margin: 10px auto; } .denglu-cgtu img { width: 50px; }
标签:
原文地址:http://www.cnblogs.com/tylerdonet/p/4881971.html