评论 - lizhenqiu blog

#⁸⁹⁴

作者：广西南宁市

文章：成功的故事只能倒叙着讲发表时间：2017-10-12, 12:40:31

展开↯

#⁸⁹⁵

作者：广西南宁市

图片延迟加载、懒加载原理及代码实现

<img class="lazy" alt="" data-src="http://wd.geilicdn.com/vshop.jpg" />
<script>
$(window).scroll(function() {//窗口滚动的时候（鼠标滚轮的时候。。）
  $('img').each(function() {//把以下的方法作用到每一个img标签，可自行加限定条件
    var $imgSrc = $(this).attr('data-src');//获取每张图片对应地址
    var $imgTop = $(this).offset().top;//获取每张图片对应距离document顶部的高度
    var scrollT = $(window).scrollTop();//获取滚轮滚动的距离
    var halfDoc = $(window).height();//获取浏览器窗口可视高度
    var ifElse = (scrollT+halfDoc)>=$imgTop;//如果滚动距离加上窗口可视高度大于该图片距离document顶部的高度
    var _this=this;//保存this的作用域以便于在其它作用域上使用这个作用域
    if(ifElse){//如果条件成立
      setTimeout(function(){$(_this).attr('src',$imgSrc);},1000);//把图片的src地址改成data-src的值（前面已经获取了）
    }
  })//end object 'img'
})//end object window
</script>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-10-11, 17:48:43

展开↯

#⁸⁹⁶

作者：广西南宁市

为什么浏览器会自动压缩空格？
规范如此,就是这么任性https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
如果不自动压缩空格，那我们写html的时候就只能写成1行了，否则先这样的代码就会出现大段的空白。

#,广西南宁市,2017-10-11,17:42:27,
既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻不就可以了。

□ -> □
□□ -> □&nbsp;
□□□ -> □&nbsp;□
□□□□ -> □&nbsp;□&nbsp;

Run code

Cut to clipboard

自动规避了浏览器的合并空格策略。

这个思路来自于富文本编辑器，

#,广西南宁市,2017-10-11,17:43:33,
word-wrap：决定句尾放不下单词时，单词是否换行
word-break: 决定单词内该怎么换行
平文本可以配合white-space: pre-wrap来解决多空格压缩显示问题
富文本采用的解决方案是对空格进行间隔html转义，这种方法更灵活，可以适应不同的场景，也适用于平文本。

#,广西南宁市,2017-10-11,17:44:59,
white-space我们更多的时候只用到nowrap的属性，来配合实现…的特效，实际它还有更多的姿势未解锁。
white-space: normal | nowrap | pre | pre-wrap | pre-line
我们重点关注pre开头的几个属性。pre是preserve(保留)的缩写。没错，它就跟保留空格有关系。
pre: 保留所有的空格和回车，且不允许折行。
pre-wrap: 保留所有的空格和回车，但是允许折行。
pre-line: 会合并空格，且允许折行

#,广西南宁市,2017-10-11,17:47:10,
后台按照用户的输入的原始空格返回，不用做转义，前端加上

word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;

Run code

Cut to clipboard

CSS单词换行and断词

#,广西南宁市,2017-10-11,17:47:43,
字符画很好玩，压缩空格就全乱了

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 17:41:22

展开↯

#⁸⁹⁷

作者：广西南宁市

认识word-wrap属性

属性值	解释
normal	使用浏览器默认的换行规则(默认)
break-word	长单词进行换行

#,广西南宁市,2017-10-11,16:10:24,
word-break: break-all, 打破了浏览器的默认换行规则
word-wrap: break-word, 保留浏览器的默认换行规则，一旦一个连续长单词一行容纳不下，就只对这个长单词进行打破换行

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 16:09:51

展开↯

#⁸⁹⁸

作者：广西南宁市

认识word-break属性

属性值	解释
normal	使用浏览器默认的换行规则(默认)
break-all	允许在单词内换行
keep-all	只能在半角空格或连字符处换行

#,广西南宁市,2017-10-11,16:08:26, 现在大多数的浏览器默认的换行规则为半角空格和连字符,因此normal和keep-all的效果是一样的。

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 16:07:51

展开↯

#⁸⁹⁹

作者：广西南宁市

letter-spacing: normal;
text-align: justify;
word-break: break-all;
/* word-wrap: break-word; */
/* white-space: pre-wrap; */

Run code

Cut to clipboard

#,广西南宁市,2017-10-11,15:55:22,

text-justify: inter-ideograph;/*IE*/

Run code

Cut to clipboard

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 15:52:55

展开↯

#⁹⁰⁰

作者：广西南宁市

专业的字符画制作人员会用全角空格来做，这样就不担心浏览器的空格合并问题了

文章：ltrim()、rtrim()与trim()删除字符空格发表时间：2017-10-11, 15:48:05

展开↯

#⁹⁰¹

作者：广西南宁市

文章：成功的故事只能倒叙着讲发表时间：2017-10-11, 07:53:17

展开↯

#⁹⁰²

作者：广西南宁市

PHP 合并图像 imagecopymerge 函数（水印制作实例）
转载地址：http://www.5idev.com/p-php_imagecopymerge.shtml

<?
header("Content-type: image/jpeg");

//原始图像
$dst = "images/flower_1.jpg";

//得到原始图片信息
$dst_im = imagecreatefromjpeg($dst);
$dst_info = getimagesize($dst);

//水印图像
$src = "images/logo.gif";
$src_im = imagecreatefromgif($src);
$src_info = getimagesize($src);	

//水印透明度
$alpha = 30;

//合并水印图片
imagecopymerge($dst_im,$src_im,$dst_info[0]-$src_info[0],$dst_info[1]-$src_info[1],0,0,$src_info[0],
$src_info[1],$alpha);

//输出合并后水印图片
imagejpeg($dst_im);
imagedestroy($dst_im);
imagedestroy($src_im);
?>

Run code

Cut to clipboard

#,广西南宁市,2017-10-10,12:00:37,
php 修改图片大小

<?php
// 重置图片文件大小
function resize_image($filename, $tmpname, $xmax, $ymax)
{
    $ext = explode(".", $filename);
    $ext = $ext[count($ext)-1];
 
    if($ext == "jpg" || $ext == "jpeg")
        $im = imagecreatefromjpeg($tmpname);
    elseif($ext == "png")
        $im = imagecreatefrompng($tmpname);
    elseif($ext == "gif")
        $im = imagecreatefromgif($tmpname);
 
    $x = imagesx($im);
    $y = imagesy($im);
 
    if($x <= $xmax && $y <= $ymax)
        return $im;
 
    if($x >= $y) {
        $newx = $xmax;
        $newy = $newx * $y / $x;
    }
    else {
        $newy = $ymax;
        $newx = $x / $y * $newy;
    }
 
    $im2 = imagecreatetruecolor($newx, $newy);
    imagecopyresized($im2, $im, 0, 0, 0, 0, floor($newx), floor($newy), $x, $y);
    return $im2; 
}
?>

Run code

Cut to clipboard

#,广西南宁市,2017-10-10,12:01:22,
PHP实例————图片等比例缩放功能

<?php
function ImageShrink($imgfile,$minx,$miny){

	//获取大图信息
	$imgarr=getimagesize($imgfile);
	$maxx=$imgarr[0];//宽
	$maxy=$imgarr[1];//长
	$maxt=$imgarr[2];//格式
	$maxm=$imgarr['mime'];//mime类型

	//大图资源
	$maxim=imagecreatefromjpeg($imgfile);

	//缩放判断
	if(($minx/$maxx)>($miny/$maxy)){
		$scale=$miny/$maxy;
	}else{
		$scale=$minx/$maxx;	
	}

	//对所求值进行取整
	$minx=floor($maxx*$scale);
	$miny=floor($maxy*$scale);
	
	//添加小图
	$minim=imagecreatetruecolor($minx,$miny);

	//缩放函数
	imagecopyresampled($minim,$maxim,0,0,0,0,$minx,$miny,$maxx,$maxy);

	//小图输出
	header("content-type:{$maxm}");

	//判断图片类型
	switch($maxt){
		case 1:
			$imgout="imagegif";
			break;
		case 2:
			$imgout="imagejpeg";
			break;
		case 3:
			$imgout="imagepng";
			break;
	}
	//变量函数
	$imgout($minim,'copypic.jpg');
	
	
	//释放资源
	imagedestroy($maxim);
	imagedestroy($minim);
}

ImageShrink("picture/apple.jpg",50,50);
?>

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 12:00:00

展开↯

#⁹⁰³

作者：广西南宁市

芳芳造型
群发推送图文封面，生成素材上传保存永久

<?php

namespace Addons\Qunsend\Controller;
use Home\Controller\AddonsController;

class QunsendController extends AddonsController{
	function sf(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
	}
	function nconfig(){
		return getAddonConfig ( 'WeiSite' );
	}
	//预览
	function qunfasyl(){
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$nconfig=$this->nconfig();
		//echo $nconfig['bbyueyuesjttsyywxh'];exit;
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"'.$nconfig['bbyueyuesjttsyywxh'].'","mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );
		//dump($res['0']);
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已预览';
		M('qunsend')->where('id='.$id)->save($sav);
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//if($res['0']==0) echo '预览已经发送';
		exit;
	}
	//推送
	function qunfas(){
		//exit;
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		$s=M('qunsend')->where('id='.$id)->find();
		$media_id=$s['media_id'];
		
		
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/sendall?access_token=' . $access_token;
		$paramStr .= '{"filter":{"is_to_all":true},"mpnews":{"media_id":"'.$media_id.'"},"msgtype":"mpnews","send_ignore_reprint":0}';
		$res = post_data ( $url, $paramStr );
		
		if($res['0']!=0){
			echo $res['errmsg'];
			exit;
		}
		$sav['qf']='已经群发';
		M('qunsend')->where('id='.$id)->save($sav);
		
		
		$this->assign('id',$id);
		$this->assign('nconfig',$this->nconfig());
		$this->display();
		//dump($res);
		exit;
	}
	function ass(){
		//获取推送文章 qunsend
		$id=I('get.id')+0;
		if(!$id){
			echo 'no id';
			exit;
		}
		$access_token=get_access_token ();
		
		$contenttop='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT7b7bBLnWcvxgWCgzpg17QRKcz8icj7vrCoHG9a6gfiabuZuOl5oeluBw/0"></p>';
		$contentbottom='<p><img src="http://mmbiz.qpic.cn/mmbiz_gif/qbke2mSU58VnW25BcMnoDRqJUNULibduT6EiaeRoqKTA8ObByU69qNMnBibqYkjeWtThD1dUm8vAwoGuHlm6JsiaOA/0"></p>';
		
		/*$p='\618-150429120J5.gif';
		$res=$this->wximgup($p,$access_token,1);
		dump($res);
		exit;*/
		
		$s=M('custom_reply_news')->where('id='.$id)->find();
		
		
		//dump($s);exit;
		$content=$s['content'];
		preg_match_all("/\<img.*?src\=\"(.*?)\"[^>]*>/i", $content, $match); 
		/*dump($match);
		exit;*/
		//重新上传文中的图片链接
		//$nimgurl=explode('<img src="',$s['content']);
		foreach($match['1'] as $k=>&$v){
			$res=$this->wximgup($v,$access_token,1);
			$content=str_ireplace($v,$res['url'],$content);
		}
		/*dump($content);
		exit;*/
		
		//$content=$s['content'];
		//$content=21321321;//str_ireplace('/Uploads/Editor/gh_c7d5c953c490/','http://ffzx.lizhenqiu.com/Uploads/Editor/gh_c7d5c953c490/',$content);
		
		//检查是否存在预推送文章
		/*$cs=M('qunsend')->where('sid='.$id)->find();
		if(empty($cs)){
			
		}else{
			exit;
		}
		//防止文章修改推送 改为使用最新 所以每次添加
		*/
		if(!$s['cover']) $path='/111111.jpg';
		else{
			$path = get_cover ( $s['cover'] );
			$path = $path['path'];
		}
		
		$nconfig=$this->nconfig();
		//900*500比例尺寸 2017.10.10
		if($nconfig['wxfmzdddd']){
			$this->getnewjjfm($path);
			$path='/12345678980.jpg';
		}
		//end
		
		//修复空封面bug
		$res=$this->wximgup($path,$access_token);
		//dump($res);
		//exit;
		$coverurl=$res['media_id'];
		//$content=$nimgurl;//$s['content'];
		//echo $content;exit;
		
			$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
			$jsonArr = array(
				"articles"=> array(
					array(
						// 我就是少了这层array 才会报empty news data 错误
						"title"=> $s['title'],
						"thumb_media_id"=> $coverurl,
						"author"=> 'XX170220',
						"digest"=> $s['intro'],
						"show_cover_pic"=> 0,
						"content"=> $contenttop.$content.$contentbottom,
						"content_source_url"=> 'http://ffzx.lizhenqiu.com/index.php?s=/addon/WeiSite/WeiSite/lastprice/sp/sp/id/'.$id.'.html',
					)
				)
			);
			$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
			$res=post_data ( $articlesurl, $json3, true );
			$media_id=$res['media_id'];
			
		/*$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		$res = post_data ( $url, $paramStr );*/
		//dump($res);exit;
		
		
		$acs['sid']=$id;
		$acs['title']=$s['title'];
		$acs['ctime']=time();
		$acs['media_id']=$media_id;
		$acs['content']=$content;
		$acs['coverurl']=$coverurl;
		$cs=M('qunsend')->add($acs);
		echo $cs;
		//dump($s);
		exit;
		//echo 'fasd';
		
		$url = 'https://api.weixin.qq.com/cgi-bin/message/mass/preview?access_token=' . $access_token;
		//$paramStr .= '{"filter":{"is_to_all":true},';
		//$paramStr .= '"text":{"content":"' . '3432423423' . '"},"msgtype":"text"}';
		
		$res=$this->get_image_media_id(740,$access_token);
		$paramStr .= '{"towxname":"iswtf_","mpnews":{"media_id":"'.$res['media_id'].'"},"msgtype":"mpnews" }';
		
		
		$res = post_data ( $url, $paramStr );
		dump($res);
		//$neww=$this->get_image_media_id(625);
		//dump($neww);
		//$this->display();
	}
	//上传图片到微信
	function wximgup($path,$access_token,$u){
		$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		if(!$u) $url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		$param ['access_token'] = $access_token;
		return $res = post_data ( $url, $param, true );
	}
	
	// 新增临时图片素材
	function get_image_media_id($cover_id,$access_token) {
		$cover = get_cover ( $cover_id );
		$path = $cover ['path'];
		
		/*echo get_access_token ();exit;
		$key = 'access_token_' . get_token ();
		echo S ( $key );exit;*/
		/*$key = 'access_token_' . get_token ();
		S ( $key, 0, 7200 );*/
		//echo realpath(SITE_PATH . $path);exit;
		
		//$access_token=get_access_token ();
		//$url='https://api.weixin.qq.com/cgi-bin/media/uploadimg';
		$url='https://api.weixin.qq.com/cgi-bin/media/upload';
		$param ['media'] = '@' . realpath(SITE_PATH . $path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token;
		$param ['type'] = 'image';
		//$param ['media'] = curl_file_create($path);// .'https://api.weixin.qq.com/cgi-bin/media/uploadimg?access_token='.$access_token);
		
		
		$param ['access_token'] = $access_token;
		
		return $res = post_data ( $url, $param, true );
		
		//start
		$articlesurl='https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token='.$access_token;
		//$articlesparam ['access_token'] = $access_token;
		/*$articlesparam ['articles'][0]['thumb_media_id'] = $res['media_id'];
		$articlesparam ['articles'][0]['author'] = '3432423';
		$articlesparam ['articles'][0]['title'] = 'Happy Day';
		$articlesparam ['articles'][0]['content_source_url'] = 'www.qq.com';
		$articlesparam ['articles'][0]['content'] = 'content';
		$articlesparam ['articles'][0]['digest'] = 'digest';
		$articlesparam ['articles'][0]['show_cover_pic'] = 1;*/
$jsonArr = array(
	"articles"=> array(
		array(
			// 我就是少了这层array 才会报empty news data 错误
			"title"=> 'dingdingdemo',
			"thumb_media_id"=> $res['media_id'],
			"author"=> 'martin',
			"digest"=> 'digest',
			"show_cover_pic"=> 0,
			"content"=> $content,
			"content_source_url"=> 'https://www.baidu.com/',
		)
	)
);
$json3=json_encode($jsonArr,JSON_UNESCAPED_UNICODE);
		
		return post_data ( $articlesurl, $json3, true );
		//end
		
		return $res['media_id'];
		
		echo $path;exit;
		$driver = C ( 'PICTURE_UPLOAD_DRIVER' );
		if ($driver != 'Local' && ! file_exists ( SITE_PATH . $cover ['path'] )) { // 先把图片下载到本地
			
			$pathinfo = pathinfo ( SITE_PATH . $cover ['path'] );
			mkdirs ( $pathinfo ['dirname'] );
			
			$content = wp_file_get_contents ( $cover ['url'] );
			$res = file_put_contents ( SITE_PATH . $cover ['path'], $content );
			if (! $res) {
				return 0;
			}
		}
		$path = $cover ['path'];
		if (! $path) {
			return 0;
		}
		$param ['type'] = 'image';
		$param ['media'] = '@' . realpath ( SITE_PATH . $path );
		$url = 'https://api.weixin.qq.com/cgi-bin/media/upload?access_token=' . get_access_token ();
		$res = post_data ( $url, $param, true );
		if (isset ( $res ['errcode'] ) && $res ['errcode'] != 0) {
			return $res;
		}
		return $res ['media_id'];
	}
	
	function getnewjjfm($src){
		//原始图像
		$dst = "./a.png";
			//实测900*500比例尺寸图片已不会出现裁剪图片边缘的问题，只需要发送多图文消息时注意标题文字是否会挡住图片内容即可。
			$minx=900;
			$miny=500;

		//得到原始图片信息
		$dst_im = imagecreatefrompng($dst);
		$dst_info = getimagesize($dst);

		//水印图像
		$src = ".".$src;
		$src_im = imagecreatefromjpeg($src);
		$src_info = getimagesize($src);	

		$nx=$src_info[0];
		$ny=$src_info[1];

		if($nx>$minx || $ny>$miny){
			//获取大图信息
			$maxx=$src_info[0];//宽
			$maxy=$src_info[1];//长
			$maxt=$src_info[2];//格式
			$maxm=$src_info['mime'];//mime类型


			//缩放判断
			if(($minx/$maxx)>($miny/$maxy)){
				$scale=$miny/$maxy;
			}else{
				$scale=$minx/$maxx;	
			}

			//对所求值进行取整
			$minx=floor($maxx*$scale);
			$miny=floor($maxy*$scale);
			
			//添加小图
			$minim=imagecreatetruecolor($minx,$miny);

			//缩放函数
			imagecopyresampled($minim,$src_im,0,0,0,0,$minx,$miny,$maxx,$maxy);
			//imagejpeg($minim);
			$src_im=$minim;
			$nx=$minx;
			$ny=$miny;
		}


		//水印透明度
		$alpha = 100;

			$nwx=($dst_info[0]-$nx)/2;
			$nwy=($dst_info[1]-$ny)/2;
			

						//imagealphablending($dst_im , false);//关闭混合模式，以便透明颜色能覆盖原画板
						//imagefill($image , 0 , 0 , $bg);//填充
						imagesavealpha($dst_im , true);//设置保存PNG时保留透明通道信息
			
			
		//合并水印图片
		imagecopymerge($dst_im,$src_im,$nwx,$nwy,0,0,$nx,$ny,$alpha);

		//输出合并后水印图片
		imagepng($dst_im,'./12345678980.jpg');
		imagedestroy($dst_im);
		imagedestroy($src_im);
	}
	
}

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 11:56:41

展开↯

#⁹⁰⁴

作者：广西南宁市

注意路径问题

$dst = "./a.png";
$dst = "/a.png";

Run code

Cut to clipboard

文章：自动生成微信公众号推送文封面图片完整显示图片比例尺寸发表时间：2017-10-10, 11:40:35

展开↯

#⁹⁰⁵

作者：广西南宁市

测试了下，引用很降低性能：
引用

$a = array('a','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g','c','d','e','f','g');
    $b = $a;
    function printArray(&$arr) //引用传递，值传递时去掉&
    {
        print(count($arr));
 
    }
    $stime=microtime(true); //获取程序开始执行的时间
     
    for($i=0;$i<=100000;$i++) {
          printArray($a);
          
    }
     echo '<br />';
    $etime=microtime(true);//获取程序执行结束的时间 
    $total=$etime-$stime;   //计算差值 
    echo $total.'秒';

Run code

Cut to clipboard

0.074603080749512秒不引用
0.19360995292664秒

文章：PHP引用(&)使用详解发表时间：2017-10-09, 17:26:19

展开↯

#⁹⁰⁶

作者：广西南宁市

不能输入test（1）是因为应该传过去地址，而数字没有地址？？

#,广西南宁市,2017-10-09,17:25:26, 1应该算是一个表达式，传递表达出会有错误提示。

文章：PHP引用(&)使用详解发表时间：2017-10-09, 17:24:28

展开↯

#⁹⁰⁷

作者：北京市

不听成功者胡说八道，只听失败者的原因

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-10-01, 16:36:30

展开↯

#⁹⁰⁸

作者：广西南宁市

参考资料：
浏览器兼容
css3美化radio单选框(兼容IE9+)
模拟光标打字
CSS radio/checkbox单复选框元素显隐技术
改变CSS世界纵横规则的writing-mode属性
你不知道的CSS（三）

文章：CSS黑魔法小技巧发表时间：2017-09-30, 17:05:58

展开↯

#⁹⁰⁹

作者：广西南宁市

补充一个用得比较少的伪元素，可以改变选择文本时高亮的样式

.container::selection {
    background: red;
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,16:45:25, css实现两端对齐

text-align-last: justify;

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:04:32, rem的那个应该用calc包裹一下吧，不然会报错。数据不能直接计算，要用CSS函数 calc()来帮助实现。

#,广西南宁市,2017-09-30,17:05:01, 受益很多。。。基础一般，有些看不懂。。。
另外，这个 .nav li:first-child ~ li(不包括最后一个li) 也是不包括第一个li 而且第一个的话 :first-child 好像是可以不用写的吧就是 .nav li ~ li , 作者写是考虑可读性吧

#,广西南宁市,2017-09-30,17:05:17, text-align-last兼容性不好

文章：CSS黑魔法小技巧发表时间：2017-09-30, 16:41:25

展开↯

#⁹¹⁰

作者：广西南宁市

css3美化radio单选框(兼容IE9+)

<style>.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
</style>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:00:08,

<style class="cp-pen-styles">.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
</style></head><body>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:02:03,
css3美化checkbox复选框(兼容IE9+)

<style class="cp-pen-styles">@charset "UTF-8";
.checkbox-beauty-container {
  font-size: 0;
}
.checkbox-beauty-container input[type="checkbox"]:checked + .checkbox-beauty::after {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}
.checkbox-beauty-container .checkbox-name {
  vertical-align: middle;
  font-size: 16px;
}
.checkbox-beauty-container .checkbox-beauty {
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid green;
  display: inline-block;
  margin: 0 15px 0 3px;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .checkbox-beauty:hover {
    box-shadow: 0 0 7px green;
  }
  .checkbox-beauty:hover::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green;
  }
}
</style>
<div class="checkbox-beauty-container">
   
        <span class="checkbox-name">苹果</span>
        <input type="checkbox" name="checkboxName" id="checkboxName1" hidden/>
        <label for="checkboxName1" class="checkbox-beauty"></label>
  
   
        <span class="checkbox-name">香蕉</span>
        <input type="checkbox" name="checkboxName" id="checkboxName2" hidden />
        <label for="checkboxName2" class="checkbox-beauty"></label>
   
  
        <span class="checkbox-name">橘子</span>
        <input type="checkbox" name="checkboxName" id="checkboxName3" hidden />
        <label for="checkboxName3" class="checkbox-beauty"></label>
   
</div>

Run code

Cut to clipboard

文章：CSS 美化复选框CHECKBOX-无图片方式发表时间：2017-09-30, 16:56:36

展开↯

#⁹¹¹

作者：广西南宁市

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>h1{
    font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 20ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
  
  animation: typing 10s steps(20,end) 2 ,
    blink .5s step-end infinite alternate;
  
}


@keyframes typing { from { width: 0; } }
@keyframes blink { 50% { border-color: transparent; } }


</style>
</head>
<body>
  <h1>This is hello world !</h1>
</body>
</html>

Run code

Cut to clipboard

文章：js+jQuery实现网页打字机效果（带光标）js模拟光标打字发表时间：2017-09-30, 16:55:01

展开↯

#⁹¹²

作者：广西南宁市

现在不加入适配 iPhone X 的代码都不潮流了啊

文章：CSS黑魔法小技巧发表时间：2017-09-30, 16:39:51

展开↯

Records:2793 48/147 «‹44 45 46 47 48 49 50 51 52 ›»