猫#1350
展开↯#1351
作者：广西南宁市
图片替换onerror
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onerror</title>
</head>
<body>
<p>这是没写图片路径的</p>
<img src="" alt="加载失败">
<p>这是替代处理的</p>
<img src="" onerror="nofind()" alt="加载失败">
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1496852181750&di=eb61cfabeed9ba05aa50803fa8d6bc3c&imgtype=0&src=http%3A%2F%2Fmvimg1.meitudata.com%2F56251eda8fc951992.jpg";
img.onerror=null; //控制不要一直跳动，如果不置空则在替代图片不存在时会一直执行，最后报错，死循环
}
</script>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-08, 11:36:35
#1352
作者：广西南宁市
在乌镇世界互联网大会上，在谈到商业模式，马云说，阿里巴巴不是电商公司，是帮助电商公司，阿里要做的是两件事，一是培养更多的京东，二是让京东挣钱。
文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事 发表时间：2017-06-08, 10:43:44
#1353
展开↯#1354
作者：广西南宁市
也就是说冒泡当且仅当存元素之间存在包含关系时才会发生。那么，如果用z-index使元素重叠，这种情况下click、mouseover等事件会不会发生冒泡？
文章：JavaScript事件冒泡简介及应用 发表时间：2017-06-08, 09:34:39
#1356
作者：广西南宁市
base64图片上传
首先来看一下HTML5的FileReader对象
方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
接口事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
下面是实现
javascript
html
首先来看一下HTML5的FileReader对象
方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
接口事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
下面是实现
javascript
function readAsDataURL(m_this,id){
if (typeof m_this.files == 'undefined' || typeof FileReader == 'undefined') {
alert('当前浏览器不支持图片上传，请改用IE10以上或chrome等最新浏览器。');
return false;
}
if(!/image\/\w+/.test(m_this.files[0].type)){
alert("请上传图片！");
return false;
}
var reader = new FileReader();
reader.onload = function(e) {
//this.result 返回结果
$(id).attr('src',this.result);
//把结果放在img对象中，以备他用
var img = new Image();
img.src = result;
}
reader.readAsDataURL(m_this.files[0]);
}
//调用
$('#inputFile').on('change',function(){
var m_this = this;
readAsDataURL(m_this,'#ImgPr');
})Run code
Cut to clipboard
html
<img id="ImgPr" src=""/>
<input type="file" class="" id="inputFile" >Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:24:39
#1357
作者：广西南宁市
base64编码的图片上传到服务器
function base64_upload($base64) {
$base64_image = str_replace(' ', '+', $base64);
//post的数据里面，加号会被替换为空格，需要重新替换回来，如果不是post的数据，则注释掉这一行
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image, $result)){
//匹配成功
if($result[2] == 'jpeg'){
$image_name = uniqid().'.jpg';
//纯粹是看jpeg不爽才替换的
}else{
$image_name = uniqid().'.'.$result[2];
}
$image_file = "./upload/test/{$image_name}";
//服务器文件存储路径
if (file_put_contents($image_file, base64_decode(str_replace($result[1], '', $base64_image)))){
return $image_name;
}else{
return false;
}
}else{
return false;
}
}Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:19:45
#1358
作者：广西南宁市
简单的html5 File base64 图片上传服务器代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style>
</style>
<script>
window.onload = function(){
var input = document.getElementById("demo_input");
var result= document.getElementById("result");
var img_area = document.getElementById("img_area");
if ( typeof(FileReader) === 'undefined' ){
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute('disabled','disabled');
}else{
input.addEventListener('change',readFile,false);
}
}
function readFile(){
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
console.log();
reader.onload = function(e){
result.innerHTML = this.result;
img_area.innerHTML = '<div class="sitetip">图片img标签展示：</div><img src="'+this.result+'" alt=""/>';
}
}
</script>
</head>
<body>
<form action="file.php" method="post">
<input type="file" value="sdgsdg" id="demo_input" />
<textarea name="img" id="result" rows=30 cols=300></textarea>
<p id="img_area"></p>
<input type="submit" value="提交">
</form>
</body>
</html>Run code
Cut to clipboard
<?php
$base64_url=$_POST['img'];
$base64_body = substr(strstr($base64_url,','),1);
$data= base64_decode($base64_body );
file_put_contents('1.jpg',$data);
//或$image = imagecreatefromstring($data);
?>Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:15:34
#1359
作者：广西南宁市
html5将图片转换base64进行上传、应该能解决微信内置浏览器上传图片
function readFile(obj){
var file = obj.files[0];
//判断类型是不是图片
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e){
alert(this.result); //就是base64
}
}
<input type="file" id="picFile" onchange="readFile(this)" /> Run code
Cut to clipboard
文章：谷歌浏览器输入框文本框粘贴图片网络图片和截图 发表时间：2017-06-08, 09:14:04
#1361
作者：广西南宁市
js获取剪贴板内容【仅兼容ie】
<html>
<head>
<title>读取剪贴板内容</title>
<script type="text/javascript">
function getClipboard() {
if (window.clipboardData) {
return (window.clipboardData.getData('Text'));
}
else if (window.netscape) {
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
clip.getData(trans, clip.kGlobalClipboard);
var str = new Object();
var len = new Object();
try {
trans.getTransferData('text/unicode', str, len);
}
catch (error) {
return null;
}
if (str) {
if (Components.interfaces.nsISupportsWString) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString);
else if (Components.interfaces.nsISupportsString) str = str.value.QueryInterface(Components.interfaces.nsISupportsString);
else str = null;
}
if (str) {
return (str.data.substring(0, len.value / 2));
}
}
return null;
}
function readClipboardData() {
var str = getClipboard();
var len = str.split("\n");//获取行数
document.getElementById("txtContent").value = str;
}
</script>
</head>
<body>
<input type="button" value="读取剪贴板内容" onclick="readClipboardData();" />
<br />
<textarea rows="20" cols="60" id="txtContent"></textarea>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 16:39:57
#1362
作者：广西南宁市
js禁止粘贴事件onpaste；在文本框中加入
onpaste="return false"Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 16:17:13
#1363
作者：广西南宁市
加油吧，不要因为走了太远，而忘记当初为什么出发~
少刷点论坛，知乎，新闻之类的，这些碎片化的信息，我不敢说一定有负面影响。但是理性的说，这些东西对你加薪，幸福感之类的毫无帮助。
另外找点认知心理学类的书籍看看，有助于纠正你的一些认知错误，逻辑错误，心态慢慢变积极起来，一旦心态不那么消极了。人际交往，金钱什么的反而变得不是那么难了。
少刷点论坛，知乎，新闻之类的，这些碎片化的信息，我不敢说一定有负面影响。但是理性的说，这些东西对你加薪，幸福感之类的毫无帮助。
另外找点认知心理学类的书籍看看，有助于纠正你的一些认知错误，逻辑错误，心态慢慢变积极起来，一旦心态不那么消极了。人际交往，金钱什么的反而变得不是那么难了。
文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事 发表时间：2017-06-07, 15:36:35
#1364
作者：广西南宁市
薛忆沩：出租车司机
出租车司机将车开进公司的停车场。他发现他的车位已经被人占用了。他没有去留心那辆车的车牌。他看到北面那一排有一个空位。他将车开过去，停好。出租车司机从车里面钻出来，他环顾了一下四周。然后，他走到车的尾部，把车的后盖打开，把那只装有一些零散东西的背包拿出来。接着，他又把车的后盖轻轻盖上。他轻轻说了一句什么，并且在车的后盖上轻轻拍了两下。然后，他抬起头来。有一滴雨正好滴落到他的脸上。
出租车司机平时遇到有人占用了他的车位，一定会清楚地记下那辆车的车牌。他会在下一次出车的时候，呼叫开那辆车的同事，“你他妈怎么回事？！”他会恶狠狠地骂。但是刚才出租车司机没有去留心那辆车的车牌。他走进值班室，将车钥匙交给正在值班的那个老头。老头胆怯地看了出租车司机一眼，马上又侧过脸去，好像怕出租车司机看到他的表情。出租车司机迟疑了一下，然后用手轻轻拍了拍老头的肩膀。老头顿时激动起来。他用颤抖的声音说：“她们真可怜啊。”
出租车司机好像没有听到老头说的话。他很平静地转身，走了出去。但是，老头大声叫住了他。他停下来。他回过头去。
老头从值班室的窗口探出头，大叫着说：“经理让你星期四来办手续。”
“知道了。”出租车司机低声回答说，好像是在自言自语。
雨没有能够落下来。空气显得十分沉闷。出租车司机沿着贯穿整个城市的那条马路朝他住处的方向走。现在高峰期还没有过去，马路上的车还很多。不少的车都打开了远光灯，显得非常刺眼。
出租车司机横过两条马路，走进了全市最大的那家意大利薄饼店。刚才就是在这家薄饼店的门口，那个女人坐进了他的出租车。这时候，整个薄饼店里只有两个顾客。在这座热闹的城市里，意大利薄饼店总是冷冷清清的。这正是出租车司机此刻需要的环境。此刻他需要宁静。
出租车司机要了一个大号的可乐和一个他女儿最爱吃的那种海鲜口味的薄饼。在点要这种薄饼的时候，出租车司机的眼眶突然湿了。服务员提醒了三次，他才意识到自己还没有付钱。他匆匆忙忙把钱递过去，并且有点激动地说：“对不起。”
出租车司机在靠窗边的一张桌子旁坐下。他的女儿有时候就坐在他的对面。她总是在薄饼刚送上来的时候急急忙忙去咬一口，烫得自己倒抽一口冷气。然后，她会翻动一下自己小小的眼睛，不好意思地笑一笑。从这个位置，出租车司机可以看到繁忙的街景，看到马路上川流不息的车队。这就是十五年来，他生活于其中的环境。他熟悉这样的环境。每天他都开着出租车在这繁忙的街景中穿梭。他习惯了这样的环境。可是几天前他突然对这环境感到隔膜了。他突然不习惯了。刚才他没有去留意占用了他的车位的那辆车的车牌。他对停车场的环境也感到隔膜了。出租车司机已经不需要去留心并且记下那辆车的车牌了，因为他不会再有下一次出车的安排。在他将车开进停车场之前，他已经送走了自己出租车司机生涯中的最后一批客人。整个黄昏，出租车司机一直都在担心马上就会下一场很大的雨。出租车的雨刮器坏了，如果遇上大雨，他就不得不提早结束这最后一天的工作。出租车司机不想提早结束这最后一天的工作。他也许还有点留恋他的职业，或者留恋陪伴了他这么多年的出租车？出租车司机如愿以偿：他担心的雨并没有落下来。只是在停车场里，在他向出租车告别之后的一刹那，有一滴雨正好滴落到了他的脸上。
出租车司机擦去眼眶中的泪水。他深深地吸了一口可乐。他好像又看见了那个表情沉重的女人。她坐进了出租车。他问她要去哪里。她要他一直往前开。出租车司机有点迷惑，他问那个女人到底要去哪里。她还是要他一直往前开。
出租车司机从后视镜里瞥了那个女人一眼。她的衣着很庄重，她的表情很沉重。她显然正在思考着什么事情。不一会，电话铃声响了。那个女人好像知道电话铃声会在那个时刻响起来。她很从容地从手提包里取出手提电话。她显然很不高兴电话铃声打断了她的思考。“是的，我已经知道了。”她对着手提电话说。出租车司机又从后视镜里瞥了她一眼。
“这有什么办法！”那个女人对着手提电话说。
出租车司机从这简单的回答里听出了她的伤感。
“也许只能这样。”那个女人对着手提电话说。
出租车司机注意到她将脸侧了过去，朝着窗外。
“我并不想这样。”那个女人对着手提电话说。
出租车司机有了一阵迷惘的好奇。他开始想象是一个什么样的人给他的乘客打来了这个让她伤感的电话。
“这不是你能够想象得出来的。”那个女人对着手提电话说。
是的，出租车司机想象不出来。他开始觉得那应该是一个男人。可是，他马上又觉得，那也完全可能是一个女人。最后他甚至想，那也许是一个孩子呢？这最后的想法让他的方向盘猛烈地晃动了一下。
“你完全错了。”那个女人对着手提电话说。
出租车司机想到了自己的女儿。一个星期以来，接听所有电话的时候，他都希望奇迹般地听到来自另外一个世界的童音。他不知道他的女儿还会不会给他打来电话，那个他绝望地想象着的电话。
“不会的。”那个女人对着手提电话说。
出租车司机迷惑不解地瞥了一眼后视镜。他注意到了那个女人很性感的头发。
“你不会明白的。”那个女人对着手提电话说。
出租车司机减慢了车速，他担心那个女人因为接听电话而错过了目的地。
“这是多余的担心。”那个女人对着手提电话说。
她果断的声音让出租车司机觉得非常难受。他很想打断她一下，问她到底要去哪里。
“我会告诉你的。”那个女人对着手提电话说。她显然有点厌倦了说话。她极不耐烦地向打来电话的人道别。然后，她很从容地将手提电话放回到手提包里。她看了一下手表，又看了一眼出租车上的钟。她的表情还是那样沉重。“过了前面的路口找一个地方停下来。”她冷冷地说。
出租车司机如释重负。他猛地加大油门，愤怒地超过了一直拦在前面的那辆货柜车。
出租车刚停稳，那个女人就递过来一张一百元的钞票。然后，她推开车门，下车走了。出租车司机大喊了几声，说还要找钱给她。可是，那个女人没有停下来。她很性感的头发让出租车司机感到一阵罕见的孤独。
出租车司机本来把那个女人当成他的最后一批客人。几次从后视镜里打量她的时候，他都是这样想的。他想她就是他的最后一批客人。他很高兴自己出租车司机生涯中最后的客人用他只能听到一半的对话激起了他的想象和希望。可是，在他想叫住这最后的客人，将几乎与车费相当的钱找回给她的时候，另一对男女坐进了他的出租车。他们要去的地方正好离出租车公司的停车场不远。出租车司机犹豫了一下，但是他没有拒绝他们。
那一对男女很在意他们彼此之间的距离。出租车司机一开始就注意到了这一点。他还注意到了那个男人几次想开口说话，却都被那个女人冷漠的表情阻止。高峰期的交通非常混乱，有几个重要的路段都发生了交通事故。最严重的一起发生在市中心广场的西北角。出租车在那里被堵了很久。当它好不容易绕过了事故现场之后，那个男人终于冲破了那个女人冷漠的防线。“有时候，我会很留恋……”他含含糊糊地说。
“有时候？”女人生硬地说，“有什么好留恋的！”
女人的回应令男人激动起来。“真的。”他伤感地说，“一切都好像是假的。”
“真的怎么又好像是假的？！”女人的语气还是相当生硬。
马路还是非常堵塞，出租车的行进仍然相当艰难。出租车司机有了更多的悠闲。但是，他提醒自己不要总是去打量后视镜。他故意强迫自己去回想刚才的那个女人。他想那个打电话给她的人一定不是一个孩子，因为她的表情始终都那样沉重，她的语气始终都那样冷漠。这种想法让出租车司机有点气馁。一个星期以来，他一直在等待着来自另外一个世界的童音，那充满活力的童音。
后排的男人和女人仍然在艰难地进行着对话。男人的声音很纤细，女人的声音很生硬。
“我真的不懂为什么……”
“你从来都没有懂过。”
“其实……”
“其实就是这样，你永远也不会懂的。”
“难道就不能够再想一想别的办法了吗？”
“难倒还能够再想什么别的办法吗？”
因为男人的声音很纤细，这场对话始终没有转变成争吵。这场对话也始终没有任何的进展，它总是被女人生硬的应答堵截在男人好不容易找到的起点。“你不要以为……”男人最后很激动地说，他显然还在试图推进这场无法推进的对话。
“我没有以为。”女人生硬地回应说，又一次截断了男人的表达。
出租车司机将档位退到空档上，脚尖轻轻地踩住了刹车。出租车在那一对男女说定的地点停稳。那个女人也递过来一张一百元的纸币。出租车司机回头找钱给她的时候，发现她的脸上布满了泪水。
出租车司机将一张纸巾递给他的女儿。“擦擦你的脸吧。”他不大耐烦地说。大多数时候，她就坐在他的对面。她的脸上粘满了意大利薄饼的配料。出租车司机一直是一个很粗心的人。他从来就不怎么在意女儿的表情，甚至也不怎么在意女儿的存在。同样，他也从来不怎么在意妻子的表情以及妻子的存在。他很粗心。他从来没有想象过她们会“不”存在。可是，她们刹那间就不存在了。这生活中突然出现的空白令出租车司机突然发现了与她们一起分享的过去。一个星期以来，他沉浸在极深的悲痛和极深的回忆之中。他的世界突然失去了最本质的声音，突然变得难以忍受地安静。而他的思绪却好像再也无法安静下来了。他整夜整夜地失眠。那些长期被他忽略的生活中的细节突然变得栩栩如生。它们不断地冲撞他的感觉。他甚至没有勇气再走进自己的家门了。他害怕没有家人的“家”。他害怕无情的空白和安静会窒息他对过去的回忆。出租车司机一个星期以来突然变成了一个极为细心的人，往昔在他的心中以无微不至的方式重演。
出租车司机知道自己的这种精神状态非常危险。他向公司递交了辞职报告。一个星期以来，他总是看到自己的女儿和妻子。她们邀请他回到他们共同的过去。从前那种他不怎么在意的生活一下子变得有声有色了。他用细腻的回忆体会她们的表情和存在。他不想放过生活中的任何一个细节。当然，他不愿意看到她们突然出现在出租车的前面。她们惊恐万状的神情会令出租车司机措手不及。他会重重地踩下了刹车。可是，那肯定为时已晚。出租车司机会痛苦莫及。他痛苦莫及。他误以为自己就是那不可饶恕的肇事者。他陷入了深深的自责。直到又有货柜车出现在他的视野之中，出租车司机才会重新被事故的真相触怒，将自己从自责的漩涡中解救出来。他会愤怒地加大油门，从任何一辆货柜车旁边愤怒地超过去。那辆运送图书的货柜车从他的女儿和妻子身上辗过的时候，出租车司机正在去广州的路上。雇他跑长途的客人很慷慨，付给了他一个前所未有的好价钱。
出租车司机在紊乱的思绪中吃完了意大利薄饼。他觉得自己的吃相与女儿的非常相像。他的妻子总是在一旁开心地取笑他们。出租车司机吸干净最后一点可乐之后，将纸杯里的冰块掏出来，在桌面上摆成一排。这是他女儿很喜欢玩的游戏。他不忍心去打量那一排冰块。他轻轻地闭上了眼睛。尽管如此，他仍然看到了女儿纤弱的手指在桌面上移动。那是毫无意义的移动。那又是充满意义的移动。出租车司机将脸侧过去。他睁开眼睛，茫然地张望着窗外繁忙的街景。这熟悉的街景突然变得如此陌生了，陌生得令他心酸。他过去十五年夜以继日的穿梭竟然没有在这街景中留下任何的痕迹。
出租车司机清楚地知道自己不可能在如此陌生的城市里继续生活下去。他决定回到家乡去，去守护和陪伴他年迈的父亲和母亲。他相信只有在他们的身旁，自己亢奋的思绪才可能安静下来。他离开他们已经十五年了。他的重现对他们来说也许更像是他的死而复生。他很高兴自己能够给他们带来那种奇迹般的享受。他甚至幻想十五年之后，他的女儿和妻子也会这样奇迹般地回到他的身边来。他决定回到自己的家乡去。他希望在那里能够找回他生活的意义和他需要的宁静。
最后的那两批客人给了出租车司机一点信心。他惊喜地发现自己对生活仍然还有一点好奇。他的听觉被极度的悲伤磨损了，却并没有失去最基本的功能。他还能够听到别人的声音，他还在好奇别人的声音。是的，他其实也听到了公司值班室的老头激动地说出来的那句话。他说：“她们真可怜啊。”当时，出租车司机的身体颤抖了一下。但是，他没有做出任何反应。他很平静地转身，走出了值班室，好像没有听到老头揪心的叹惜。他害怕听到。他害怕他自己。他已经决定要告别自己熟悉的生活了。他要拒绝同情的挽留。星期四办完手续，他就不再是出租车司机了。他决定回到自己的家乡去，去守护和陪伴他年迈的父亲和母亲。
出租车司机将脸从陌生的街景上移开。前方不远处坐着的一对母女好像并没有引起他的注意。他盯着眼前的桌面。他发现刚才的那一排冰块已经全部溶化了。他动情地抚摸着溶化在桌面上的冰水，好像是在抚摸缥缈的过去。突然，他的指尖碰到了他女儿的指尖。他立刻听到了她清脆的笑声。接着，他还听到了他妻子的提问，她问她为什么笑得那样开心。他们的女儿没有回答。她用娇嫩的指尖顶住了他的指尖，好像在邀请他跟她玩那个熟悉的游戏。他接受了她的邀请，也用指尖顶住了她的指尖。她的指尖被他顶着在冰水中慢慢地后退，一直退到了桌面的边沿。在最后的一刹那，出租车司机突然有大难临头的感觉。他想猛地抓住他女儿的小手，那活泼和淘气的小手。但是，他没有能够抓住。
出租车司机知道这是他最后的机会。他没有抓住。他也知道这是他与他女儿在这座城市的最后一次相遇和最后一次相处。他永远也不会再接触到这块桌面了。他永远也不会再回到这座城市里来了。对这座他突然感到陌生的城市来说，他已经随着他的女儿和妻子一起离去和消失了。这种“一起”的离去和消失让出租车司机感到了一阵他从来没有感到过的宁静，纯洁无比的宁静。这提前出现的神圣感觉使出租车司机激动得放声大哭起来。
出租车司机将车开进公司的停车场。他发现他的车位已经被人占用了。他没有去留心那辆车的车牌。他看到北面那一排有一个空位。他将车开过去，停好。出租车司机从车里面钻出来，他环顾了一下四周。然后，他走到车的尾部，把车的后盖打开，把那只装有一些零散东西的背包拿出来。接着，他又把车的后盖轻轻盖上。他轻轻说了一句什么，并且在车的后盖上轻轻拍了两下。然后，他抬起头来。有一滴雨正好滴落到他的脸上。
出租车司机平时遇到有人占用了他的车位，一定会清楚地记下那辆车的车牌。他会在下一次出车的时候，呼叫开那辆车的同事，“你他妈怎么回事？！”他会恶狠狠地骂。但是刚才出租车司机没有去留心那辆车的车牌。他走进值班室，将车钥匙交给正在值班的那个老头。老头胆怯地看了出租车司机一眼，马上又侧过脸去，好像怕出租车司机看到他的表情。出租车司机迟疑了一下，然后用手轻轻拍了拍老头的肩膀。老头顿时激动起来。他用颤抖的声音说：“她们真可怜啊。”
出租车司机好像没有听到老头说的话。他很平静地转身，走了出去。但是，老头大声叫住了他。他停下来。他回过头去。
老头从值班室的窗口探出头，大叫着说：“经理让你星期四来办手续。”
“知道了。”出租车司机低声回答说，好像是在自言自语。
雨没有能够落下来。空气显得十分沉闷。出租车司机沿着贯穿整个城市的那条马路朝他住处的方向走。现在高峰期还没有过去，马路上的车还很多。不少的车都打开了远光灯，显得非常刺眼。
出租车司机横过两条马路，走进了全市最大的那家意大利薄饼店。刚才就是在这家薄饼店的门口，那个女人坐进了他的出租车。这时候，整个薄饼店里只有两个顾客。在这座热闹的城市里，意大利薄饼店总是冷冷清清的。这正是出租车司机此刻需要的环境。此刻他需要宁静。
出租车司机要了一个大号的可乐和一个他女儿最爱吃的那种海鲜口味的薄饼。在点要这种薄饼的时候，出租车司机的眼眶突然湿了。服务员提醒了三次，他才意识到自己还没有付钱。他匆匆忙忙把钱递过去，并且有点激动地说：“对不起。”
出租车司机在靠窗边的一张桌子旁坐下。他的女儿有时候就坐在他的对面。她总是在薄饼刚送上来的时候急急忙忙去咬一口，烫得自己倒抽一口冷气。然后，她会翻动一下自己小小的眼睛，不好意思地笑一笑。从这个位置，出租车司机可以看到繁忙的街景，看到马路上川流不息的车队。这就是十五年来，他生活于其中的环境。他熟悉这样的环境。每天他都开着出租车在这繁忙的街景中穿梭。他习惯了这样的环境。可是几天前他突然对这环境感到隔膜了。他突然不习惯了。刚才他没有去留意占用了他的车位的那辆车的车牌。他对停车场的环境也感到隔膜了。出租车司机已经不需要去留心并且记下那辆车的车牌了，因为他不会再有下一次出车的安排。在他将车开进停车场之前，他已经送走了自己出租车司机生涯中的最后一批客人。整个黄昏，出租车司机一直都在担心马上就会下一场很大的雨。出租车的雨刮器坏了，如果遇上大雨，他就不得不提早结束这最后一天的工作。出租车司机不想提早结束这最后一天的工作。他也许还有点留恋他的职业，或者留恋陪伴了他这么多年的出租车？出租车司机如愿以偿：他担心的雨并没有落下来。只是在停车场里，在他向出租车告别之后的一刹那，有一滴雨正好滴落到了他的脸上。
出租车司机擦去眼眶中的泪水。他深深地吸了一口可乐。他好像又看见了那个表情沉重的女人。她坐进了出租车。他问她要去哪里。她要他一直往前开。出租车司机有点迷惑，他问那个女人到底要去哪里。她还是要他一直往前开。
出租车司机从后视镜里瞥了那个女人一眼。她的衣着很庄重，她的表情很沉重。她显然正在思考着什么事情。不一会，电话铃声响了。那个女人好像知道电话铃声会在那个时刻响起来。她很从容地从手提包里取出手提电话。她显然很不高兴电话铃声打断了她的思考。“是的，我已经知道了。”她对着手提电话说。出租车司机又从后视镜里瞥了她一眼。
“这有什么办法！”那个女人对着手提电话说。
出租车司机从这简单的回答里听出了她的伤感。
“也许只能这样。”那个女人对着手提电话说。
出租车司机注意到她将脸侧了过去，朝着窗外。
“我并不想这样。”那个女人对着手提电话说。
出租车司机有了一阵迷惘的好奇。他开始想象是一个什么样的人给他的乘客打来了这个让她伤感的电话。
“这不是你能够想象得出来的。”那个女人对着手提电话说。
是的，出租车司机想象不出来。他开始觉得那应该是一个男人。可是，他马上又觉得，那也完全可能是一个女人。最后他甚至想，那也许是一个孩子呢？这最后的想法让他的方向盘猛烈地晃动了一下。
“你完全错了。”那个女人对着手提电话说。
出租车司机想到了自己的女儿。一个星期以来，接听所有电话的时候，他都希望奇迹般地听到来自另外一个世界的童音。他不知道他的女儿还会不会给他打来电话，那个他绝望地想象着的电话。
“不会的。”那个女人对着手提电话说。
出租车司机迷惑不解地瞥了一眼后视镜。他注意到了那个女人很性感的头发。
“你不会明白的。”那个女人对着手提电话说。
出租车司机减慢了车速，他担心那个女人因为接听电话而错过了目的地。
“这是多余的担心。”那个女人对着手提电话说。
她果断的声音让出租车司机觉得非常难受。他很想打断她一下，问她到底要去哪里。
“我会告诉你的。”那个女人对着手提电话说。她显然有点厌倦了说话。她极不耐烦地向打来电话的人道别。然后，她很从容地将手提电话放回到手提包里。她看了一下手表，又看了一眼出租车上的钟。她的表情还是那样沉重。“过了前面的路口找一个地方停下来。”她冷冷地说。
出租车司机如释重负。他猛地加大油门，愤怒地超过了一直拦在前面的那辆货柜车。
出租车刚停稳，那个女人就递过来一张一百元的钞票。然后，她推开车门，下车走了。出租车司机大喊了几声，说还要找钱给她。可是，那个女人没有停下来。她很性感的头发让出租车司机感到一阵罕见的孤独。
出租车司机本来把那个女人当成他的最后一批客人。几次从后视镜里打量她的时候，他都是这样想的。他想她就是他的最后一批客人。他很高兴自己出租车司机生涯中最后的客人用他只能听到一半的对话激起了他的想象和希望。可是，在他想叫住这最后的客人，将几乎与车费相当的钱找回给她的时候，另一对男女坐进了他的出租车。他们要去的地方正好离出租车公司的停车场不远。出租车司机犹豫了一下，但是他没有拒绝他们。
那一对男女很在意他们彼此之间的距离。出租车司机一开始就注意到了这一点。他还注意到了那个男人几次想开口说话，却都被那个女人冷漠的表情阻止。高峰期的交通非常混乱，有几个重要的路段都发生了交通事故。最严重的一起发生在市中心广场的西北角。出租车在那里被堵了很久。当它好不容易绕过了事故现场之后，那个男人终于冲破了那个女人冷漠的防线。“有时候，我会很留恋……”他含含糊糊地说。
“有时候？”女人生硬地说，“有什么好留恋的！”
女人的回应令男人激动起来。“真的。”他伤感地说，“一切都好像是假的。”
“真的怎么又好像是假的？！”女人的语气还是相当生硬。
马路还是非常堵塞，出租车的行进仍然相当艰难。出租车司机有了更多的悠闲。但是，他提醒自己不要总是去打量后视镜。他故意强迫自己去回想刚才的那个女人。他想那个打电话给她的人一定不是一个孩子，因为她的表情始终都那样沉重，她的语气始终都那样冷漠。这种想法让出租车司机有点气馁。一个星期以来，他一直在等待着来自另外一个世界的童音，那充满活力的童音。
后排的男人和女人仍然在艰难地进行着对话。男人的声音很纤细，女人的声音很生硬。
“我真的不懂为什么……”
“你从来都没有懂过。”
“其实……”
“其实就是这样，你永远也不会懂的。”
“难道就不能够再想一想别的办法了吗？”
“难倒还能够再想什么别的办法吗？”
因为男人的声音很纤细，这场对话始终没有转变成争吵。这场对话也始终没有任何的进展，它总是被女人生硬的应答堵截在男人好不容易找到的起点。“你不要以为……”男人最后很激动地说，他显然还在试图推进这场无法推进的对话。
“我没有以为。”女人生硬地回应说，又一次截断了男人的表达。
出租车司机将档位退到空档上，脚尖轻轻地踩住了刹车。出租车在那一对男女说定的地点停稳。那个女人也递过来一张一百元的纸币。出租车司机回头找钱给她的时候，发现她的脸上布满了泪水。
出租车司机将一张纸巾递给他的女儿。“擦擦你的脸吧。”他不大耐烦地说。大多数时候，她就坐在他的对面。她的脸上粘满了意大利薄饼的配料。出租车司机一直是一个很粗心的人。他从来就不怎么在意女儿的表情，甚至也不怎么在意女儿的存在。同样，他也从来不怎么在意妻子的表情以及妻子的存在。他很粗心。他从来没有想象过她们会“不”存在。可是，她们刹那间就不存在了。这生活中突然出现的空白令出租车司机突然发现了与她们一起分享的过去。一个星期以来，他沉浸在极深的悲痛和极深的回忆之中。他的世界突然失去了最本质的声音，突然变得难以忍受地安静。而他的思绪却好像再也无法安静下来了。他整夜整夜地失眠。那些长期被他忽略的生活中的细节突然变得栩栩如生。它们不断地冲撞他的感觉。他甚至没有勇气再走进自己的家门了。他害怕没有家人的“家”。他害怕无情的空白和安静会窒息他对过去的回忆。出租车司机一个星期以来突然变成了一个极为细心的人，往昔在他的心中以无微不至的方式重演。
出租车司机知道自己的这种精神状态非常危险。他向公司递交了辞职报告。一个星期以来，他总是看到自己的女儿和妻子。她们邀请他回到他们共同的过去。从前那种他不怎么在意的生活一下子变得有声有色了。他用细腻的回忆体会她们的表情和存在。他不想放过生活中的任何一个细节。当然，他不愿意看到她们突然出现在出租车的前面。她们惊恐万状的神情会令出租车司机措手不及。他会重重地踩下了刹车。可是，那肯定为时已晚。出租车司机会痛苦莫及。他痛苦莫及。他误以为自己就是那不可饶恕的肇事者。他陷入了深深的自责。直到又有货柜车出现在他的视野之中，出租车司机才会重新被事故的真相触怒，将自己从自责的漩涡中解救出来。他会愤怒地加大油门，从任何一辆货柜车旁边愤怒地超过去。那辆运送图书的货柜车从他的女儿和妻子身上辗过的时候，出租车司机正在去广州的路上。雇他跑长途的客人很慷慨，付给了他一个前所未有的好价钱。
出租车司机在紊乱的思绪中吃完了意大利薄饼。他觉得自己的吃相与女儿的非常相像。他的妻子总是在一旁开心地取笑他们。出租车司机吸干净最后一点可乐之后，将纸杯里的冰块掏出来，在桌面上摆成一排。这是他女儿很喜欢玩的游戏。他不忍心去打量那一排冰块。他轻轻地闭上了眼睛。尽管如此，他仍然看到了女儿纤弱的手指在桌面上移动。那是毫无意义的移动。那又是充满意义的移动。出租车司机将脸侧过去。他睁开眼睛，茫然地张望着窗外繁忙的街景。这熟悉的街景突然变得如此陌生了，陌生得令他心酸。他过去十五年夜以继日的穿梭竟然没有在这街景中留下任何的痕迹。
出租车司机清楚地知道自己不可能在如此陌生的城市里继续生活下去。他决定回到家乡去，去守护和陪伴他年迈的父亲和母亲。他相信只有在他们的身旁，自己亢奋的思绪才可能安静下来。他离开他们已经十五年了。他的重现对他们来说也许更像是他的死而复生。他很高兴自己能够给他们带来那种奇迹般的享受。他甚至幻想十五年之后，他的女儿和妻子也会这样奇迹般地回到他的身边来。他决定回到自己的家乡去。他希望在那里能够找回他生活的意义和他需要的宁静。
最后的那两批客人给了出租车司机一点信心。他惊喜地发现自己对生活仍然还有一点好奇。他的听觉被极度的悲伤磨损了，却并没有失去最基本的功能。他还能够听到别人的声音，他还在好奇别人的声音。是的，他其实也听到了公司值班室的老头激动地说出来的那句话。他说：“她们真可怜啊。”当时，出租车司机的身体颤抖了一下。但是，他没有做出任何反应。他很平静地转身，走出了值班室，好像没有听到老头揪心的叹惜。他害怕听到。他害怕他自己。他已经决定要告别自己熟悉的生活了。他要拒绝同情的挽留。星期四办完手续，他就不再是出租车司机了。他决定回到自己的家乡去，去守护和陪伴他年迈的父亲和母亲。
出租车司机将脸从陌生的街景上移开。前方不远处坐着的一对母女好像并没有引起他的注意。他盯着眼前的桌面。他发现刚才的那一排冰块已经全部溶化了。他动情地抚摸着溶化在桌面上的冰水，好像是在抚摸缥缈的过去。突然，他的指尖碰到了他女儿的指尖。他立刻听到了她清脆的笑声。接着，他还听到了他妻子的提问，她问她为什么笑得那样开心。他们的女儿没有回答。她用娇嫩的指尖顶住了他的指尖，好像在邀请他跟她玩那个熟悉的游戏。他接受了她的邀请，也用指尖顶住了她的指尖。她的指尖被他顶着在冰水中慢慢地后退，一直退到了桌面的边沿。在最后的一刹那，出租车司机突然有大难临头的感觉。他想猛地抓住他女儿的小手，那活泼和淘气的小手。但是，他没有能够抓住。
出租车司机知道这是他最后的机会。他没有抓住。他也知道这是他与他女儿在这座城市的最后一次相遇和最后一次相处。他永远也不会再接触到这块桌面了。他永远也不会再回到这座城市里来了。对这座他突然感到陌生的城市来说，他已经随着他的女儿和妻子一起离去和消失了。这种“一起”的离去和消失让出租车司机感到了一阵他从来没有感到过的宁静，纯洁无比的宁静。这提前出现的神圣感觉使出租车司机激动得放声大哭起来。
文章：马云、马化腾、李彦宏、张朝阳、雷军们的高考往事 发表时间：2017-06-07, 15:51:40
#1365
作者：广西南宁市
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
function sortNumbers(b,a)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write( "<br />"+arr.sort(sortNumber))
document.write( "<br />"+arr.sort(sortNumbers))
</script>Run code
Cut to clipboard
文章：JS的十大经典算法排序 发表时间：2017-06-07, 14:16:17
#1366
作者：广西南宁市
希尔排序貌似有问题
<script>
//arr=new Array('3','38','5','44','15','47','36','26','27','2','46','4','19','50','48');
arr=new Array(3,38,5,44,15,47,36,26,27,2,46,4,19,50,48);
function shellSort(arr) {
var len =arr.length;
gap = Math.floor(len/2);
while(gap!==0){
for(var i = gap;i<len;i++){
var temp = arr[i];
var j;
for(j=i-gap;j>=0&&temp<arr[j];j-=gap){
arr[j+gap] = arr[j];
}
arr[j+gap] = temp;
}
gap=Math.floor(gap/2);
}
return arr;
}
alert(shellSort(arr));
</script>Run code
Cut to clipboard
文章：JS的十大经典算法排序 发表时间：2017-06-07, 12:40:41
#1367
作者：广西南宁市
一个常见下拉菜单的样式 可恶的一体化小三角 纯css手写解决
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style>
.select {
margin: 50px 500px;
width: 180px;
text-align: center;
}
.select a {
color: #fff;
text-decoration: none;
}
.select ul,
.select li {
margin: 0;
padding: 0;
list-style: none;
}
.select span {
line-height: 46px;
background-color: #41b1d9;
display: block;
margin-bottom: 20px;
position: relative;
z-index: 2;
border-radius: 5px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.select span a:after{
content: " ";
display: inline-block;
width: 0;
height: 0;
font-size: 0;
line-height: 0;
border-bottom: solid 6px #fff;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: 1px;
margin-left: 10px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*给以整体的阴影和圆角 但是不能overflow*/
.drop {
left: 0;
right: 0;
top: -9999px;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
position: absolute;
z-index: 1;
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
opacity: 0;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*给送个下拉助攻*/
.select:hover span{
background-color: #1f93bc;
}
.select:hover span a:after{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.select:hover .drop{
position: static;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
/*一个很重要的三角形*/
.drop li:first-child:before {
content: " ";
font-size: 0;
line-height: 0;
margin: 0 auto;
display: block;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
background-color: #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了 但是要把下半部分藏起来*/
position: relative;
top: -5px; /*果断的露出上半部分*/
z-index: 1; /*果断的隐藏下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.drop li a {
color: #888;
line-height: 46px;
border-bottom: solid 1px #eee;
font-size: 14px;
display: block;
background-color: #fff; /*要有背景色才能盖住呀*/
position: relative;
z-index: 2; /*这里很重要 要挡住三角形的下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*以下两块 控制第一个和最后一个LI要圆角 因为最外边的div没有overflow 也不可以overflow*/
.drop li:first-child a{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: -10px;
}
.drop li:last-child a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: none;
}
/*hover事件给了li 先改变三角 再改变a*/
.drop li:hover:before{
background-color: #41b1d9;
}
.drop li:hover a {
background-color: #41b1d9;
color: #fff;
}
</style>
</head>
<body>
<div class="select">
<span><a href="javascript:void(0);">鼠标浮上来</a></span>
<div class="drop">
<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>
</div>
</body>
</html>Run code
Cut to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style lang="en">
ul li{
list-style: none;
}
s{
margin-left: 500px;
position: absolute;
border-color: red transparent transparent;
border-style: solid dashed dashed;
border-width: 10px;
font-size: 0;
height: 0;
line-height: 0;
width: 0;
}
ul li:hover s{
-webkit-transform: rotate(180deg);
-webkit-transform-origin:50% 30% 0 ;
-webkit-transition: transform 0.2s ease-in;
}
</style>
</head>
<body>
<ul>
<li><s> </s></li>
</ul>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 09:57:56
#1368
作者：广西南宁市
transform实现照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body, div, img {
margin: 0;
padding: 0;
}
img {
border: none;
}
html, body {
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.box {
position: relative;
top: 50%;
left: 50%;
margin: -225px 0 0 -480px;
width: 960px;
height: 450px;
}
.box img {
position: absolute;
top: 0;
left: 0;
padding: 5px;
width: 250px;
max-height: 250px;
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
z-index: 1;
cursor: pointer;
/*批量给所有的图片设置运动的方式*/
-webkit-transition: all 0.8s ease-in-out 0s;
transition: all 0.8s ease-in-out 0s;
}
/*让每一张图片的位置进行调整*/
.box img:nth-child(odd) {
top: 0;
left: 0;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.box img:nth-child(even) {
top: 0;
left: 0;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.box img:nth-child(1) {
top: 0;
left: 0;
}
.box img:nth-child(2) {
top: 0;
left: 250px;
}
.box img:nth-child(3) {
top: 0;
left: 500px;
}
.box img:nth-child(4) {
top: 0;
left: 750px;
}
.box img:nth-child(5) {
top: 120px;
left: 380px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.box img:nth-child(6) {
top: 250px;
left: 0px;
}
.box img:nth-child(7) {
top: 250px;
left: 250px;
}
.box img:nth-child(8) {
top: 250px;
left: 500px;
}
.box img:nth-child(9) {
top: 250px;
left: 750px;
}
/*给所有的图片增加过渡效果*/
.box img:hover {
z-index: 10; /*让其显示在最顶端的位置*/
box-shadow: 0 0 20px 0 #ff3333;
-webkit-transform: rotate(0deg) scale(1.5);
transform: rotate(0deg) scale(1.3);
}
</style>
</head>
<body>
<div class="box">
<img src="img/dog/dog1.jpg"/>
<img src="img/dog/dog2.jpg"/>
<img src="img/dog/dog3.jpg"/>
<img src="img/dog/dog4.jpg"/>
<img src="img/dog/dog5.jpg"/>
<img src="img/dog/dog6.jpg"/>
<img src="img/dog/dog7.jpg"/>
<img src="img/dog/dog8.jpg"/>
<img src="img/dog/dog9.jpg"/>
</div>
</body>
</html>Run code
Cut to clipboard
文章：常用html、demo代码 发表时间：2017-06-07, 10:00:32
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>伪元素</title> </head> <body> <style> .trangle { content: " "; width: 0; height: 0; border: 10px solid transparent; border-top-color: #333; } </style> <h3>三角形下拉箭头</h3> <div class="trangle"></div> <style> .dialog { position: relative; width: 150px; height: 36px; border: black 1px solid; border-radius: 5px; background: rgba(245, 245, 245, 1) } .dialog:before, .dialog:after { content: ""; position: absolute; top: 8px; width: 0; height: 0; border: 6px transparent solid; } .dialog:before { left: -12px; border-right-color: rgba(0, 0, 0, 1); } .dialog:after { left: -11px; border-right-color: rgba(245, 245, 245, 1); } </style> <h3>对话框的三角形</h3> <div class="dialog"></div> <style> .mask-box { width: 300px; height: 200px; margin-top: 20px; padding: 20px; background: url(http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJ1fJWJyIQQ3LAAZwxw7cwswAAU-KQJ6sCQABnDf642.jpg) #FB5E23; } .mask-box .mask { position: relative; width: 100%; height: 100%; } .mask-box .mask:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .5); } .mask-box .mask span { display: block; position: inherit; z-index: 1; padding-top: 90px; text-align: center; font-weight: 900; } </style> <h3>遮罩层</h3> <div class="mask-box"> <div class="mask"> <span>遮罩层效果</span> </div> </div> <style> .effect { position: relative; display: inline-block; margin-left: 30px; padding: 10px; font-size: 30px; } .effect:hover::before, .effect:hover::after { position: absolute; } .effect:hover::before { content: "\5B"; left: -20px; } .effect:hover::after { content: "\5D"; right: -20px; } </style> <h3>符号-动态效果</h3> <div class="effect">鼠标悬停看效果</div> </body> </html>