分类目录归档:HTML类别

利用HTML代码下载配有HTTP_REFERER验证的文件

现在很多服务器,都有引入判断函数,能够判断出,终端调用链接的方式,从而阻止一些盗链和禁止下载的行为。

就拿必应搜索来说:

html-download-bing-1

通过HTML源代码或者获取并还原了图片或视频的下载地址的时候,单独访问文件地址,则会出现无效链接的情况:

html-download-bing-wrong

链接其实是没有问题的,只是必应最近增加的判断链接调用方式的函数,使得直接访问文件的方式失效。想要下载必应中的图片或者视频,就必须骗过验证。

借助于 IE 的 F12开发人员工具,我们可以查看出两种请求方式的区别:

从必应网站访问:

html-download-bing-source

直接访问文件地址:html-download-bing-http-get

对比就是:

html-download-bing-referer

两者的区别就是 Referer。HTTP Referer是header的一部分,当浏览器向 Web服务器 发送 Get请求 的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理。

除了使用 BurpSuite 修改抓包信息外,比较简单的方法是自己构造。所以,我们就要将调用视频链接地址的方式,

使用 <body></body> 调用

新建一个HTML文档,在<body></body>中调用视频:

html-download-bing-code

然后再本地打开文档,另存为保存文件,即可下载:

html-download-bing-downloading

继续阅读利用HTML代码下载配有HTTP_REFERER验证的文件

Apple的0.03em,却让你望其项背

 苹果在工业设计方面,一向是追求极致的,这无可争议。其实,在苹果中,处处都能找到用心的设计,这一次来看看苹果的网页设计是如何折服你的。

在苹果的 OS X EI Capitan 的介绍页面,下面有一句说明:OS_X_El_Capitan_logo_svg

“There’s more to love with every click”

点击 OS X 图标查看 Apple 镜像页面 →

很高兴你没有把 click 认成 dick,这这一定程度上,得益于苹果的用心设计。下面来细细看一下:

OS X EI

苹果非常用心的单独对 click 使用了一个 <span></span> HTML标签独立出来,单独使用CSS调整字符间距,使每一个字符间距增大0.03em,使得你不会将 d 分辨为 cl.

OS X EI3

CSS3修饰代码如下:

apple-osx-ei-css3-code

调整一下,取消掉 click 的0.03em增量,来看看对比的效果:

OS X comparison

我们再来调整为 -0.08,看一下夸张的效果:

OS X EI -0.08

不要在意这小小的0.03em,它可能让别人对你望其项背,这种对于设计一丝不苟的敬业精神,是很值得我们学习的!

继续阅读Apple的0.03em,却让你望其项背

CSS简单滚动条样式

浏览器的默认滚动条发展到今天,已经发展到很简约的风格了,但有时候为了更好的显示效果,我们可以利用CSS代码,简单的修改一下滚动条的样式。

展示效果:Demo

浏览器的支持:

仅支持 Internet Explorer,不支持 Chrome 和 Microsoft Edge

CSS代码规则如下:

先来看一下引入的CSS代码样式的格式:

SCROLLBAR-ARROW-COLOR: color; //箭头颜色
SCROLLBAR-FACE-COLOR: color;  //箭头和滚动条面板颜色
SCROLLBAR-DARKSHADOW-COLOR: color; //滚动条右下方颜色
SCROLLBAR-HIGHLIGHT-COLOR: color;  //滚动条左上方颜色
SCROLLBAR-3DLIGHT-COLOR: color;  //滚动条边缘左上颜色
SCROLLBAR-SHADOW-COLOR: color;   //滚动条边缘右下颜色
SCROLLBAR-TRACK-COLOR: color;  //滚动区域底层颜色

我们很容易可以看出每一条声明规则应用的范围;同时,还可以使用Scrollbar呈现出代码和结果:

scrollbar-settings

继续阅读CSS简单滚动条样式

PHP基于Linux服务器的随机选择

和朋友们一起聚会、参加活动,有时候想制作一个小小的抽奖程序来分法纪念品?不知道午饭或晚餐吃什么?你需要一个随机选择工具,来帮助解决你的困难选择症 :-)

展示效果:Demogithub_link

为了基于Linux服务器实现可以实时调取摄像头并上传照片的效果,编写时采用了PHP嵌套HTML的方法,在HTML主页面框架的先前插入了以下的PHP代码:

<?php
 $dir = "images/";
 $img = "";
 if (is_dir($dir)){
     if ($dh = opendir($dir)){
         while (($file = readdir($dh))!= false){
         if( $file<>'' && strlen($file)>2 ){
             $img .= '"'.$file.'",';
                                            }
                                                }
                             }
  $img = substr($img, 0, ( strlen($img)-1));
                  }
?>

一、基于Linux服务器的实时采集图片

你可以访问演示Demo页面的下一个目录  /camera/index.php 来启用摄像头的功能。

二、JavaScript实现随机选择

原理上是使用了JavaScript来实现对 /images 目录下的所有照片参与随机的选择:

$(function(){
  
  var alldata = new Array(<?php echo $img;?>);
  var num = alldata.length - 1;
  var show = $("#show");
  var btn = $("#btn");
  var open = false;
 
  function change(){
   var randomVal = Math.round(Math.random() * num);
   var prizeName = alldata[randomVal];
   show.html("<img src='images/"+prizeName+"' />");
  }
  
  function run(){
   if(!open){
    timer=setInterval(change,50);
    btn.removeClass('start').addClass('stop').text('Stop');
    open = true;
   }else{
    clearInterval(timer);
    btn.removeClass('stop').addClass('start').text('Start');
    open = false;
   }
  }
  
  btn.click(function(){run();})
  
 })

以上代码中用深绿色标注出来的就是timer计时器,用这段代码来控制变换的速度;用红色标注出来的就是选择目录。

random-selection-page 继续阅读PHP基于Linux服务器的随机选择

使用视频做网页背景

使用简短的视频来替换以往的静态图片,可以使信息展现的更为丰富,也能给人们留下比较深刻的印象。

展示效果:Demogithub_link

 

注意考虑因素:
1) 视频应该设置为autoplay,但默认情况下应设为静音,或者不应该包括声音

2) 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景,因为大多数的手机和平板电脑都不支持autoplay

3) 长度需要注意:太短视频能感觉到重复(像大多数这类的视频将设置为循环播放),时间太长而成为叙事归本身,因此值得要一个单独的设计元素。建议大约12-30秒的时长。

4) 可访问性是很重要:在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下,视频播放所要经过只有一次。

5) 带宽是一个大问题视频需要较小,而且尽可能有效地压缩。同时,它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB,理想情况下500KB左右为佳。

一、使用HTML5代码插入视频

<video autoplay loop poster="images/moon.jpg" id="moon"> <!--id保持一致-->
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4"> </video>

 二、全屏视频代码,引入CSS中

video#moon { /*id保持一致*/
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

注意:

对于不支持 HTML5 的浏览器,使用判断:

<!--[if lt IE 9]> 
<script> 
     document.createElement('video'); 
</script>
<![endif]-->

 之后还需将 video 标签插入到CSS中,来声明 video 是元素:

video { display: block; }

三、对于移动端的优化

特别是 iOS系统的设备,会拒绝HTML5视频的播放,需要用图片缩放来处理

将以下代码插入至CSS:

@media screen and (max-device-width: 800px) {
    html {
         background: url(moon.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

这样就完成视频做网页背景的任务了!

继续阅读使用视频做网页背景