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

来源:互联网 发布:一虎一席谈 知乎 编辑:程序博客网 时间:2024/05/29 05:09

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

解决:设置input type="text" onfocus="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 -- 在当前窗体打开链接,并替换当前的整个窗体(框架页) 


0 0