常用html样式--2
2017-12-13 本文已影响15人
前端丶米店
1:灰色背景
#hidebg {
position:fixed;left:0px;top:0px;
background-color:#000;
width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
display:none; /*http://www.jb51.net */
z-index:90;
height: 100%;
}
2：删除线效果
text-decoration:line-through;
3：jquery寻找父元素下的其他子元素
$('.div_1').click(function(){
$(this).parent().find('.div_2').show();
});
4：渐入渐出
$(".div_1").slideToggle();
5:绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素。
<style>
.son{position:absolute;top:100px;left:10px;}
</style>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
上面的例子中 class=‘son’ 想使用绝对定位,但是它的父级 class="father" 和它父级的父级 class="grandfather"都没有定位，所以 class=‘son’ 的定位是相对于body的。
<style>
.father{position:relative;margin-top:500px;}
.son{position:absolute;top:100px;left:10px;}
</style>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
上面的例子中 class=‘son’ 想使用绝对定位,但是它的父级 class="father" 设置了一个position:relative，所以 class=‘son’ 的定位是相对于 class="father" 的。
6、黑色透明背景
background: #000;
opacity: 0.42;
7、border渐变
border-image: -webkit-linear-gradient( red, blue) 30 30;
border-image: -moz-linear-gradient( red, blue) 30 30;
border-image: linear-gradient( red, blue) 30 30;
8丶多行溢出显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
