分类目录归档：DIV+CSS

层叠样式表布局

移动端css常用等分(平分宽度)的方法

淘宝导航栏
在移动端中我们经常会遇到如上图淘宝的底部导航的情况，平分某一宽度

<header class="footer red">
    <ul class="nav">
        <li>简介</li>
        <li>订单</li>
        <li>账户</li>
    </ul>
</header>
<footer class="footer blue">
    <ul class="nav">
        <li>首页</li>
        <li>微淘</li>
        <li>社区</li>
        <li>购物车</li>
        <li>我的淘宝</li>
    </ul>
</footer>

（如果没有特别说明，网页代码不变）
方法一：，一般通常的做法是利用float，然后子元素的每一个宽度等于总宽度除以子元素的个数。以下是css代码：

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3{width: 100%;list-style: none;padding:0px;margin:0px;}
.nav li {float:left; width:20%;}
.nav_3 li {float:left; width:33.333%;}

效果展示：
虽然上面的方式可以解决问题，但是如果这个时候项目需求变更为把三个改为四个或者五个改为四个，那么你这边不仅需要改动css还要改动网页内容。
方法二：flex，用法非常简单，父容器里面定义display: flex;然后子元素定义flex: 1;就可以了，但是由于flex这个属性改版多次，所以兼容性。。。

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3{list-style: none;padding:0px;margin:0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.nav li,.nav_3 li{list-style: none;padding:0px;margin:0px;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;        /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;
}

方法三：display: table-cell;设置父容器的display: table;table-layout: fixed;width: 100%;，然后设置子元素为display: table-cell;就可以了。优点就是兼容性很好啊。css代码如下：

.red{background:red;height:18px;color: #fff;}
.blue{background: blue;height:18px;color: #fff;}
/*以上代码为了区分两个导航*/
.nav,.nav_3 {
  display: table;
  table-layout: fixed;
  width: 100%; 
  list-style: none;
  margin:0px;
  padding:0px;
}
.nav li,.nav_3 li {
    display: table-cell; }

CSS选取第几个标签元素：nth-child(n)、first-child、last-child

前言：今天码代码时候遇到的需求要选取前两个标签元素，查了资料记录下来~

nth-child（n）、first-child、last-child用法
注：nth-child(n)选择器匹配父元素中的第n个子元素。
n可以是一个数字，一个关键字，或者一个公式。

nth-child（n）用法：
1、nth-child(3)
表示选择列表中的第3个标签，代码如下：

li:nth-child(3){background:#fff}
1
2、nth-child(2n)
表示选择列表中的偶数标签，即选择第2、第4、第6…… 标签，代码如下：

li:nth-child(2n){background:#fff}
1
3、nth-child(2n-1)
表示选择列表中的奇数标签，即选择第1、第3、第5、第7……标签，代码如下：

li:nth-child(2n-1){background:#fff}
1
4、nth-child(n+3)
表示选择列表中的标签从第3个开始到最后，代码如下：

li:nth-child(n+3){background:#fff}
1
5、nth-child(-n+3)
表示选择列表中的标签从0到3，即小于3的标签，代码如下：

li:nth-child(-n+3){background:#fff}
1
6、nth-last-child(3)
表示选择列表中的倒数第3个标签，代码如下：

li:nth-last-child(3){background:#fff}
1
first-child用法：
1、first-child
first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#fff}
1
last-child用法：
1、last-child
last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#fff}

ul li 默认样式写法

ul li:first-child{margin-left:0;} 第一个
ul li:last-child{margin-left:0;} 最后一个
ul li:nth-child(5){margin-left:0;} 指定第几个
ul li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
ul li:nth-child(odd){background:orange;} 基数
ul li:nth-child(even){background:orange;} 偶数

如何使输入框input只能输入数字

即：添加 onkeyup=”value=value.replace(/[^\d]/g,”)”

这里使用的正则表达式较为简单。输入框后面添加个“能输入数字”就更好啦

如何避免CSS :before、:after 中文乱码

问题：

在进行页面开发时，经常会使用:before, :after伪元素创建一些小tips，但是在:before或:after的content属性使用中文的话，会导致某些浏览器上出现乱码。

解决方案：

确保HTML、CSS文件使用UTF-8格式，并且HTML文档也使用UFT-8的字符编码格式，即HTML文档的meta信息包含 <metacharset=”UTF-8″> 。
避免在CSS的:before, :after中使用中文，如果一定要使用，可以使用中文对应的Unicode。可以使用使用站长工具，或者是JavaScript的原生方法escape将中文转为Unicode。需要注意的是Unicode在CSS中的书写方式，例如“限量抢”对应的Unicode是’\u9650\u91cf\u62a2’，而在CSS中要写成 span:before { content: ‘\9650\91cf\62a2’ } 。

注意：转Unicode后，要在css用的时候把前面的u去掉，css样式才能识别出来@

百度编辑器ueditor插入表格没有边框,没有颜色的解决方法

百度编辑器ueditor插入一个表格后，在编辑过程中有表格，但是保存后，在前台网页中没有边框，也没有颜色。找了很久的源码，终于解决了。

1. 打开编辑器根目录下面的ueditor.all.js文件，找到：

for (var c = 0; c < colsNum; c++) {

html.push(‘<td width=”‘ + tdWidth + ‘” vAlign=”‘ + opt.tdvalign + ‘” >’ + (browser.ie ? domUtils.fillChar : ‘<br/>’) + ‘</td>’)

}

改成：

for (var c = 0; c < colsNum; c++) {

html.push(‘<td style=”border:1px solid #ccc;” width=”‘ + tdWidth + ‘” vAlign=”‘ + opt.tdvalign + ‘” >’ + (browser.ie ? domUtils.fillChar : ‘<br/>’) + ‘</td>’)

}

不同的版本的代码可能略微有点不同。

2. 在ueditor.all.js文件中找到：table.setAttribute(“data-sort”, cmd == “enablesort” ? “sortEnabled” : “sortDisabled”); 在这句代码下面加一行：table.setAttribute(“style”, “border-collapse:collapse;”);

3. 在ueditor.all.js文件中找到：return ‘<table><tbody>’ + html.join(”) + ‘</tbody></table>’ 改为：return ‘<table style=”border-collapse:collapse;”><tbody>’ + html.join(”) + ‘</tbody></table>’ 。

此时，再刷新后台，插入一个表格，就有边框了。因为改的是ueditor.all.js，所以调用ueditor.all.js才有效，要是调用的ueditor.all.min.js，那么就需要更改ueditor.all.min.js文件了。

这三处代码弄清楚后，要是你还想扩展一些新的样式效果也是可以直接在这几个地方修改就好了。

一款提高浏览国外网站的Chrome/FireFox插件-gooreplacer

fonts.googleapis.com————–>fonts.lug.ustc.edu.cn
ajax.googleapis.com—————>ajax.lug.ustc.edu.cn
themes.googleusercontent.com——>google-themes.lug.ustc.edu.cn
fonts.gstatic.com—————–>fonts-gstatic.lug.ustc.edu.cn

由于GFW的贡献，Google的大部分服务都在国内享受不到了，因此Google在全球范围内提供一些js库、css库的CDN服务也就残废了，所以这款插件就是将这些库替换成国内科大的替换库。

该款插件支持Chrome/FireFox这两款浏览器。

下载地址见：官网 http://liujiacai.net/gooreplacer/

教你不开会员下载千图网千库网的图片素材

小编工作经常要用到P图技能，不算是专业的，所以特别以来素材，可是素材虽好很多都是要收费的或者要开会员的，下面给大家分享几个免费的图片素材网站。

1.优界网——UI设计师必备网站，超过1000万张灵感图，素材，背景图，样机免费下载

最大的特色就是免费，VIP天天签到就可以一直免费下去，网址：http://97ui.com/?r=556438

QQ截图20170920115734.png

2.阿里巴巴矢量图标库——阿里巴巴旗下的图标素材网站

缺点是刚上线，图标素材不是很多，不清楚是否可以商用，网址：http://www.iconfont.cn/

QQ截图20170920120859.png

还有素材中国，千图网、千库网可以花几元钱在某宝上买一个第三方下载平台的账号非常方便。

轻轻松松js搞定多条件组合筛选-THINKPHP PHP版本

轻轻松松js搞定多条件组合筛选ThinkPHP

下载

轻轻松松js搞定多条件组合筛选

获取input输入值回车按钮事件不提交表单

网站开发中经常会用到鼠标或键盘事件，实现表单提交，获取用户输入值等功能，由于浏览器的不同，对回车的默认功能不尽相同。

在form表单中，往往需要输入多个input值，如果某个input值为空则不能提交表单（必填项），按下回车会自动提交表单，有些时候并不需要提交表单，只是验证输入值是否正确。

做这些开发是为了提高用户体验，用户习惯按TAB健进行input之间的切换，按回车提交表单。笔者也是慢慢摸索着不断学习，经实战总结出来。

onclick点击获取input值方法

JS部分

<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 var result,input
 function record(){
 result = document.getElementById("result").innerHTML;
 input = document.getElementById("email").value;//email输入值
 document.getElementById("result").innerHTML=input;//获取input值
}
</script>

HTML部分

<form>
 <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱"/>
 <p><input type="button" id="zhucenext" class="loginBtn" onclick="record()" value="点击获取input值"/></p>
 <p id="result"></p><!--获取的值在这里显示-->
</form>

直接点击<input id=”zhucenext”/>按钮能自动获取里面值，但是有时候我们会习惯用回车，请继续看如何实现增加键盘的回车键功能。

回车激活按钮事件获取input值

这里需要注意的是，一般input放在某个表单form表单内，在某些浏览器内，直接回车会自动提交表单。比如增加验证码之后，回车不执行提交表单。

回车键的键值是13，回车事件通用代码如下：

<input type="text" id="" name="" onkeypress="
if(event.keyCode==13){
zhucenext();//执行id为zhucenext的click事件，多个事件之间用英文的";"隔开
return false;//不执行表单提交
}"/>

点击事件和回车事件完整的应用实例

<!doctype html>
<html>
<head>
<script src="jquery.min.js" language="javascript" type="text/javascript"></script>//引用公共JS
<script type="text/javascript">
 function record(){
 var input=document.getElementById("email").value;//通过id获取需要验证的(input)表单元素的值
 if(input==""){//如果获取的值为空
  alert("请输入邮箱名");//弹出提示
 return false;//返回false
 }
 var input2=document.getElementById("vdcode").value;//第二个需要验证的(input2)元素值，以此类推
 if(input2==""){
  alert("请输入验证码");
  return false;
 }
 //判断为空值返回，不为空继续执行下面
 var result=document.getElementById("result").innerHTML;
 document.getElementById("result").innerHTML=input;//设置只获取input（邮箱）的值
 //执行其他命令直接写
 menuShow('zhuceboxnonne');
}
</script>
</head>
<body>
<form method="post" action="new.php" name="form">
 <input type="text" class="intxt" id="email" name="email" placeholder="输入邮箱" onkeypress="if(event.keyCode==13){record();return false;}"/></p><!--验证邮箱是否为空，是否通过回车都不提交表单-->
 <input type="text" class="intxt" id="vdcode" name="vdcode" placeholder="验证码" onkeypress="if(event.keyCode==13){record();return false;}"/><!--验证验证码是否为空，通过后回车执行表单提交，否则返回-->
 <img id="vdimgck" onclick="this.src=this.src+'?'" alt="看不清？点击更换" src="../include/vdimgck.php"/>
 <button type="submit" id="login" class="loginBtn" onclick="record()">提交表单</button></p><!--点击button提交表单，不能return false，否则无法提交表单-->
</form>
<p id="result"></p><!--获取的结果-->
</body>
</html>

这样就能实现一个回车执行多个input按钮事件，多个onkeypress需要用“;”隔开。

一个内容管理系统CMS的技术分享中心-ShuoHi CMS

分享，收集一切有意思 ShuoHi CMS