您的位置：首页 > Web前端 > CSS

CSS常用小技巧

2017-05-08 23:26 323 查看

单行省略号

<!--强制在一行显示-->
white-space: nowrap;
<!--多与文本显示省略号-->
text-overflow: ellipsis;

多行省略号

text-overflow: ellipsis;
/*必须属性，定义容器的和模型*/
display: -webkit-box;
/*必须属性：定义内容的排列方向或排列顺序*/
-webkit-box-orient: vertical;
/*必须属性：省略号出现的位置（文本结束的位置）*/
-webkit-line-clamp:3;

透明度

<!--会影响子元素的透明度-->
div{filter:alpha(opacity=50);} /* for IE8 and earlier */
div{opacity:.5;} /* for IE9 and other browsers */
<!--不会影响子元素-->
rgba

CSS3实现叉号

<!DOCTYPE html>
<html>
<head>
<title>chahao</title>
<style type="text/css">
span{
display: inline-block;
width: 12px;
height: 2px;
font-size: 0;
line-height: 0;
vertical-align: middle;
background: red;
transform: rotate(45deg);
}
span:after{
content: '';
display: block;
width: 12px;
height: 2px;
background: red;
-webkit-transform: rotate(-90deg);

}
</style>
</head>
<body>
<span>

</span>
</body>
</html>

文字环绕图片

img{
float: left;
width: 100px;
height: 100px;
/*改成圆形图片*/
border-radius:50% ;
/*文字圆形环绕*/
shape-outside: circle(50%);
}

改变选择文件的图标

```html
label{
display: inline-block;
width: 60px;
height: 60px;
background: url("images/shangchaun.png") no-repeat;
background-size: contain;
}

<label for="images">
</label>
<input type="file" id="images" hidden/> <br/>

```

引入视频音频文件

<video controls preload="auto" autoplay poster="">
<source src="video/oceans-clip.mp4">
<source src="video/oceans-clip.webm">
<source src="video/oceans-clip.ogv">
你的浏览器不支持video，请更换浏览器。
</video>

视频播放

```html
<body>
<video id="video">
<source src="video/oceans-clip.mp4">
<source src="video/oceans-clip.webm">
<source src="video/oceans-clip.ogv">
你的浏览器不支持video，请更换浏览器。
</video>
<p>
<a href="javascript:;" id="play">播放/暂停</a>
<a href="javascript:;" id="full">全屏</a>
<a href="javascript:;" id="back">恢复默认窗口</a>
<input type="range" min="0" max="1" step="0.1" id="range"/>

</p>
<script>
window.onload=function(){
(function(){
var v = document.getElementById('video');
var play = document.getElementById('play');
var full = document.getElementById('full');
var back = document.getElementById('back');
var range = document.getElementById('range');
play.onclick=function(){
if(v.paused) {
v.play();
this.innerHTML = '暂停';
}else{
v.pause();
this.innerHTML='播放';
}
};
full.onclick =function(){
v.width = document.body.clientWidth;
};
back.onclick=function(){
v.width='640';
};
range.onchange=function(){
v.volume = range.value;
//                console.log(range.value);
}
})();

};
</script>
```

拖拽

<div ondragover="over(event)" ondrop="draga(event)">
<img src="images/two.jpg" alt="" id="drag" draggable="true"
ondragstart="start(event)"/>
<p id="aa" draggable="true"
ondragstart="start(event)">这是文字</p>
</div>
<!--1、给拖拽元素添加属性 draggable='true' 定义元素可以被拖动
2、开始拖动事件：dragstart：元素被拖动一刹那触发的事件
3、拖动元素进入目标区域，dragover，被拖动元素一进入就触发
4、被拖动元素被丢下事件，drag，被拖动元素被拖到目标区域后，鼠标松开触发的事件
-->
<div ondragover="over(event)" ondrop="draga(event)" id="div2">

</div>

<script>
function start(e){
e.dataTransfer.setData('text', e.target.id);
/*将拖动元素的id储存到dataTransfer对象上面
* dataTransfer浏览器的内置剪切板
* setData,将目标对象的id存到变量text中
* */
console.log(e);
}

function over(e){
e.preventDefault();
/*组织默认事件，浏览器以url的方式打开这个元素*/
}
function draga(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text");
console.log(data);
console.log(ev.target);
ev.target.appendChild(document.getElementById(data));
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航