爱周末 » web开发 http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 -webkit- -moz-浏览器私有属性前缀 http://zhoumo123.cn/web/css/3460.html http://zhoumo123.cn/web/css/3460.html#comments Mon, 04 Jan 2016 02:04:45 +0000 http://zhoumo123.cn/?p=3460 阅读全文 ]]> CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

以下是几种常用前缀

-webkit-
-moz-
-ms-
-o-
-khtml-（现在基本都没有用了，被-webkit-取代）
举例来说，一个CSS3圆角的代码是：

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
CSS3前缀+标准代码的顺序

既然CSS3代码中（暂时）需要写上这么多前缀，那么他们的顺序是如何的呢？

结论:是先写私有的CSS3属性，再写标准的CSS3属性。

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

]]> http://zhoumo123.cn/web/css/3460.html/feed 0 jquery获取div元素属性内容attr的用法 http://zhoumo123.cn/web/jquery/3448.html http://zhoumo123.cn/web/jquery/3448.html#comments Thu, 24 Dec 2015 01:36:01 +0000 http://zhoumo123.cn/?p=3448 jQuery如何获取元素的属性值的内容呢，一起看下例子：

下面的例子获取div中 style 属性的内容。


<script type="text/javascript">
$(function(){ 
    $(".show").each(function(i){
        var v = $(this).attr("style");
        alert(v);
    });
});
</script>
<div class="show" style=" font-size:14px; color:#03C;">test1</div>
<div class="show" style=" font-size:16px; color:#009;">test2</div>
<div class="show" style=" font-size:18px; color:#000;">test3</div>

 

]]> http://zhoumo123.cn/web/jquery/3448.html/feed 0 css中rem与px，pt转换 http://zhoumo123.cn/web/css/3410.html http://zhoumo123.cn/web/css/3410.html#comments Thu, 03 Dec 2015 14:45:45 +0000 http://zhoumo123.cn/?p=3410 阅读全文 ]]> rem是css3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。

例如：当前根元素html的font-size为100%，那么根据下边的参照表可以看出，其px值为16，那么我们如果要转换一个块元素的px为rem，就可以有以下写法

注：1000为需要转换元素块的宽度

1000除以16值为62.5rem

 

css中rem与px，pt转换

 

http://blog.csdn.net/xudanna/article/details/16946293

]]> http://zhoumo123.cn/web/css/3410.html/feed 0 html5使用DeviceMotionEvent实现摇一摇 http://zhoumo123.cn/web/html5/3394.html http://zhoumo123.cn/web/html5/3394.html#comments Tue, 01 Dec 2015 05:45:36 +0000 http://zhoumo123.cn/?p=3394 阅读全文 ]]> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<title> html5使用DeviceMotionEvent实现摇一摇 </title>
<style type=”text/css”>
.center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }
.normal{background:#000000;}
.normal .txt{color:#FFFFFF;}
.doing{background:#FF0000;}
.doing .txt{color:#FFFF00;}
</style>
</head>

<body id=”mybody” class=”normal”>
<div id=”txt” class=”txt center”>请执行摇一摇</div>
</body>

<script type=”text/javascript”>
var doing = 0; // 判断是否在动画显示中
var speed = 23; // 定义摇动的速度数值
var lastx = 0;
var lasty = 0;
var lastz = 0;

function handleMotionEvent(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;

if(doing==0){
if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){
doing = 1;
show();
}
}

lastx = x;
lasty = y;
lastz = z;
}

function show(){
document.getElementById(‘mybody’).className = ‘doing';
document.getElementById(‘txt’).innerHTML = ‘执行了摇一摇';
setTimeout(function(){
doing=0;
document.getElementById(‘mybody’).className=’normal';
document.getElementById(‘txt’).innerHTML = ‘请执行摇一摇';
},3000);
}

window.addEventListener(“devicemotion”, handleMotionEvent, true);
</script>

</html>

 

http://blog.csdn.net/fdipzone/article/details/50103027

]]> http://zhoumo123.cn/web/html5/3394.html/feed 0 jQuery获取一组单选按钮的值 http://zhoumo123.cn/web/jquery/3359.html http://zhoumo123.cn/web/jquery/3359.html#comments Wed, 28 Oct 2015 06:24:46 +0000 http://zhoumo123.cn/?p=3359 var sexVal=$(“input:radio[name=’sex’][checked]”).val();
alert(sexVal);

]]> http://zhoumo123.cn/web/jquery/3359.html/feed 0 css 控制文本强制换行word-wrap强制换行 http://zhoumo123.cn/web/css/3338.html http://zhoumo123.cn/web/css/3338.html#comments Mon, 28 Sep 2015 11:45:19 +0000 http://zhoumo123.cn/?p=3338 阅读全文 ]]> css word-wrap强制文本换行方法， 使用word-wrap属性。在默认情况下，如果文本的内容超过某个div块的宽度的话，就会发生自动换行，因为div块的white-space属性的默认值是normal。但是也有两种情况：
1、如果div块里是一串的文字内容，那么到了div块的width限制时，会自动换行。
2、如果div块里一串没有空格的字母或者数字的时候是那就不换行了，而是直接溢出div块。这时就要考虑css文字强制换行了。
那CSS样式怎么控制文字的强制换行？
这时候我们需要用到word-wrap属性，还有一个属性word-break也能够解决换行问题，但是它的浏览器兼容性不好，并且还有可能导致其他问题，所以这里不建议使用。
word-wrap的break-word属性值可以导致换行，一般说来如果一个单词比较长的话，行末的空间不足以容纳这个单词就会产生换行，而不是将一个单词截断，word-break的break-all属性值可以截断一个单词。例如:
<style type=”text/css”>
.first
{
width:120px;
height:60px;
border:1px solid blue;
word-wrap:break-word
}
.second
{
width:120px;
height:60px;
border:1px solid red;
word-break:break-all;
}
</style>

 

]]> http://zhoumo123.cn/web/css/3338.html/feed 0 css命名规范汇总css规范 http://zhoumo123.cn/web/css/3314.html http://zhoumo123.cn/web/css/3314.html#comments Fri, 18 Sep 2015 06:26:04 +0000 http://zhoumo123.cn/?p=3314 阅读全文 ]]> 命名规范

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

/* 不推荐: 无意义 */ #yee-1901 {}
/* 不推荐: 与样式相关 */ .button-green {}.clear {}
/* 推荐: 特殊性 */ #gallery {}#login {}.video {}
/* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

/* 不推荐 */ #navigation {}.atr {}
/* 推荐 */ #nav {}.author {}
类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

/* 不推荐 */ul#example {}div.error {}
/* 推荐 */#example {}.error {}

命名时需要注意的点：

规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
不允许通过1、2、3等序号进行命名
避免class与id重名
id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
class用于标识某一个类型的对象，命名必须言简意赅。
尽可能提高代码模块的复用，样式尽量用组合的方式
规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。

1、常用id的命名：

(1) 页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

(2) 导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3) 功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

2、常用class的命名：

(1) 颜色:使用颜色的名称或者16进制代码，如

.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2) 字体大小,直接使用”font+字体大小”作为名称，如

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) 对齐样式,使用对齐目标的英文名称，如

.left { float:left; }
.bottom { float:bottom; }

(4) 标题栏样式,使用”类别+功能”的方式命名，如

.barnews { }
.barproduct { }

]]> http://zhoumo123.cn/web/css/3314.html/feed 0 CSS Hack的使用编码规范 http://zhoumo123.cn/web/css/3311.html http://zhoumo123.cn/web/css/3311.html#comments Fri, 18 Sep 2015 06:21:57 +0000 http://zhoumo123.cn/?p=3311 请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！

推荐使用下面的：

css-hack1

 

 

]]> http://zhoumo123.cn/web/css/3311.html/feed 0 css文本超出显示省略号text-overflow语法 http://zhoumo123.cn/web/css/3252.html http://zhoumo123.cn/web/css/3252.html#comments Tue, 01 Sep 2015 01:53:35 +0000 http://zhoumo123.cn/?p=3252 阅读全文 ]]> CSS如何使超出文本显示省略号呢，看下csstext-overflow的用法：

语法：
text-overflow ： clip | ellipsis

取值：
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）

说明：
设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

 

]]> http://zhoumo123.cn/web/css/3252.html/feed 0 JavaScript去除字符串前后空格的trim方法 http://zhoumo123.cn/web/jquery/3160.html http://zhoumo123.cn/web/jquery/3160.html#comments Tue, 14 Jul 2015 06:33:29 +0000 http://zhoumo123.cn/?p=3160 相比vbscript，javascript在字符串处理方面已经很强大了，但是偏偏缺少去除字符串前后空格的trim方法。

//clear the right and left space
function trim(s){
return trimRight(trimLeft(s));
}

//clear the left space
function trimLeft(s){
if(s == null) {
return "";
}
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j &lt; i &amp;&amp; whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}

//clear the right space
function trimRight(s){
if(s == null) return "";
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length - 1;
while (i &gt;= 0 &amp;&amp; whitespace.indexOf(str.charAt(i)) != -1){
i--;
}
str = str.substring(0, i+1);
}
return str;
}

http://alany.blog.51cto.com/6125308/1658938

]]> http://zhoumo123.cn/web/jquery/3160.html/feed 0