最新评论 - 第 71 页 - lizhenqiu blog

广西南宁市 2017-06-30 14:54

#0

阅读 2806.4万

常用html、demo代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>web安全色</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      font-size: 12px;
      background-color: #efefef;
    }
    h1 {
      height: 100px;
      line-height: 100px;
      font-size: 36px;
      text-align: center;
    }
    .color-list {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      width: 1000px;
      margin: 0 auto;
      justify-content: space-between;
      align-items: space-between;
      flex-wrap: wrap;
      overflow-y: auto;
    }
    .color-item {
      width: 150px;
      height: 190px;
      margin-bottom: 20px;
      border-radius: 8px;
      border: 1px solid #ccc;
      box-shadow: 3px 2px 3px #ccc;
    }
    .color-block {
      width: 148px;
      height: 130px;
      border-radius: 5px;
      border-bottom: 1px solid #ccc;
    }
    .color-code {
      height: 36px;
      line-height: 18px;
      padding-left: 10px;
      margin-top: 10px;
    }
    .color-code strong {
      margin-right: 14px;
    }
  </style>
</head>
<body>
  <h1>WEB安全色DEMO</h1>
  <div class="color-list" id="color-list"></div>
  <script>
    window.onload = () => {

      let format = (num) => ('0' + num.toString(16)).slice(-2)

      let arr = [0, 0, 0],
          dom = []

      while (arr[0] <= 5) {

        let arr2 = arr.map((ele) =>  ele * 51)

        let hex = '#' + arr2.map((ele) => format(ele)).join('').toUpperCase(),
            rgb = arr2.join(', ')

          arr[2]++
        if (arr[2] > 5) {

          arr[2] = 0
          arr[1]++

          if (arr[1] > 5) {

            arr[0]++
            arr[1] = 0
          }
        }
        dom.push(`<div class="color-item">
                  <div class="color-block" style="background-color: ${hex};"></div>
                  <div class="color-code">
                  <p><strong>HEX:</strong><span>${hex}</span></p>
                  <p><strong>RGB:</strong><span>${rgb}</span></p>
                  </div></div>`)
      }
      document.querySelector('#color-list').innerHTML = dom.join('')

      setInterval(() => document.querySelector('h1').style.color = '#' + Math.random().toString(16).slice(2, 8), 233)
    }
  </script>
</body>
</html>

查看文章跳到评论

广西南宁市 2017-06-30 14:50

#0

阅读 73.3万

CSS 美化复选框CHECKBOX-无图片方式

input复选框单选框样式美化

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .checkbox {
            padding-left: 20px;
        }

        .checkbox label {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding-left: 5px;
        }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

        .checkbox input[type="checkbox"],
        .checkbox input[type="radio"] {
            opacity: 0;
            z-index: 1;
        }

        .checkbox input[type="checkbox"]:focus+label::before,
        .checkbox input[type="radio"]:focus+label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked+label::after,
        .checkbox input[type="radio"]:checked+label::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

        .checkbox input[type="checkbox"]:indeterminate+label::after,
        .checkbox input[type="radio"]:indeterminate+label::after {
            display: block;
            content: "";
            width: 10px;
            height: 3px;
            background-color: #555555;
            border-radius: 2px;
            margin-left: -16.5px;
            margin-top: 7px;
        }

        .checkbox input[type="checkbox"]:disabled+label,
        .checkbox input[type="radio"]:disabled+label {
            opacity: 0.65;
        }

        .checkbox input[type="checkbox"]:disabled+label::before,
        .checkbox input[type="radio"]:disabled+label::before {
            background-color: #eeeeee;
            cursor: not-allowed;
        }

        .checkbox.checkbox-circle label::before {
            border-radius: 50%;
        }

        .checkbox.checkbox-inline {
            margin-top: 0;
        }

        .checkbox-primary input[type="checkbox"]:checked+label::before,
        .checkbox-primary input[type="radio"]:checked+label::before {
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .checkbox-primary input[type="checkbox"]:checked+label::after,
        .checkbox-primary input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-danger input[type="checkbox"]:checked+label::before,
        .checkbox-danger input[type="radio"]:checked+label::before {
            background-color: #d9534f;
            border-color: #d9534f;
        }

        .checkbox-danger input[type="checkbox"]:checked+label::after,
        .checkbox-danger input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-info input[type="checkbox"]:checked+label::before,
        .checkbox-info input[type="radio"]:checked+label::before {
            background-color: #5bc0de;
            border-color: #5bc0de;
        }

        .checkbox-info input[type="checkbox"]:checked+label::after,
        .checkbox-info input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-warning input[type="checkbox"]:checked+label::before,
        .checkbox-warning input[type="radio"]:checked+label::before {
            background-color: #f0ad4e;
            border-color: #f0ad4e;
        }

        .checkbox-warning input[type="checkbox"]:checked+label::after,
        .checkbox-warning input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-success input[type="checkbox"]:checked+label::before,
        .checkbox-success input[type="radio"]:checked+label::before {
            background-color: #5cb85c;
            border-color: #5cb85c;
        }

        .checkbox-success input[type="checkbox"]:checked+label::after,
        .checkbox-success input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-primary input[type="checkbox"]:indeterminate+label::before,
        .checkbox-primary input[type="radio"]:indeterminate+label::before {
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .checkbox-primary input[type="checkbox"]:indeterminate+label::after,
        .checkbox-primary input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-danger input[type="checkbox"]:indeterminate+label::before,
        .checkbox-danger input[type="radio"]:indeterminate+label::before {
            background-color: #d9534f;
            border-color: #d9534f;
        }

        .checkbox-danger input[type="checkbox"]:indeterminate+label::after,
        .checkbox-danger input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-info input[type="checkbox"]:indeterminate+label::before,
        .checkbox-info input[type="radio"]:indeterminate+label::before {
            background-color: #5bc0de;
            border-color: #5bc0de;
        }

        .checkbox-info input[type="checkbox"]:indeterminate+label::after,
        .checkbox-info input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-warning input[type="checkbox"]:indeterminate+label::before,
        .checkbox-warning input[type="radio"]:indeterminate+label::before {
            background-color: #f0ad4e;
            border-color: #f0ad4e;
        }

        .checkbox-warning input[type="checkbox"]:indeterminate+label::after,
        .checkbox-warning input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-success input[type="checkbox"]:indeterminate+label::before,
        .checkbox-success input[type="radio"]:indeterminate+label::before {
            background-color: #5cb85c;
            border-color: #5cb85c;
        }

        .checkbox-success input[type="checkbox"]:indeterminate+label::after,
        .checkbox-success input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .radio {
            padding-left: 20px;
        }

        .radio label {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding-left: 5px;
        }

        .radio label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }

        .radio label::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 3px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }

        .radio input[type="radio"] {
            opacity: 0;
            z-index: 1;
        }

        .radio input[type="radio"]:focus+label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .radio input[type="radio"]:checked+label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .radio input[type="radio"]:disabled+label {
            opacity: 0.65;
        }

        .radio input[type="radio"]:disabled+label::before {
            cursor: not-allowed;
        }

        .radio.radio-inline {
            margin-top: 0;
        }

        .radio-primary input[type="radio"]+label::after {
            background-color: #337ab7;
        }

        .radio-primary input[type="radio"]:checked+label::before {
            border-color: #337ab7;
        }

        .radio-primary input[type="radio"]:checked+label::after {
            background-color: #337ab7;
        }

        .radio-danger input[type="radio"]+label::after {
            background-color: #d9534f;
        }

        .radio-danger input[type="radio"]:checked+label::before {
            border-color: #d9534f;
        }

        .radio-danger input[type="radio"]:checked+label::after {
            background-color: #d9534f;
        }

        .radio-info input[type="radio"]+label::after {
            background-color: #5bc0de;
        }

        .radio-info input[type="radio"]:checked+label::before {
            border-color: #5bc0de;
        }

        .radio-info input[type="radio"]:checked+label::after {
            background-color: #5bc0de;
        }

        .radio-warning input[type="radio"]+label::after {
            background-color: #f0ad4e;
        }

        .radio-warning input[type="radio"]:checked+label::before {
            border-color: #f0ad4e;
        }

        .radio-warning input[type="radio"]:checked+label::after {
            background-color: #f0ad4e;
        }

        .radio-success input[type="radio"]+label::after {
            background-color: #5cb85c;
        }

        .radio-success input[type="radio"]:checked+label::before {
            border-color: #5cb85c;
        }

        .radio-success input[type="radio"]:checked+label::after {
            background-color: #5cb85c;
        }

        input[type="checkbox"].styled:checked+label:after,
        input[type="radio"].styled:checked+label:after {
            font-family: 'FontAwesome';
            content: "\f00c";
        }

        input[type="checkbox"] .styled:checked+label::before,
        input[type="radio"] .styled:checked+label::before {
            color: #fff;
        }

        input[type="checkbox"] .styled:checked+label::after,
        input[type="radio"] .styled:checked+label::after {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox">
        <label for="checkbox1">
        Default
    </label>
    </div>
    <div class="checkbox checkbox-primary">
        <input id="checkbox2" class="styled" type="checkbox" checked>
        <label for="checkbox2">
        Primary
    </label>
    </div>
    <div class="checkbox checkbox-success">
        <input id="checkbox3" class="styled" type="checkbox">
        <label for="checkbox3">
        Success
    </label>
    </div>
    <div class="checkbox checkbox-info">
        <input id="checkbox4" class="styled" type="checkbox">
        <label for="checkbox4">
        Info
    </label>
    </div>
    <div class="checkbox checkbox-warning">
        <input id="checkbox5" type="checkbox" class="styled" checked>
        <label for="checkbox5">
        Warning
        </label>
    </div>
    <div class="radio">
        <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
        <label></label>
    </div>
    <div class="radio radio-success">
        <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
        <label></label>
    </div>
</body>

</html>

查看文章跳到评论

广西南宁市 2017-06-30 14:47

#0

阅读 182.8万

JS浮点数运算多出很多位小数点Bug的解决办法

浮点数计算问题
js解释环境里面，0.1+0.2！=0.3 ；结果是true
为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂；

<script>
Math.formatFloat = function(f, digit) { 
    var m = Math.pow(10, digit); 
    return parseInt(f * m, 10) / m; 
} 

var numA = 0.1; 
var numB = 0.2;
console.log(0.1+0.2);
console.log(0.1+0.2==0.3);
console.log(0.1+0.2!=0.3);
console.log(Math.formatFloat(numA + numB, 1) === 0.3);</script>

大部分编程语言都是这样处理精度差异的，借用过来处理一下 JS 中的浮点数精度误差。

查看文章跳到评论

广西南宁市 2017-06-30 14:45

#0

阅读 2806.4万

常用html、demo代码

获取当前省市区

<script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script><script>$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js',
	function(){ 
	  alert(remote_ip_info.country);//国家  
	  alert(remote_ip_info.province);//省份  
	  alert(remote_ip_info.city);//城市  
});</script>

查看文章跳到评论

广西南宁市 2017-06-30 14:41

#0

阅读 2806.4万

常用html、demo代码

边框颜色跟着字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
 
        .border {width: 1000px;margin: 100px auto;}
        .border li{width: 100px;height: 100px;display: inline-block;margin: 10px;line-height: 100px;text-align: center;position: relative;    -webkit-transform: scale(1); transform: scale(1);}
        .border li::before {
            position: absolute;
            z-index: -1;
            top: -1px;
            right: 0;
            bottom: 1px;
            left: 0;
            content: '';
            opacity: .5;
            border: 2px solid;
            border-radius: 3px;
        }
        .red{color:red;}
        .blue{color:blue;}
        .orange{color:orange;}

    </style>
</head>
<body>
    <div class="border">
        <li class="red">红色</li>
        <li class="blue">蓝色</li>
        <li class="orange">橘色</li>
    </div>


</body>
</html>

查看文章跳到评论

广西南宁市 2017-06-30 14:14

#0

阅读 70.2万

2017年过半，我们身处的风口和泡沫

查看文章跳到评论

广西南宁市 2017-06-30 09:41

#0

阅读 70.2万

2017年过半，我们身处的风口和泡沫

广西南宁市2017-06-30 10:11:03

不言盛景，不叙深情。

广西南宁市2017-06-30 10:38:34

广西南宁市2017-06-30 10:39:08

广西南宁市2017-06-30 10:39:24

广西南宁市2017-06-30 10:54:38

广西南宁市2017-06-30 11:55:26

广西南宁市2017-06-30 14:05:14

#¹不著世间，不染分别。

广西南宁市2017-06-30 14:06:15

#¹盛极必衰情深不寿十分红处便化灰情到浓时只转薄薄情断井颓垣又何必去述罢了罢了~ 来年岁月长青衫薄又如何自处呢~

广西南宁市2017-06-30 14:06:56

沉默起来，可能会遇到更平静的自己吧。

广西南宁市2017-06-30 14:07:14

#⁹我认为这句话应该是一个历经沧桑，难以再相信他人的man讲的话。

广西南宁市2017-06-30 14:08:48

佛曰：爱别离，怨憎会，撒手西归，全无是类。不过是满眼空花，一片虚幻。
花开荼蘼，终有落英缤纷。。。浮华暂借，难免曲终人散。
不言盛景，不叙深情。
慧极必伤，情深不寿。安之若素，微笑向暖。
谁的新欢？谁的旧爱？
所谓一见钟情，不过见色起意；所谓日久生情，不过权衡利弊。
一念放下，万般自在。。。敢不活在当下？憋屈着祝人幸福，是这世上最蠢的事情。
用心甘情愿的态度，过随遇而安的生活。
夜色正好。

广西南宁市2017-06-30 14:09:00

#¹¹佛说，人生七种苦：生、老、病、死、爱别离、怨憎会、求不得。
佛还说，人生在世如身处荆棘之中，心不动，人不妄动，不动则不伤：如心动则人妄动，伤其身痛其骨，于是体会到世间诸般痛苦。
佛又说，一念愚即般若绝，一念智即半若生。
佛不仅说，大悲无泪，大悟无言，大笑无声。
佛而且说，一切皆为虚幻。
佛虽然说，一花一世界，一叶一如来。
佛但是说，苦海无边回头是岸，放下屠刀立地成佛。
佛总结说，不可说，不可说。

广西南宁市2017-06-30 14:09:37

守法朝朝忧闷,强梁夜夜欢歌,
损人利己骑马骡,正直公平挨饿。
修桥补路瞎眼,杀人放火儿多,
我到西天问我佛,佛说:我也没辙!

广西南宁市2017-06-30 14:10:07

繁华声遁入空门
折煞了世人
梦偏冷辗转一生
情债又几本
如你默认生死枯等
枯等一圈又一圈的年轮
浮图塔断了几层
断了谁的魂
痛直奔一盏残灯
倾塌的山门

广西南宁市2017-06-30 14:10:40

放下执念确是万般自在

广西南宁市2017-06-30 14:10:47

#¹⁵要知道得到就是失去。拥有不过是过眼云烟～笑而不语…自在在心。

广西南宁市2017-06-30 14:11:08

#¹⁶修罗眼中的万物…皆有归处。得到就是失去…祸福…总是相依。

广西南宁市2017-06-30 14:11:23

#¹⁵谁又憋屈祝人幸福了😬👏

广西南宁市2017-06-30 15:49:13

#¹⁸男人就该干男人该干的事

广西南宁市2017-06-30 15:49:21

用心做cg，用脚做游戏。

查看文章跳到评论

北京市 2017-06-29 21:06

#0

阅读 44.9万

jquery城市搜索自动完成特效支持拼音首字母补全首字母自动完成

实现一个搜索提示（补全）功能需要JavaScript、ajax、数据库、jsp/php很多知识，
如果数据量大还需要特殊优化，一个小功能，花费太大精力不合适

但这是个可有可无的功能吗，肯定不是
对用户而言，可以有效降低输入成本，在面对输入框时，获得更多提示，不用那么迷茫和无助
对站长而言，可以优先推送网站的关键信息，等于多了一个广告位。

一所大学图书馆的搜索框智能提示，大约50万个词条（书名）
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码，就可以实现baidu、淘宝搜索框提示的全部功能
比如：拼音匹配、拼音首字母匹配、模糊搜索、智能容错，
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了，
无需编写程序，
五分钟（真的是5分钟）就可以在线配置拥有
主流搜索引擎都有的自动提示（自动补全）功能

查看文章跳到评论

广西南宁市 2017-06-29 12:03

#0

阅读 216.1万

js 删除前confirm确认提示代码

某大姐试戴一30万的翡翠镯子。。。摔碎了。是你，咋办？
我能开心死
1、大妈通过个人认证，开通微博。详细说明事情原委，诚恳自我反省。并积极表示承担赔偿。分分钟微博热搜。
2、次日，大妈发微博，声明已经购买该手镯，并出去店家证明和手镯图片。证明手镯真伪和品质。再次热搜。
3、第三日，大妈说明自身经济情况，表示家庭因此事困难拮据，恳请有利人士。对手镯进行二次加工，碎了的手镯打造为一对吊坠。
4、第四日，这时希望蹭热度做推广的工作室、团队、已经在大妈面前排好队了。选定一家工作室。双方发出声明。持续保持平时花钱都买不到的曝光率。
5、若干天后，通过网络推广，大V炒作。这一对让大妈晕倒、大众欢呼的碎镯子，经过某某工作室/公司/团队的二次修复，闪亮登场！同时与某平台合作，进行慈善拍卖。
6、与此同时，大妈华丽丽宣布，经过此次教训，受益良多，为了让更多人不走大妈弯路，大妈自己变成了翡翠经销商。大家多多捧场哦。
到了这一步，谁还管你这镯子本来值多少钱。😅

广西南宁市2017-06-29 12:03:29

那你还不去店里故意摔碎一个😬

查看文章跳到评论

北京市 2017-06-29 00:44

#0

阅读 111.4万

在现在万众创业的年代，职场员工入职是有门槛，但注册开个公司做老板的门槛无非就是一个钱字

我的车二十万买来的，没有任何故障，车漆也光亮如新。平时都是放在车库里，需要出门的时候，都是我媳妇在后面推着走。过减速带的时候，我会找几个人抬过去。轮胎我会每天转半圈，防止轮胎同一个部位长期受压变形。过几天我还会用汽车举升机把车抬起来一下，防止悬架受力不均匀。空调从来不开，害怕里面的冷凝器发霉。机油我也每天搅动几次，害怕长时间静止损坏发动机油底壳的油封。门窗的缝隙我也用胶水封死了害怕别人塞的小广告卡住玻璃升降机。雨刷我都是拆下来放到被窝里，害怕雨刷长时间暴晒导致胶条老化门框密封胶条我也是每天涂抹一遍鲁花5S特级压榨花生油害怕胶条氧化变硬。电池我也是每天拆下来充电害怕蓄电池长时间自行放电导致不可逆的硫化转向的时候我也不舍得打转向灯都是让人在后面打手势，害怕烧坏灯泡。轮胎的气压每走两步我就测量一次害怕胎压过高或者过低引起轮胎寿命衰减每走几百米我还要下车去抠一下轮胎花纹中夹住的小石子，害怕扎坏轮胎

查看文章跳到评论

广西南宁市 2017-06-28 09:59

#0

阅读 58.9万

YOURPHP验证码不显示问题解决方法清理图片缓存

function vpost($url,$data){
	// 模拟提交数据函数
    $curl = curl_init(); // 启动一个CURL会话
    curl_setopt($curl, CURLOPT_URL, $url); // 要访问的地址
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0); // 对认证证书来源的检查
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 1); // 从证书中检查SSL加密算法是否存在
    curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); // 模拟用户使用的浏览器
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1); // 使用自动跳转
    curl_setopt($curl, CURLOPT_AUTOREFERER, 1); // 自动设置Referer
    curl_setopt($curl, CURLOPT_POST, 1); // 发送一个常规的Post请求
    curl_setopt($curl, CURLOPT_POSTFIELDS, $data); // Post提交的数据包
    curl_setopt($curl, CURLOPT_TIMEOUT, 30); // 设置超时限制防止死循环
    curl_setopt($curl, CURLOPT_HEADER, 0); // 显示返回的Header区域内容
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // 获取的信息以文件流的形式返回
    $tmpInfo = curl_exec($curl); // 执行操作
    if (curl_errno($curl)) {
       echo 'Errno'.curl_error($curl);//捕抓异常
    }
    curl_close($curl); // 关闭CURL会话
    return $tmpInfo; // 返回数据
}
			$url = 'https://captcha.luosimao.com/api/site_verify';
			$data =array('api_key'=>'5bf45c5**********','response'=>$_POST['luotest_response']);
			$result=vpost($url,$data);
			$result=json_decode($result,true);
			$result=$result['res'];
			//echo $_POST['luotest_response'];
			//echo $result;exit;
			if($result!='success'){
				exit('1');
				//redirect('人机验证失败！', '?module=login');
			}

<script src="//captcha.luosimao.com/static/dist/api.js"></script>
<div class="l-captcha" data-site-key="94a8dfb08********"></div>

Luosimao人机验证接口文档captcha,人机验证,图形验证，图形验证码,人机识别新型人机验证方案

广西南宁市2017-06-28 10:00:28

js中网页前进和后退的代码

<a href="javascript:history.go(-1);">后退</a>
<a href="javascript:history.go(1);">前进</a>

查看文章跳到评论

广西南宁市 2017-06-27 18:57

#0

阅读 29万

微信支付错误两个问题的解决：curl出错，错误码:60

微信公众平台分享接口
jssdk.php
也修改

    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

否则也会报错：invalid signature错误

广西南宁市2017-06-27 18:58:09

require_once(__DIR__.'/db_connect.php');
<?php
require_once __DIR__ . '/file.php';

广西南宁市2017-06-27 18:59:06

errmsg config ok 调试模式下正常了
注释掉关闭调试模式

   //console.log('fdasfdas');
  wx.config({
    /*debug: FALSE,*/

广西南宁市2017-06-27 19:01:16

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wx2e642********", "ac59c********643");
$signPackage = $jssdk->GetSignPackage();
?>

  

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  /*
   * 注意：
   * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
   * 邮箱地址：weixin-open@qq.com
   * 邮件主题：【微信JS-SDK反馈】具体问题
   * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
   */
   //console.log('fdasfdas');
  wx.config({
    /*debug: FALSE,*/
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
	  'onMenuShareTimeline',
	  'onMenuShareAppMessage',
	  'onMenuShareQQ',
	  'onMenuShareWeibo',
	  'onMenuShareQZone'
    ]
  });
  wx.ready(function () {
    // 在这里调用 API
		wx.onMenuShareTimeline({
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareAppMessage({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareQQ({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareWeibo({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
		wx.onMenuShareQZone({
			desc: '地址：********商业广场3楼。电话：07********99', // 分享描述
			imgUrl: 'http://********.cn/logowx.jpg?1'
		});
  });
</script>

广西南宁市2017-06-27 19:02:09

    <div id="wx_pic" style="margin:0 auto;display:none;">
                    <img src="https://img.******.com/article/cover/201703/11/175600370063.png">
            </div>
<meta content="https://img.*****.com/article/cover/201706/27/090518161674.jpg" property="og:image">

查看文章跳到评论

广西南宁市 2017-06-23 11:52

#0

阅读 70.2万

VisualSVN Server自动发布配置部署svn代码到web目录服务器上线

windows svn 上传后自动部署到web目录下，svnweb

第一步

"D:\Program Files (x86)\VisualSVN Server\bin\svn.exe" upgrade "D:\yiyun_www\test" --quiet --username chiyj --password chiyj

在DOS下执行。

第二步修改文件

D:\yiyun_code\test\hooks下新建文件

post-commit.bat 内容如下

@echo off
SET REPOS=%1
SET USER=%2
SET SVN="D:\Program Files (x86)\VisualSVN Server\bin\svn.exe"
SET DIR="D:\yiyun_www\test"
(call %SVN% update %DIR% --username chiyj --password chiyj --non-interactive)

参考 http://www.cnblogs.com/xiezhengcai/archive/2013/11/27/3445457.html

svn 自动部署到web服务器设置问题
修改服务器上的钩子程序post-commit，将指定要发布的内容的文件夹导出(export)到tomcat目录下就行了

钩子程序post-commit是在执行commit操作后自动执行的，这样每次commit后都自动执行一次导出操作，保持tomcat文件夹内容就是所要发布的内容

---------------------------------------------------------------------------
补充：
例如你版本库的svn访问地址是10.30.11.12:8080/svn/project1，你想把这个版本库下的/trunk/web文件夹发布到tomcat上，发布到tomcat的文件夹地址是d:/tomcat/opt/web，svn的管理员用户名是abc，密码是12345，那么这个钩子程序应该就是：
svn export 10.30.11.12:8080/svn/project1/trunk/web d:/tomcat/opt/web --force --username abc --password 12345 --no-auth-cache

（本人对linux不熟悉，这行指令如有与linux语法不一致的地方，请参考原理自行修改）
说明：
1、--force 是说强制覆盖d:/tomcat/opt/web这个文件夹，避免这个文件夹不为空时报错
2、--username abc --password 12345 是自动将用户名和密码作为参数传送进去
3、--no-auth-cache 是说不缓存用户名和密码，这是出于安全考虑
4、svn export 是将所指定的url的内容导出到所指定的文件夹去。这里之所以不用update而用export，是因为update会导致生成一个隐藏.svn文件夹，这个文件夹是我们不需要的

当然了，如果整个发布的内容很多的话，建议还是用update，而不用export，因为update只更新有变化的部分，而export将重新导出所有内容，网络消耗比update大。

windows下,配置的svn然后上传了,怎把项目指定上传目录下
同步？楼主的问题描述不是很清楚啊，如果是上传整个项目到svn的版本库中，

查看文章跳到评论

广西南宁市 2017-06-23 11:51

#0

阅读 70.2万

VisualSVN Server自动发布配置部署svn代码到web目录服务器上线

瓦力 - 部署系统 wall.e

查看文章跳到评论

广西南宁市 2017-06-23 09:55

#0

阅读 2806.4万

常用html、demo代码

两边线条中间文字css垂直居中水平线中部文字效果布局两边等距离宽线

<strong class="line-thru">或</strong>
<style>.line-thru {
	display: block;
	font-size: .875em;
	margin-bottom: 1em;
	position: relative;
	text-align: center;
	width: 100%;
	z-index: 1;
}

.line-thru:before {
	width: 40px;
	height: 10px;
	background-color: #fff;
	content: '';
	margin: -5px 0 0 -20px;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: -1;
}

.line-thru:after {
	border-bottom: 1px solid #dfe0e6;
	content: '';
	display: block;
	position: absolute;
	top: 49%;
	width: 100%;
	z-index: -2;
}</style>

查看文章跳到评论

广西南宁市 2017-06-22 10:04

#0

阅读 216.1万

js 删除前confirm确认提示代码

查看文章跳到评论

广西南宁市 2017-06-21 17:00

#0

阅读 59.6万

微信小程序之购物车功能

最近做一个移动端的微信在线购物项目，记录下爬坑的点。
1、A页面跳到B页面，两个页面都有购物车，B页面清空/修改购物车产品后，返回A页面后，A页面的购物车仍是之前的内容，读取的缓存
解决：在A页面加入以下代码片段

if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}

2、h5的html属性存储，如data-id=5存储的值为number，但.dataset.id返回的是字符串

3、给元素绑定事件，删除节点后（事件也同步解绑），再重新增加新的节点，也没有事件了。
解决：
jquery给待重新渲染（删除后重新新增）的节点父级元素绑定事件，parent.on('click',child,function(){....})

4、NaN === NaN false

5、异步回调地狱，jquery用defferred对象的方法解决

6、.find('')[i].dataset.id 就能获取，错误示范为==> .find('')[i]..get(0).dataset.id

7、其他需巩固的知识点
页面reflow、render，IOS无法冒泡，history的pushState()、replaceState()方法，html模板引擎的进一步熟练使用

查看文章跳到评论

广西南宁市 2017-06-21 16:08

#0

阅读 79.7万

巧用边框设置一些效果

椭圆形

椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作。
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
<div id="oval"></div>                              
<style>
#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}</style>

广西南宁市2017-06-21 16:09:13

三角形

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

<div id="triangle"></div>                              
<style>#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:10:14

倒三角形

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

<div id="triangle"></div>
<style>#triangle {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:11:16

左三角形
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_left"></div>
<style>#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
} </style>

广西南宁市2017-06-21 16:11:33

#³

广西南宁市2017-06-21 16:12:21

右三角形

右三角形操作的是border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_right"></div>
<style>#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:13:52

菱形

制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。

<div id="diamond"></div>
<style>#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
} </style>

广西南宁市2017-06-21 16:15:07

梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

<div id="trapezium"></div>
<style>#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}</style>

广西南宁市2017-06-21 16:15:24

#⁷

广西南宁市2017-06-21 16:16:20

平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

<div id="parallelogram"></div>
<style>#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}</style>

广西南宁市2017-06-21 16:17:30

星形
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

<div id="star"></div>
<style>#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
  
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
  
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}</style>

广西南宁市2017-06-21 16:18:07

#¹⁰

广西南宁市2017-06-21 16:19:10

六角星形

CSS六角星形
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

<div id="star_six_points"></div>
<style>#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}
  
#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
} </style>

广西南宁市2017-06-21 16:20:02

五边形

CSS五边形
创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。

<div id="pentagon"></div>
<style>#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}
  
#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
} </style>

广西南宁市2017-06-21 16:26:17

六边形

六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。

<div id="hexagon"></div>
<style>#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}
  
#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}
  
#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}</style>

CSS八角形

八角形的制作方法也有多种方式，这里使用的是先制作两个相同的梯形，然后在两边分别放置一个三角形。

<div id="octagon"></div>
<style>#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}
  
#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}
  
#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}  </style>

CSS心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

<div id="heart"></div>
<style>#heart {
    position: relative;
}
  
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
  
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}  </style>

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

<div id="egg"></div>
<style>#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}  </style>

CSS无穷符号

无穷符号可以通过border属性和设置伪元素的角度来实现。

<div id="infinity"></div>
<style>#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
  
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
  
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}</style>

消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。

<div id="comment_bubble"></div>
<style>#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
  
#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}   </style>

吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。

<div id="pacman"></div>
<style>#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}</style>

查看文章跳到评论

广西南宁市 2017-06-21 16:07

#0

阅读 79.7万

巧用边框设置一些效果

使用CSS3制作各种形状的图形
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。
圆形

要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

<div id="circle"></div>                              
<style>
#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}</style>

查看文章跳到评论

广西南宁市 2017-06-21 16:04

#0

阅读 79.7万

巧用边框设置一些效果

如何设置父元素透明度不影响子元素的透明度

设置父元素opacity：0.5，子元素没有设置opacity，子元素会受到父元素的影响，也会有0.5的透明度。
即使设置子元素opacity为1，也是在父元素的opacity为0.5的基础上设置为1的，那么子元素的opacity还是0.5。

解决方法：为父元素设置background: rgba(0,0,0,0.5)，不会影响子元素的显示。

查看文章跳到评论

最新评论聚合