免费的矢量图标库-网页开发者必备

大家好我是山河,最近有很多朋友问我有没有这些图标啊,那些图标啊,我很疑惑啊,这些东西不是有很多免费的图库吗?

今天就给大家分享一个,开发者必备的图库站

阿里巴巴矢量图标库

网站地址:https://www.iconfont.cn/

法律声明:

iconfont法律声明截图

关于版权©说明

iconfont法律声明截图

完整法律声明地址:iconfont 法律声明 (taobao.com)

个人开发者,不商用是免费的,如果用官方的进行商用,则要官方的书面许可,如果是用户提交的库,则看用户的要求,最好能得一份书面说明。

图库预览图

由此可以看出来,对于我们普通开发者还是非常舒服了。

本文就讲到这里了。

山河博客

PHP实现ping api

大家好我是山河,今天给大家分享点技术,很多小伙伴问我怎么写php的ping api,我跟他们说用exec或者systerm函数来实现,但是他们说主机商不允许使用这两个函数,让我想想办法。

既然不能直接使用dos命令来搞ping,那我们只能模拟ping了。

话不多说,上效果图

嘿嘿,这样效果也差不多。

我们运用php的fsockopen函数来模拟 HTTP连接 实现ping的效果,但实际与ping差距是很大的,因为ping是ICMP协议,而我们是使用tcp或者udp协议。

话不多说,上代码,本代码的模拟ping是使用tcp协议 (HTTP/1.1 和 HTTP/2 都是基于 TCP 传输协议),

HTTP/3 是基于 UDP 传输协议

<?php
/*
    此模拟ping仅仅只是 使用 HTTP协议 模拟ping。不是真正的ping,与真正的 ping 误差很大。
*/
    // ping次数
    $num = 5;
    // 执行时间
    function times(){
        list($usec,$sec) = explode(" ",microtime());
        return ((float)$usec + (float)$sec); 
    }
    function demo($host,$port=80,$i) {
        if($i == 0) {
            echo 'Ping 域名 '.$host.'IP: ['.gethostbyname($host).'] 端口:'.$port.'<br />';
        } 
            echo ping($host,$port);
    }
    function ping($host,$port=80) {
        $starttime= times();
        $ip = gethostbyname($host);
        $fp = @fsockopen($host,$port);
        if(!$fp) {
            return 'ping超时!';
        } else {
            $get = "GET / HTTP/1.1\r\nHost:".$host."\r\nConnect:".$port."Close\r\n";
            fputs($fp,$get);
            fclose($fp);
            $nowtime = times();
            $time = $nowtime - $starttime;
            $time = ceil($time * 1000);
            return 'Ping from '.$ip.':'.$port.' time = '.$time.'ms<br />';
        }
    }
    for($i = 0;$i < $num;$i++){
        echo demo('blog.shanhe.info',80,$i);
        //每次运行中间间隔1S
        sleep(1);
        //刷新输出缓存
        ob_flush();
        flush();
    }

好了,我是山河,本文到此结束

域名绕过备案

域名绕过备案

大家好我是山河,今天给大家分享一个域名绕备案方法,很实用。

大家都知道,备案是很麻烦的一件事,山河最近购买了几个天翼云服务器,但是我在腾讯云备案的域名不能在天翼云上直接用,还需要提交给管局审核一遍才能使用,备案时间又要花半个多月时间,那么这服务器不是白白浪费了十几天。

所以山河想了一个办法来绕过备案,先用着,等备案时间过了再换成正常的。

话不多说,上教程。

环境要求:

1. 一台服务器(宝塔面板/其他面板也差不多)

2. 一个域名(备案不备案都可以)

先打开服务器的宝塔面板

本次演示服务器是天翼云服务器

首先先进到天翼云服务器管理,把防火墙安全组开了

先点击

域名绕过备案

再点击更改安全组

(点击查看图片)

域名绕过备案

点击新建安全组

域名绕过备案

添加规则

域名绕过备案

放通81端口

然后解析域名

域名绕过备案

这里域名不用加端口!

然后打开服务器的宝塔面板

添加域名,注意,这里需要加上域名:81

域名绕过备案

这样就ok了,然后我们试着访问一下。

域名绕过备案

嘿嘿,成功了!

如果想要隐藏端口呢,可以使用ssl,走加密就可以直接访问域名不用加端口了。

如果觉得实用的话呢可以推荐给其他待备案中的小伙伴。

我是山河。原创文章!

山河博客HTML

一个动画渐变的科幻形按钮

大家好我是山河,今晚我给大家带来了一个很好看的按钮,动画效果很棒,代码大家自己借鉴吧。

话不多说,直接贴代码出来。

先上效果图(点击下面文字可以查看图片)

blog.shanhe.info
效果图

直接上代码

css代码块

a {
            display: block;
            width: 220px;
            height: 70px;
            z-index: 1;
        }

        a:after {
            content: '';
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            animation: gradient 3s ease-in-out infinite, border 0.5s forwards ease-in-out reverse;
        }

        a>span {
            display: block;
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease-in-out infinite;
        }

        .absolute-centering,
        body:after,
        a,
        a:after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .text-formatting,
        a {
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            letter-spacing: 2px;
            line-height: 70px;
            font-size: 28px;
        }

        @keyframes gradient {
            0% {
                background-position: 14% 0%;
            }

            50% {
                background-position: 87% 100%;
            }

            100% {
                background-position: 14% 0%;
            }
        }

        @keyframes border {
            0% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            25% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            50% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
            }

            75% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
            }

            100% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
            }
        }

html代码块

<a href="#"><span>按钮</span></a>

好了,本文到此结束。

我是山河

山河博客HTML

HTML表单升级教程-web前端

大家好,我是山河

这次带来HTML表单高级教程

没记错的话菜鸟教程是没有我写的这篇教程这么全

有问题可以邮箱发信息

不多说,上代码

<input type="url" name="userurl"/>
//url属性用于说明网站网址,显示为在一个文本框中输入URL地址。在提交表单时会自动验证url的值,如果不合格,验证不通过并会弹出提示
//其实也可以使用普通属性设置url输入框,例如可以使用max属性设置其最大值、min属性设置其最小值、step属性设置合法的数字间隔、利用value属性规定其默认值

<input type="email" name="user_email"/>
//email属性用于让浏览者输入E-mail地址。在提交表单时会自动验证email域的值,如果不合格就自动弹出提示,并拦截

帖子首发日期 2020-6-14

山河于 lolichan.vip论坛首发

山河博客

PHP基础教程(经典基础练习题)

大家好,我是山河,以前说好的要发一些教程,也没发(没时间+懒)
这次我给大家带来的是PHP的基础题
题目是 :
1. 年份是4的倍数而不是100的倍数;同时满足要用到 &&
2. 年份是400的倍数。其他的年份都不是闰年。

对于学过一阵子PHP的人来说难度不是很大,对于刚学PHP的人来说,难度略大

好吧,实话说确实很简单

这道题呢,要用到几个PHP自带的函数,也可以自定义函数,不过能省事就省事
上函数代码

empty()
//此函数用于检测变量是否为null(空值)
floor()
//floor()函数用于小数取整
is_numeric()
//用于检测变量是否为数字或数字字符串
/*
    为什么会用到这些呢?我上我写的代码你就懂了(实际上懒得解释)
    empty()函数是因为我在PHP文件中写HTML代码,直接在页面获取数据并输出,如果不用empty()函数
    页面会报错,报错原因是PHP代码是从上到下运行的(这里我也不懂怎么解释,大概是这个意思)
    这时候你获取表单的变量是获取到了NULL的,所以运行后会显示没有获取到XX变量的数据,会报错
*/

直接上全部代码,走起

if(floor($x)!=$x) //floor()函数用于小数取整
    {
        echo "请输入正整数字";
    }
    elseif($x>0)
    {
    if($x%4==0 && $x%100!=0 || $x%400==0)//这玩意我就不说了,你们自己理解,很基础的运算符
    {
    echo $x."是闰年";
    } else
    {
    echo $x."是平年";
    }
   }
   else
   {
    echo "请输入大于1的正整数";
   }
}
else
{
    echo '请输入正整数字';
}
}
?>
<form method="post" action="">
输入年份<input type="text" name="year">
<br>
<input type="submit"  value="判断闰年">
</form>
</body>
</html>

© 版权来自山河
纯原创 代码纯手打,教程纯手打

文章之前首发于 lolichan.vip 论坛 。

山河博客HTML

制作响应式网站教程

大家好我是山河,鉴于很多小伙伴需要搞响应式网站,但是又无从下手,所以山河抽时间给大家写了一篇文章,个人认为应该算是通俗易懂。

案例代码可下载(网站底部)

好了,开始教程。

1.了解什么是响应式网页设计

2.了解 viewport 和 媒体查询

3.网页布局技术

下面我们开始讲解第一点

了解什么是响应式网页设计:

响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

之后是第二点

了解 viewport 和 媒体查询

所谓 viewport(视窗) 呢,就是我们眼睛能看见的地方,而在浏览器中,就是我们能在浏览器中看见的区域。

viewport 山河就不解释这么多,直接给大家常用的移动端的布局窗口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

上面这个代码的作用是让当前 viewport 的宽度等于 设备 的宽度,且禁止用户缩放。

viewport 详细的内容和参数 可以去 MDN 或 w3c 查看,这里就不多讲了。

然后山河来讲 媒体查询

那什么是媒体查询 ( @media 查询 ) 呢?

响应式设计仅仅是因为媒介查询才新兴起来的。此话可以在 MDN 上查到

CSS2 中引入了 @media 规则,它让为不同媒体类型定义不同样式规则成为可能。

下面来一个媒体查询的简单案例

@media screen and (max-width: 480px) {
  body {
    background: blue;
  }
}

此代码解释:当浏览器宽度达到 480px 或更小时,背景颜色改变为blue(蓝色)

然后具体的内容也是可以去MDN和w3c去看看,这里时间紧迫,山河就不讲这么仔细了。

接下来山河开始讲现代网页布局方式。

  1. 弹性布局
  2. 多列布局
  3. 网格布局

山河推荐使用 弹性布局的方式,山河 个人认为 它比多列布局,网格布局简便

由于时间关系,山河就只写一个弹性布局+viewport +媒体查询的方式给大家作为例子,多列布局和网格布局可以去MDN或w3c上查看相关资料,直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <title>山河-响应式网页案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background: #FFA500;
        }
        header h1 {
            padding: 30px;
            text-align: center;
        }
        .container {
            max-width: 1135px;
            margin: 10px auto;
            padding: 10px;
            background: #ecf0f1;
        }
        .container ul {
            list-style: none;
            /* 开启弹性盒子 */
            display: flex;  
            /* 位置不够就换行,第一行在上方 */
            flex-wrap: wrap;
            /* 两端对齐,项目之间的间隔都相等 */
            justify-content: space-between;
        }
        .container ul li {
            background: #fff;
            margin: 10px 5px;
            display: flex;
            justify-content: space-between;
            width: 30%;
            height: 30%;
        }
        .container ul li img {
            width: 50%;
            height: 100%;
        }
        footer {
            background: #2E2E2E;
            color: #fff;
            padding: 20px 0;
        }
        footer p {
            text-align: center;
        }
        /* 媒体查询 */
        /* 适配平板端 */
        @media screen and (max-width:770px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 48%;
                margin: 10px 0b;
            }
        }
        /* 适配手机端 */
        @media screen and (max-width:480px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>山河-响应式网页案例</h1>
    </header>
    <div class="container">
        <ul>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>Copyright © 2021-2022 山河技术分享-山河博客 blog.shanhe.info All Rights Reserved.</p>
    </footer>
</body>
</html>

效果预览图

blog.shanhe.info-wap
适应手机端

blog.shanhe.info-phablet
适应平板端
blog.shanhe.info-pc
PC端

好了,本文到此结束,希望能帮助到大家

文章 © 山河

有问题即可去网站底部找到站长信息联系山河

下载地址三个都是直接下载,下载方式上面的文字可无视。

山河博客

PHP工厂模式详解-PHP设计模式

山河博客
山河博客

大家好我是山河,今天我给大家谈一谈关于PHP的设计模式之工厂模式哈

工厂模式特点:传递不同的参数获取不同的对象

上代码加深理解

<?php
class ProductsA {
}
class ProductsB {	
}
//工厂模式
class ProductsFactory {
	public function create($num) {
		switch($num) {
			case 1:
				return new ProductsA;
			case 2:
				return new ProductsB;
			default:
				return null;
		}
	}
}
//测试
$factory=new ProductsFactory();
$obj1=$factory->create(1);
$obj2=$factory->create(2);
var_dump($obj1,$obj2); //object(ProductsA)#2 (0) { } object(ProductsB)#3 (0) { } 

通过上方代码可以看出来,将ProductsFactory对象实例化了之后,调用create方法,传递1就实例化ProductsA对象,传递2就实例化ProductsB对象。

这个就是PHP工厂模式。

好了,本文结束,我是山河。

山河博客

PHP单例模式详解-PHP设计模式

山河博客
山河博客

大家好我是山河,今天我给大家谈谈关于这个PHP的单例模式啊,

什么是单例模式?

单例模式要求:一个类只能有一个对象

应用场景:多次请求数据库只需要一个连接对象。

实现:三私一公

1、私有的静态属性用来保存对象的单例
2、私有的构造方法用来阻止在类的外部实例化
3、私有的__clone阻止在类的外部clone对象
4、公有的静态方法用来获取对象的单例

代码详解

<?php
//三私一公
class DB {
	//静态的属性用来保存对象的单例
	private static $instance;
	//私有的构造方法阻止在类的外部实例化
	private function __construct() {
		
	}
	//私有的__clone()阻止在类的外部clone对象
	private function __clone() {
		
	}
	public static function getInstance() {
		//保存的值不属于DB类的类型就实例化
		if(!self::$instance instanceof self)
			self::$instance=new self();
		return self::$instance;
	}
}
//测试
$db1=DB::getInstance();
$db2=DB::getInstance();
var_dump($db1,$db2);	//object(DB)#1 (0) { } object(DB)#1 (0) { } 

各位小伙伴,看完这篇教程,我相信大家是不是有所感悟呢?

好了,本篇文章到此结束,我是山河。

山河博客Code

小案例解释Javascript栈内存

大家好我是山河,今天我将写一个小案例解释Javascript栈内存,例子很简单,而且容易理解,话不多说,直接上代码解释。

<script>
	var a = 1, b = a;
	a++;
	console.log(a);
	console.log(b);
</script>

输出结果

这个例子详解

我们声明了变量 a 定义值为1,

变量b = a

然后 a 进行递增

保存运行,查看控制台

a因为递增+1,控制台输出了2

而b还是原来的1

这是为什么?

山河告诉你们答案:

JS的变量都是保存在栈内存中,值与值都是独立存在,修改一个变量不会影响其他的变量

看懂了没?是不是很简单呢,下次山河给大家再把堆内存的例子做出来给大家。

下期再见,我是山河。