小问题汇总——css篇 -持续更新

1、input type=password 如何去掉默认值?

解决：设置input type="text" οnfοcus="this.type='password'"

2、CSS实现单行、多行文本溢出显示省略号（...）

单行方法：overflow：hidden;  text-overflow:ellipsis;   white-space:nowrap;

多行方法：display：-webkit-box； -webkit-box-orient:vertical;  -webkit-line-clamp:3; overflow:hidden;

注：-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的webkit属性。常见结合属性：display：-webkit-box：将对象作为弹性伸缩盒子模型显示；-webkit-box-orient:vertical：设置或检索伸缩盒对象的子元素的排列方式。

3、HTML5实现端访问时禁止放大和缩小网页

可以移动：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

不可以移动：<meta content="width=decice-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">

4、CSS样式实现倒三角形。

<style>

#dsj {

    width:0;

    height:0;

    border-left:50px solid transparent;

    border-right:50px solid transparent;

    border-top:100px solid red;

}

</style>

<div id="dsj"></div>

同理可尝试下其他方向的三角形。

5、CSS样式实现区域背景滑动动图效果

<style>

.bjdt {
    color: #fff;
    padding: 70px 0;
    position: relative;
    text-align: center;
    background:url(../images/bg01.jpg) 50% 0 fixed;
}

</style>

<div class="bjdt">
  <p>作为初学者希望能够大家一起多沟通，促进共同进步，有兴趣加Q491755277</p>
</div>

实现效果如下图：

6、target="_blank"是什么意思

<a href="..." target="_blank">

_blank -- 在新窗口中打开链接 
_parent -- 在父窗体中打开链接 
_self -- 在当前窗体打开链接,此为默认值 
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)