HTML、CSS、JS 样式 （未整理）

随手记，有错误的地方希望留言 ^.-.^

PHP 实现关闭浏览器窗口
echo "<script>window.close();</script>";

jquery 获取长度

var iccid = $("#iccid").val().length

var idnumber= $("#idnumber").val()

var numberTop = idnumber.substr(0,6)

alert(iccid)

js/jquery怎么移除已添加的属性

//两种方法设置disabled属性 
$('#areaSelect').attr("disabled",true); 
$('#areaSelect').attr("disabled","disabled"); 

以下三种方法是移除（去除）掉input的disabled属性的方法：
//三种方法移除disabled属性 
$('#areaSelect').attr("disabled",false); 
$('#areaSelect').removeAttr("disabled"); 
$('#areaSelect').attr("disabled","");

readonly="readonly"  //以只读类型展示给用户 可以用form提交接值   disabled="disabled"用form接不到值

把一个数组(一维或二维等)的内容转化为对应的字符串。相当于把print_r($array)显示出来的内容赋值给一个变量。
$data= array('hello',',','world','!');
$str = addslashes(var_export($data, TRUE));
echo $str."<br>"."<br>"."<br>"."<br>"."<br>"."<br>";
echo stripslashes($str);
addslashes()函数是用来把字符串进行安全格式化，方便把字符串存入数据库中。它会把 单引号、双引号、反斜杠、NULL 的前面加上反斜杠。
stripslashes()函数是用来把addslashes()格式化的字符串进行还原。就是去掉增加的反斜杠。

style="display: none;position:fixed;background:#F1F1F1;width: 120px;text-align:center;z-index:999;opacity: 0.6"

text-align:center; //内容居中
z-index:999; //遮罩层，排序
opacity: 0.6 //透明度
font-weight:bold //加粗

margin-left:auto; margin-right:auto; //div居中
style="font-family: microsoft yahei" //微软雅黑

overflow:hidden; //溢出隐藏

text-overflow : clip | ellipsis  //clip :不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）     ellipsis : 　当对象内文本溢出时显示省略标记（...）

a标签跳转新页面：<a href="http://www.cnblogs.com/54sen/" target="_blank">去瞅瞅</a>

<div style="width: 50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">div、span等标签内容不换行，溢出隐藏，省略号代替！！！

a需要定义块级 display:block  display:inline-block;

</div>

/*距左元素块距离（设置距左内边距）*/
margin-left: 0px;
/*距右元素块距离（设置距右元素块距） */
margin-right: 0px;
/*底元素块距离（设置距低（下）元素块距）*/
margin-bottom: 0px;
/*距头顶(上)元素块距离（设置距顶部元素块距离）*/
margin-top: 0px;

padding:10px 5px 15px 20px;
● 上内边距是 10px
● 右内边距是 5px
● 下内边距是 15px
● 左内边距是 20px

css让图片自适应大小
img {
max-width: 100%;
max-height: 100%;
}

DIV背景图自适应大小： style="background:url(图片地址);background-size:100%;
这样就会适应宽度了，background-size属性，有两个参数，background-size:宽 高

CSS3 提供了一些与当前viewpoint相关的元素，vw，vh，vim等

例如设置div高度是宽的百分之32 ：height: 32vw;

　　设置字体：font-size:4vw;

“viewpoint” = window size

min-height:50px 最小高度50px
max-height:50px 最大高度50px

-webkit-border-top-right-radius 右上角为圆角
-webkit-border-bottom-right-radius 右下角为圆角

button按钮背景透明  <input type="button" style="background:none;border:none;" id="upd_{{$val['u_id']}}">

/*图片透明*/
/* .div1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8}
.div2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7} */

/*图片变灰*/
.div1 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}
.div2 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}
.div3 a:hover img{filter:Gray;-webkit-filter: grayscale(100%);}

/*图片转BASE64串 、BASE64串转图片*/

$img_file = 'http://peoplespublic.network/public/assets/img/QR_code.jpg';
$img_info = getimagesize($img_file);
$img_src = "data:{$img_info['mime']};base64," . base64_encode(file_get_contents($img_file));//将base64串转换成图片

$img_base64 = base64_encode(file_get_contents($img_file));//图片转base64串

exit("<img src='{$img_src}' />");

jQuery 添加新内容有以下四个方法：

　　append() - 在被选元素的结尾插入内容

　　prepend() - 在被选元素的开头插入内容

　　after() - 在被选元素之后插入内容

　　before() - 在被选元素之前插入内容

　　$('选择器').html('替换的内容')

使input框变成只读且禁用模式
<input name="demo" type="text" disabled value="value" readonly="true" />

CSS控制字数多，隐藏多余字
text-overflow:ellipsis;word-break:keep-all;overflow:hidden; white-space:nowrap;

显示竖的滚动条
overflow-y:auto;height:220px;

表格不被撑开，换行
style="word-break:break-all"

input 限制输入类型 CSS 原创：http://www.jb51.net/web/78327.html
1.只能输入和粘贴汉字
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"><br/>
3.只能输入和粘贴数字
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" /><br/>
5.数字脚本
<input onkeyup="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"><br/>
6.只能输入数字和英文
<input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br/>
8.简易禁止输入汉字
<input style="ime-mode:disabled">输入法不转换，但可粘贴上<br/>
9.输入数字和小数点
<input onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" /><br/>
10.只能数字和"-",例如在输入时间的时候可以用到
<input onkeyup="value=value.replace(/[^\w&=]|_/ig,'')" onblur="value=value.replace(/[^\w&-]|_/ig,'')" />

/* 图片转base64、base64转图片 */

$img_file = 'http://peoplespublic.network/public/assets/img/QR_code.jpg';
$img_info = getimagesize($img_file);//图片尺寸
$img_src = "data:{$img_info['mime']};base64," . base64_encode(file_get_contents($img_file));//图片转换称base64串，然后再转换成图片
$img_base64 = base64_encode(file_get_contents($img_file));//图片转换称base64串

a标签href属性实例

href=’http://www.baidu.com’　　　　　　　　　　　　　　 点击后直接跳转至百度首页
href=’test.html’　　　　　　　　　　　　　　　　　　　　　跳转至文档当前目录下test.html文件
href=’javascript:history.back(-1);’ 　　　　    　　　　　　运行JS代码，返回上页
href=’<?php echo($_SERVER[“HTTP_REFERER”]); ?>’ 　 返回操作前页面

a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}

a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线

A标签去掉所有样式 <a style="text-decoration: none;" ></a>

 text-indent:-9999px;//内容缩进。  例子如下：

<input type="hidden" style="text-indent:-9999px;" class="ys1" id="cardid" maxLength="18" disabled="disabled">

jquery接单选按钮值

<font style="font-size: 17px">补&nbsp;押&nbsp;金 ：</font>
<input type="radio" name="yj" value="1" style="margin-left: 7%;">199元
<input type="radio" name="yj" value="2" style="margin-left: 8%;">399元

var yj=$('input:radio[name="yj"]:checked').val();

alert(yj)

jquery判断属性值是否是指定的

if( $("#test").css("display")=='none' ) {      }

if( $("#test1").is(":hidden"){      } )  // 判断:hidden选择器

jquery 返回上一页

<input type="button" name="back" value="重新填写" onclick="javascript:history.back(-1);"/>

history.back(-1):直接返回当前页的上一页，数据全部消息，是个新页面

history.go(-1):也是返回当前页的上一页，不过表单里的数据全部还在

if($page+1>$count_page){echo $count_page;