css中的px、em、rem的区别

这里说一下css中的px、em、rem的区别,在css中单位长度用的最多的是px、em、rem,这三个的区别是:

一、px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

二、em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

三、em是相对于其父元素来设置字体大小的,一般都是以<body>的“font-size”为基准。这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值。

总之:对于em和rem的区别一句话概括:

em相对于父元素,rem相对于根元素。

一、em

(一)子元素字体大小的em是相对于父元素字体大小

(二)元素的width/height/padding/margin用em的话是相对于该元素的font-size

上代码:

html:

<div>
    父元素div
    <p>
       子元素p
        <span>孙元素span</span>
    </p>
</div>
 css:
 div {
        font-size: 40px;
        width: 7.5em; /* 300px */
        height: 7.5em;
        border: solid 2px black;
    }
 p {
        font-size: 0.5em; /* 20px */
        width: 7.5em; /* 150px */
        height: 7.5em;
        border: solid 2px blue ;
        color: blue;
    }
span {
        font-size: 0.5em;
        width: 7em;
        height: 6em;
        border: solid 1px red;
        display: block;
        color: red;
    }
结果如图:

二、rem

rem是全部的长度都相对于根元素,根元素是谁?<html>元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。

上代码:

html:

<div>
    父元素div
    <p>
       子元素p
        <span>孙元素span</span>
    </p>
</div>
css:
   html {
        font-size: 10px;
    }
    div {
        font-size: 4rem; /* 40px */
        width: 20rem;  /* 200px */
        height: 20rem;
        border: solid 2px black;
    }
    p {
        font-size: 2rem; /* 20px */
        width: 10rem;
        height: 10rem;
        border: solid 1px blue;
        color:blue ;
    }
    span {
        font-size: 1.5rem;
        width: 7rem;
        height: 6rem;
        border: solid 2px red;
        display: block;
        color: red;
    }
结果如图:

总结一

在做项目的时候用什么单位长度取决于你的需求,我一般是这样的:

1、像素(px):用于元素的边框或定位。

2、em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。

总结二

1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

2、em 单位基于使用他们的元素的字体大小。

3、rem 单位基于 html 元素的字体大小。

4、em 单位可能受任何继承的父元素字体大小影响

5、rem 单位可以从浏览器字体设置中继承字体大小。

6、使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

7、在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

8、使用rem单位,除非你确定你需要 em 单位,包括对字体大小。

9、媒体查询中使用 rem 单位

10、不要在多列布局中使用 em 或 rem -改用 %。

11、不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

需要注意的是:

样式的reset中需先设置html字体的初始化大小为50px,这是为了防止js被禁用或者加载不到或者执行错误。

而做的兼容样式的reset中需先设置body字体的初始化大小为16px,这是为了让body内的字体大小不继承父级html元素的50px,而用系统默认的16px

mysql创建数据库并设置utf8格式

在创建mysql数据库的时候如何支持UTF-8编码?

1、用工具

CHARSET 选择 utf8
COLLATION 选择 utf8_general_ci

2、用SQL语句

GBK: CREATE DATABASE `test1` DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci;
UTF-8: CREATE DATABASE `test2` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

Contact form 7插件使用介绍和常见问题解答

参考链接:https://www.imhunk.com/contact-form-7/


相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf71"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p>[text* your-name placeholder "Your name*"]</p>
<p>[email* your-email placeholder "Email Address*"]</p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">imhunk</a></div>
</div>

相关CSS代码

.nodisplay{display:none!important;}

 

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf72"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onethird"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div>
<div class="outer"><div class="cf7part onethird"><div class="inner">[text your-subject placeholder "Your website*"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">imhunk</a></div>
</div>

相关CSS代码

.onethird{width:33.33333333333%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird{width:100%!important;}}

 

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf73"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p>[text your-subject placeholder "Your website*"]</p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p>[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">imhunk</a></div>
</div>

相关CSS代码

.onethird{width:33.33333333333%;float:left!important;}
.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onethird,.onehalf{width:100%!important;}}

 

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf74"><p class="cf7-title" style="font-size:27px;"><i class="fa fa-envelope-o"></i> We will answer your email shortly!</p><p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text* your-name placeholder "Your name*"]</div></div></div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[email* your-email placeholder "Email Address*"]</div></div></div></p>
<p><div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-phone placeholder "Your Phone*"]</div></div> </div>
<div class="outer"><div class="cf7part onehalf"><div class="inner">[text your-subject placeholder "Your website*"]</div></div></div></p>
<p>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">imhunk</a></div>
</div>

相关CSS代码

.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}
.hunkcf74 .wpcf7-text{border:2px solid #e0e0e0!important;height:50px!important;font-size:16px!important;border-radius:5px;}
.hunkcf74 textarea{border:2px solid #e0e0e0!important;font-size:16px!important;border-radius:5px;}
.hunkcf74 .submit{text-align:center;font-size:16px!important;}
.hunkcf74 .submit .wpcf7-submit{padding:15px 60px!important;background:#fff!important;color:#3B5998!important;border:2px solid #3B5998!important;border-radius:5px;font-weight:700!important;}
.hunkcf74 .submit .wpcf7-submit:hover{background:#3B5998!important;color:#fff!important;}

 

相关的代码如下:

放在CF7表单Form里面的代码

<div class="hunkcf76"><p class="cf7-title" style="font-size:25px;"><i class="fa fa-smile-o"></i> We will answer your email shortly!</p><p><span class="span6">Your Name *</span>[text* your-name]</p>
<p><span class="span6">Your Email *</span>[email* your-email]</p>
<p><span class="span6">Your Website *</span>[text your-subject]</p>
<p><span class="span6">Your Discription *</span>[textarea* your-message placeholder "Give us your need as specific as possible*"]</p>
<p class="submit">[submit "Send"]</p>
<div class="nodisplay">made by <a href="https://www.imhunk.com/">imhunk</a></div>
</div>

相关CSS代码

.hunkcf76 .wpcf7-text{border}
.nodisplay{display:none!important;}
.hunkcf76 input,.hunkcf76 textarea{border-width:0 0 1px!important;padding-left:0!important;}
.hunkcf76 .submit{text-align:center!important;}
.hunkcf76 .wpcf7-submit{padding:13px 40px!important;background:#303030!important;border:1px solid #303030!important;}
.hunkcf76 .wpcf7-submit:hover{background:#fff!important;color:#303030!important;}

更多的请参考链接:https://www.imhunk.com/contact-form-7/

jQuery复制文本到剪切板

少说废话,上代码:

// 复制文本内容到剪切板
function copyText(obj) {
  if (!obj) {
    return false;
  }
  var text;
  if (typeof(obj) == 'object') {
    if (obj.nodeType) { // DOM node
      obj = $(obj); // to jQuery object
    }
    try {
      text = obj.text();
      if (!text) { // Maybe <textarea />
        text = obj.val();
      }
    } catch (err) { // as JSON
      text = JSON.stringify(obj);
    }
  } else {
    text = obj;
  }
  //var $temp = $('<input>'); // Line feed is not supported
  var $temp = $('<textarea>');
  $('body').append($temp);
  $temp.val(text).select();
  var res = document.execCommand('copy');
  $temp.remove();
  return res;
}

调用示例:

<textarea id="taCode" rows="8" style="resize: none"></textarea>
<button type="button" class="btn btn-primary" onclick="copyText($('#taCode'))">复制 方法一</button>
<button id="btCopy" type="button" class="btn btn-primary">复制 方法二</button>

<script type="text/javascript">
$("#btCopy").click(function() {
  //copyText($("#taCode").text());
  copyText($("#taCode").val());
});
</script>

参考链接:https://github.com/by-syk/jquery-copy

如何翻译(汉化)wordpress主题和插件?

wordpress是一个非常完善的开源项目,无数拓展和优秀的主题。但是很多优秀的wordpress主题和wordpress插件大多都源于国外,

也就是说都是英文,并不适合国人使用。尤其是英语水平一般的普通用户,我们就需要翻译(汉化)和调整它的显示语言,使之更适

合国人。这个把英文翻译成中文的过程,我们称之为汉化。例如:The7汉化版,是国外模板,经汉化和修改后才更适合我们投入到响

应式网站建设中。wordpress主题和插件汉化都是异曲同工的道理,有几种方法这边说下:一种是用软件汉化;另一种是用插件汉化;

最后一种是直接修改源码翻译。但不论是哪种,自己亲自动手填写翻译文本,插件汉化是安装插件,扫描出要翻译的文本,最后在

wordpress后台直接翻译,生成.mo和.po文件。几种常见的汉化方法操作教程如下。

方法一、使用Poedit软件生成语言包进行汉化

关于Poedit软件(绿色破解版下载地址):http://pan.baidu.com/s/1qYipLW4 ,来源于网络。开发者可直接download。切记这个是要破解版的,不是破解版的没法翻译主题和插件,只能翻译已有的po文件包。

首选我们打开,看到界面如下:

我们可以看到第三项功能,翻译wordpress的主题或插件

点开第三个,我们开始翻译主题或者插件。记住是选中主题或者插件的目录。软件自动扫描。下面我们以汉化enfold版本为例:

我们选择zh_CN(中文),此时我们看到等待汉化的词条已经扫码出来了:

选中词条开始翻译,然后保存,保存完毕后来到文件那里,选择里面的编译为mo,平均1分钟翻译5个词条来计算,全部翻译完成。差不多4个小时左右。仅仅只是主题,还有插件。当然插件的汉化方法也一样如上。

方法二、使用Codestyling Localization(非常非常好用)

Codestyling Localizationhttp://www.code-styling.de/english/development/wordpress-plugin-codestyling-localization-en

我们在后台找到这个插件

我们点开之后,看到插件,添加语言即可

扫码即可

同理,一样一条一条的翻译即可。

方法三、使用WPML汉化主题和插件

在WordPress中获取数据库字段内容和添加主题设置菜单

get_option() 函数使用技巧 get_option()这个函数,实际上我们在整合后台功能的时候经常会用到的一个函数,主要用来从 WordPress 博客数据库 option 表中取得我们想要的字段内容的一个函数,在目前大部分的主题中,只要是主题集成了后台控制页面,也大都用到了这个函数,虽然 WP 给了我们很多方法去临时存储我们对主题的设置,但是用比较稳定的数据库去存储主题设置还是大部分主题作者的首选。

get_option() 函数的解释、用法网上还是有很多中文文献的,包括官方文档该函数也有中文版的解释,因为使用起来简单,思路比较清晰所以这里就不过多解释。
官方API :get_option
直接备忘用法

使用技巧
通常我们取设置的时候,会加一个判断,因为我们不知道主题是不是第一次在系统中安装,

if (!get_option('xiangzi')){//判断是否存在
 $default_xiangzi = array (//先设置一个默认值
 'title'=>'博客',
 'name'=>'翔子',
 'url'=>'pangbu.com');
 update_option('xiangzi', $default_xiangzi);
 //设置option的默认值
}
$xiangzi = get_option('xiangzi');//获取设置

很凑巧,出于某种原因 WP 官方为我们增设了get_option 函数的第二个参数
所以我们可以这样

$default_xiangzi = array (//先设置一个默认值
 'title'=>'博客',
 'name'=>'翔子',
 'url'=>'pangbu.com')
$xiangzi = get_option('xiangzi',$default_xiangzi);
//这样是不是很简单?

add_theme_page()函数-添加你的主题设置菜单
也许你会觉得,Wordpress 官方默认主题,是一个很蛋疼的主题,样式丑陋、并且功能简陋,有一种只有陋室铭这种励志类的文章才能鼓励你用下去的感觉,也许你会觉得这个主题除了给那些不会安装主题的菜菜菜菜菜鸟用之外几乎毫无用处,那你就错了。官方默认主题的最大用处就是有很大的研究价值,至少我目前的 WP 主题知识大部分都是通过研究默认主题得来的,今天研究的是add_theme_page()函数。

描述
add_theme_page()函数,在 WordPress 后台添加页面。在这里我们一般都是为了添加设置页面才用到该函数,当然你要是闲的蛋疼的话,你可以添加诸如个人说明的页面在后台。

使用

<?php
add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
//page_titile-title标签的内容
//menu_title-显示在后台左边菜单的标题
//capability-访问这个页面需要的权限
//menu_slug-别名,需要独一无二哦
//function-执行的函数
?>

$page_title, $menu_title, $capability, $menu_slug, $function 这几个参数比较常用。

因为add_theme_page()函数使用起来实在是太简单了,所以我们还是直接上代码吧。

实例

function xz_theme_options_add_page() {
 $theme_page = add_theme_page(
 '主题设置', //页面Titlee
 '主题设置', // 在后台菜单中显示的名字
 'edit_theme_options',   // 选项放置的位置
 'theme_options',    // 别名,也就是get传送的参数
 'xz_theme_op_page' //调用显示内容调用的函数
 );
}
function xz_theme_op_page (){//内容显示函数
 echo "我是主题编辑页面";
}
add_action( 'admin_menu', 'xz_theme_options_add_page' );

动态生成的DOM做点击事件无效

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

<section>
测试动态生成的DOM点击事件
<br />
</section> 
<script src="jquery-1.11.2.min.js"></script>
<script> 
$(function () {
$.ajax({
type: "post",
url: "Handler1.ashx",
data: {},
success: function (data) {
$("section").append(data); //把获取的标签动态添加到页面中
}
})
});
$("#test").click(function () {
alert("Smile");
})
</script>

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low


里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

这样也可以完成点击事件。

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接。

//下载
$("#uploadInfo").click(function () {
var uids = "";
$(":checkbox[name='A']:checked").each(function (i, item) {
uids += $(item).attr("data-id") + ",";
})
if (uids === "") {
NewAlertBox("warning","请最少选择一项",2000);
} else {
var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
$(this).attr("href", urls); //执行完了点击事件,把Href赋值,然后自动跳转href链接
}

});

移动端-仿京东秒杀倒计时

京东秒杀倒计时

HTML代码:

 <div class="jd_secKill_left">
    <span class="ms_icon"></span>
    <h4 class="ms_name fl">掌上秒杀</h4>
    <div class="ms_time fl">
        <span class="num fl">0</span>
        <span class="num fl">0</span>
         <span class="str fl">:</span>
         <span class="num fl">0</span>
        <span class="num fl">0</span>
        <span class="str fl">:</span>
        <span class="num fl">0</span>
        <span class="num fl">0</span>
    </div>
 </div>
<div class="jd_secKill_right fr">
   <a href="">更多></a>
</div>

css代码:

.jd_secKill{
}
.jd_secKill .jd_secKill_left{
    float: left;
}
.jd_secKill .jd_secKill_left .ms_icon{
    background: url("../images/seckill-icon.png") no-repeat;
    background-size: 16px 20px;
    width: 16px;
    height: 20px;
    display: block;
    float: left;
    margin-left: 8px;
    margin-top: 6px;
}
.jd_secKill .jd_secKill_left .ms_name{
    font-size: 15px;
    color: #d8505c;
    font-weight: inherit;
    margin-left: 8px;
    line-height:30px;
}
.jd_secKill .jd_secKill_left .ms_time{
    margin-top: 6px;
    margin-left: 8px;
}
.jd_secKill .jd_secKill_left .ms_time span{
    margin-right: 3px;
    display: block;
    line-height:20px;
}
.jd_secKill .jd_secKill_left .ms_time .num{
    width: 15px;
    height: 20px;
    text-align: center;
    background: #333;
    color:#fff;
}
.jd_secKill .jd_secKill_left .ms_time .str{
    width: 4px;
    height: 15px;
    text-align: center;
}
.jd_secKill_right a{
    line-height:32px;
    margin-right: 10px;
}

js代码:

/*秒杀倒计时*/
var secondKill = function() {
  /*复盒子*/
  var parentTime = document.getElementsByClassName('ms_time')[0];
   /*span时间*/
  var timeList = parentTime.getElementsByClassName('num');
  console.log(timeList.length);
  var times = 7 * 60 * 60;
  var timer;
  timer = setInterval(function () {
  times--;
  var h = Math.floor(times / (60 * 60));
  var m = Math.floor(times / 60 % 60);
  var s = times % 60;

  //console.log(h + '-' + m + "-" + s);

  timeList[0].innerHTML = h > 10 ? Math.floor(h / 10) : 0;
  timeList[1].innerHTML = h % 10;

  timeList[2].innerHTML = m > 10 ? Math.floor(m / 10) : 0;
  timeList[3].innerHTML = m % 10;

  timeList[4].innerHTML = s > 10 ? Math.floor(s / 10) : 0;
  timeList[5].innerHTML = s % 10;
  if (times <= 0) {
      clearInterval(timer);
  }
 }, 1000);
}
secondKill();