爱飘渺资源分享网

这碗鸡汤你得喝下去


Explore Me
PMun
爱飘渺资源分享网
这碗鸡汤你得喝下去
3
1
15
如何获取不同网站的favicon默认图标
现在网|现在博客-分享、记录生活的点滴favicon 通常是在浏览器中,网页标题前面显示的小图标来代
2月前 · PMun
资料大全
默认分类 PMun · 2月前

CSS

修改选中文字的颜色以及背景颜色

::selection {
    background: #344449;
    color: #fff;
    text-shadow: none;
}
  • outline:none;取消按钮蓝色边框
  • white-space:normal;默认。空白会被浏览器忽略。
  • letter-spacing 属性增加或减少字符间的空白(字符)。
  • word-spacing 属性增加或减少单词间的空白(即字间隔)。
  • 背景图片居中

background-position: center;
background-repeat: no-repeat;

background-size: cover;

组合:
background: url("") no-repeat center;

  • 调整字与字之间的属性是letter-spacing:

letter-spacing:2px;

  • 字体和字体图标对齐

align-items:center;

换行

  • white-space 设置如何处理元素内的空白。
描述
normal默认。空白会被浏览器忽略
pre空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。
  • 3D效果的阴影

-webkit-box-shadow: 3px 3px 10px 0 rgba(33, 33, 33, 0.2);
-moz-box-shadow: 3px 3px 10px 0 rgba(33, 33, 33, 0.2);

box-shadow: 3px 3px 10px 0 rgba(33, 33, 33, 0.2);

  • img水平垂直居中div
<style>
    div {
      text-align: center;
      vertical-align: middle;
    }
    
    img {
      vertical-align: middle
    }
    
    span {
      height: 100%;
      vertical-align: middle;
      display: inline-block
    }
</style>

<div style="">
    <span></span>
    <img src="ad-pic.png" alt="" style="border: 1px solid #000;">
</div>
  • 百度的字体(兼容UC)

font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei",arial,"\5b8b\4f53",sans-serif,tahoma;

1539847573290

  • 阮一峰网站字体

font-family: Georgia, serif;

LESS

&:extend(.XXX); 公用

Extend

    //->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul {
        &:extend(.public);
        list-style: none;
    }

    //->编译为CSS的结果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }

    nav ul {
        list-style: none;

或者:

    //->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul:extend(.public) {
        list-style: none;
    }

    //->编译为CSS的结果和第一种写法一样

Import Directives

从其他样式表中导入样式。

    //->LESS代码
    @import "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->输出的CSS:会把public中的样式也输出
    .clear {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

我们发现上述的操作虽然实现了调取使用,但是会把public中的less也编译到了自己的这个css中,如果不想编译的话,我们需要配置一些参数:

    //->LESS代码
    @import (reference) "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->输出的CSS:
    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

除了reference以外我们还可以配置一些其他的参数值:

inline:在输出中包含源文件但不加工它

less:将文件作为Less文件对象,无论是什么文件扩展名

css:将文件作为CSS文件对象,无论是什么文件扩展名

once:只包含文件一次(默认行为)

multiple:包含文件多次

JS

判断移动端设备还是PC端设备

// ========================判断手机端orPC端================================

function GetAgent() {
  let userInfo = navigator.userAgent;
  let Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];//移动设备数组
  let flag = true;
  for (let v = 0; v < Agents.length; v++) {//遍历移动设备数组
    if (userInfo.indexOf(Agents[v]) > 0) {//如果设备信息在移动设备数组中,返回值为正值,返回值为设备在useragentinfo信息中所处位置
      flag = true;//手机端
      break;
    }
    flag = false;//PC端
  }
  // alert(flag);
  return flag;
}

let getflag = GetAgent(); //false为PC端,true为手机端

// ========================判断手机端orPC端================================

获取网站地址栏图标/favicon.ico

favicon 通常是在浏览器中,网页标题前面显示的小图标来代表该网站的图标标记(俗称地址栏图标)。在一些地方(RSS 抓取应用、网站导航)需要显示网站的 favicon 图标,可以使用 Google 的服务来获取[国内可用!!!],获取方式如下:

1. 服务器在国外

API地址:

https://www.google.com/s2/favicons?domain=域名

实例:

如果你想获取 nowtime.cc 的 favicon.ico
那么则访问:https://www.google.com/s2/favicons?domain=nowtime.cc


2. 服务器在国内

API地址:

https://www.google.cn/s2/favicons?domain=域名

实例:

如果你想获取 nowtime.cc 的 favicon.ico
那么则访问:https://www.google.cn/s2/favicons?domain=nowtime.cc

时间戳显示为多少分钟前,多少天前的JS处理

方法名为dateDiff,支持一个参数timestamp,必须参数,本方法会自动补全为和JS侧支持的13位数值(因为后端返回时间戳可能只精确到秒)。

/*
** 时间戳显示为多少分钟前,多少天前的处理
** eg.
** console.log(dateDiff(1411111111111));  // 2014年09月19日
** console.log(dateDiff(1481111111111));  // 9月前
** console.log(dateDiff(1499911111111));  // 2月前
** console.log(dateDiff(1503211111111));  // 3周前
** console.log(dateDiff(1505283100802));  // 1分钟前
*/
var dateDiff = function (timestamp) {
    // 补全为13位
    var arrTimestamp = (timestamp + '').split('');
    for (var start = 0; start < 13; start++) {
        if (!arrTimestamp[start]) {
            arrTimestamp[start] = '0';
        }
    }
    timestamp = arrTimestamp.join('') * 1;

    var minute = 1000 * 60;
    var hour = minute * 60;
    var day = hour * 24;
    var halfamonth = day * 15;
    var month = day * 30;
    var now = new Date().getTime();
    var diffValue = now - timestamp;

    // 如果本地时间反而小于变量时间
    if (diffValue < 0) {
        return '不久前';
    }

    // 计算差异时间的量级
    var monthC = diffValue / month;
    var weekC = diffValue / (7 * day);
    var dayC = diffValue / day;
    var hourC = diffValue / hour;
    var minC = diffValue / minute;

    // 数值补0方法
    var zero = function (value) {
        if (value < 10) {
            return '0' + value;
        }
        return value;
    };

    // 使用
    if (monthC > 12) {
        // 超过1年,直接显示年月日
        return (function () {
            var date = new Date(timestamp);
            return date.getFullYear() + '年' + zero(date.getMonth() + 1) + '月' + zero(date.getDate()) + '日';
        })();
    } else if (monthC >= 1) {
        return parseInt(monthC) + "月前";
    } else if (weekC >= 1) {
        return parseInt(weekC) + "周前";
    } else if (dayC >= 1) {
        return parseInt(dayC) + "天前";
    } else if (hourC >= 1) {
        return parseInt(hourC) + "小时前";
    } else if (minC >= 1) {
        return parseInt(minC) + "分钟前";
    }
    return '刚刚';
};

JQ

滚动条事件

    function scrollNav() {
        if ($(window).scrollTop() >= 40) {
           
        } else {
           
        }
    }

    $(window).scroll(function (event) {
        scrollNav()
    });

广告浮窗

    var windowHeight = $(window).height();
    $(".floating").css("top", windowHeight / 2 + "px");

    function scrollNav() {
        $(".floating").css("top", windowHeight / 2 + $(window).scrollTop() + "px");
    }

    scrollNav();
    $(window).scroll(function (event) {
        scrollNav()
    });

jquery点击完一个按钮,并且触发另一个按钮

$a.click(function(){

  $b.trigger('click');

});

判断键盘码

    $('obj, obj').keyup(function (e) {
        if(e.keyCode === 13){
            $('btn').trigger('click');
        }
    });

回到顶部

$(".toTop").on('tap', function () {
    cancelAnimationFrame(timer);
    //获取当前毫秒数
    var startTime = +new Date();
    //获取当前页面的滚动高度
    var b = document.body.scrollTop || document.documentElement.scrollTop;
    var d = 500;
    var c = b;
    timer = requestAnimationFrame(function func() {
        var t = d - Math.max(0, startTime - (+new Date()) + d);
        document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
        timer = requestAnimationFrame(func);
        if (t == d) {
            cancelAnimationFrame(timer);
        }
    });
})

HTML

fieldset 标签 -- 对表单进行分组

  在form表单中,我们可以对form中的信息进行分组归类,如注册表单的form,我们可以将注册信息分组成
    基本信息(一般为必填)
    详细信息(一般为可选)
  那我们如何更好的来实现呢?我们可考虑在表单form中加入下面两个标签:
    fieldset:对表单进行分组,一个表单可以有多个fieldset。
    legend:说明每组的内容描述。

格式:

  <fieldset>
    <legend>health information</legend>
      height: <input type="text"/>
      weight: <input type="text"/>
  </fieldset>
<HTML>

   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>

   <body>
      <form action="http://www.dreamdu.com/dreamdu.php" method="post" enctype="multipart/form-data" id="dreamduform">
         <fieldset>
            <legend>用户名与密码:</legend>
            <input name="hiddenField" type="hidden" value="hiddenvalue" />
            <label for="username">用户名:</label>
            <input type="text" id="username" value="www.dreamdu.com" />
            <label for="pass">密码:</label>
            <input type="password" id="pass" />
         </fieldset>
         <fieldset>
            <legend>性别:</legend>
            <label for="boy">男</label>
            <input type="radio" value="1" id="sex" />
            <label for="girl">女</label>
            <input type="radio" value="2" id="sex" />
            <label for="sex">保密</label>
            <input type="radio" value="3" id="sex" />
         </fieldset>
         <fieldset>
            <legend>我最喜爱的:</legend>
            <label for="computer">计算机</label>
            <input type="checkbox" value="1" id="fav" />
            <label for="trval">旅游</label>
            <input type="checkbox" value="2" id="fav" />
            <label for="buy">购物</label>
            <input type="checkbox" value="3" id="fav" />
         </fieldset>

      </form>
   </body>

</HTML>

QQ201809101600037b2636a00988b0a7.png

<fieldset style="width:300;height:150;border:1px dashed red" align="center">
   <legend style="width:100px;border:1px dashed #ff9966;background-color:#ff0000;text-align:center;font-family:arial;font-weight:bold">
      1234
   </legend>
</fieldset>

域名

  • ipmhd.com
  • pmdhd.com
  • ipmclog.com

框架

项目

PC

  1. 广州星铂思餐饮管理有限公司
  2. 鹿角戏
  3. 欧本
  4. 泡面英雄
  5. 云帆公司官网响应式

移动端微官网

  1. 泡面英雄
  2. 鹿角戏(进行中)

编辑器

如果打开后显示乱码,请打开webstorm,找到设置,然后 Settings -> Appearance&Behavior -> Appearance -> 选中Override default fonts by(not recommended)
Name: Microsoft YaHei (选择任意中文字体)
重新打开webstorm 就能正常显示中文了

字体图标制作(矢量图SVG格式)

网址 https://icomoon.io/

QQ20180910155356dd97682dd33e821a.png

然后跳转到这个页面之后点击上传

QQ201809101553564a0c094805bc4e63.png

全选中SVG格式的文件
QQ20180910160003d96f2f2925f33e0e.png

点击确定就可以看到生成的字体图标了
QQ20180910155356fea60450f099d4d3.png

用鼠标点击,选中它们
QQ20180910155356b8aa354cdb98c0b7.png

都选中之后,点击右下角的按钮 Generate Font
QQ2018091015535631f82197f951cffa.png

hover那些图标会显示 GetCode
QQ201809101553563cc0822808859a3c.png

点击之后会显示使用方法
QQ20180910155356694c288880f3a0f6.png

顶部有一个设置按钮,可以设置文件夹名字、类名前缀、浏览器的支持情况等等,一般是使用默认
QQ201809101553569805066559a8b1e9.png
QQ20180910155356f9d4546a275f6c4b.png

然后点击右下角Download按钮,会下载一个zip包,里面有一些js,css,html文件,html是一个demo文件,可以打开看看你的字体情况

我们只需要那个style.css文件和font文件夹,css名字和font文件夹名字是可以随意修改的,font文件夹修改了也要在style.css里面去修改font文件关联路径

有一点需要注意的,font文件夹和style.css是同一个目录下的,如果你放在不同的目录,需要是修改style里面的font文件关联路径

如果您看到这篇文章,表示您的 blog 已经安装成功.