本文包揽 CSS 的所有关键点，并且引入了最新的 CSS3 版本。这个先进的技术提供超级多的新标签和属性，使得 Web 设计构建创新更简单，帮助开发者创建具有新趋势，带有漂亮布局的 Web 页面。随着科技一天一天的进步，Web 设计现如今已是简单的任务，这些先进的科技可以帮助开发者更好的创建网站和模板。 今天，这里要分享 10 个最好的，可以轻松学会 CSS3 的资源，主要是学习 CSS3 最新的标签和元素。这些资源将会帮助大家一步一步学会 CSS3 的所有基础内容和新特性。如果你有好的资源，与大家一起分享吧～ 1) Introduction to CSS3 2) CSS3 info CSS3 info 是和读者一起分享 CSS3 的经验，希望能覆盖所有 CSS3 的特性。 3) CSS-access CSS-access 包括所有 CSS 和 CSS3 属性和样式元素。样式表可以被精准的控制，标签外的字符间距，文本对齐，页面对象的位置，音频和语音输出，字体特征等等。 4) CSS3 Attribute Selectors CSS attribute selectors 允许大家精确的指出元素属性值和元素依赖的样式。CSS3 引入了 3 个 selectors，可以匹配字符串到一个属性值。 5) Codecademy – HTML/CSS3 Codecademy 帮助大家学习使用 HTML 和 CSS 来创建页面，并且装饰页面。同时也可以学习 HTML5 和 CSS3。 6) w3 CSS 7) The CodePlayer -CSS3 code player 是开发者可以轻松学会 HTML，CSS3，JavaScript 和先进 Web 技术的地方。 8) w3schools – CSS3 这是另一个最流行的网站，适用于初学者，高级 web 设计师和开发者，非常有帮助的网站！ 9) Codeschool – CSS3 学习最新版本的 HTML 和 CSS，查看最新的 HTML5 […]
View Details<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function numToCny(num) { var str1 = '零壹贰叁肆伍陆柒捌玖'; //0-9所对应的汉字 var str2 = '万仟佰拾亿仟佰拾万仟佰拾元角分'; //数字位所对应的汉字 var str3; //从原num值中取出的值 var str4; //数字的字符串形式 var str5 = "; //人民币大写金额形式 var i; //循环变量 var j; //num的值乘以100的字符串长度 var ch1; //数字的汉语读法 var ch2; //数字位的汉字读法 var nzero = 0; //用来计算连续的零值是几个 num = Math.abs(num).toFixed(2); //将num取绝对值并四舍五入取2位小数 str4 = (num * 100).toFixed(0).toString(); //将num乘100并转换成字符串形式 j = str4.length; //找出最高位 if (j > 15) { return '溢出'; } str2 = str2.substr(15 – […]
View Details直接上代码： $(".photoImage").click(function(){ var imageId = $(this).attr("id"); console.log(imageId); });
View Details一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： .代码如下: $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： .代码如下: $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm :input')//选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素 二、改变结果集 如果选中多个元素，jQuery提供过滤器，可以缩小结果集： .代码如下: $('div').has('p'); //选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： .代码如下: $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后，就可以对它进行某种操作。 jQuery允许将所有操作连接在一起，以链条的形式写出来，比如： .代码如下: $('div').find('h3').eq(2).html('Hello'); 我们可以这样拆封开来，就是下面这样： .代码如下: $('div')//找到div元素 .find('h3')//选择其中的h3元素 .eq(2)//选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。 jQuery还提供了 .end() 方法，使得结果集可以后退一步： .代码如下: $('div') .find('h3') .eq(2) .html('Hello') .end()//退回到选中所有的h3元素的那一步 .eq(0)//选中第一个h3元素 .html('World'); //将它的内容改为World 四、元素的操作：取值和赋值 操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。 jQuery使用同一个函数，来完成取值 (getter) 和赋值 (setter)。 到底是取值还是赋值，由函数的参数决定。 $('h1').html(); //html()没有参数，表示取出h1的值 $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值 常见的取值和赋值函数如下： .代码如下: .html() 取出或设置html内容 .text() 取出或设置text内容 .attr() 取出或设置某个属性的值 […]
View Details在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处： 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, say : function() { […]
View Details/* * 智能机浏览器版本信息: * */ var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部 }; } […]
View Details基于移动端的微信和wap网站开发，日益火起来，下面贴一段智能判断分流的代码，希望对菜鸟有所帮助！ <?php function isMobile(){ $useragent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : "; $useragent_commentsblock = preg_match('|(.*?)|',$useragent,$matches) --> 0 ? $matches[0] : "; } function CheckSubstrs($substrs, $text) { foreach ( $substrs as $substr ) { if (false !== strpos($text,$substr)) { return true; } return false; } $mobile_os_list = array ( 'Google Wireless Transcoder', 'Windows CE', 'WindowsCE', 'Symbian', 'Android', 'armv6l', 'armv5', 'Mobile', 'CentOS', 'mowser', 'AvantGo', 'Opera Mobi', 'J2ME/MIDP', 'Smartphone', 'Go.Web', 'Palm', 'iPAQ' ); $mobile_token_list = array ( 'Profile/MIDP', 'Configuration/CLDC-', '160×160', '176×220', '240×240', '240×320', '320×240', 'UP.Browser', 'UP.Link', 'SymbianOS', 'PalmOS', 'PocketPC', 'SonyEricsson', 'Nokia', 'BlackBerry', […]
View Details网页上漂亮的消息提醒不仅耳目一神，关键是引起用户的主题，实实在在起到提醒而不扰民的用途。本文向你推荐 25 个漂亮的 jQuery 消息提醒插件，你值得拥有。 偷个懒不翻译了，大家点击图片可直达官网。 1. jQuery Toastmessage jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. 2. jQuery Notification Menu A jQuery plugin to add notification bubbles and a notification list to any menu. 3. Noty noty 是一个很有用的 jQuery 插件，用于创建 alert, success, error and confirmation 信息提示框，替换浏览器标准的对话框。每个提醒都是添加队列并进行显示的。 4. Notify Notify! is a jQuery Notification Plugin which adds simple notifications bars that you can use on your website and application to assist users while […]
View Details大概大家读知道id,class以及descendant选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。 1. * ? 1 2 3 4 * { margin: 0; padding: 0; } 在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空margin和padding。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。 *也可以用来选择某元素的所有子元素。 ? 1 2 3 #container * { border: 1px solid black; } 它会选中#container下的所有元素。当然，我还是不建议你去使用它，如果可能的话。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 2. #X ? 1 2 3 4 #container { width: 960px; margin: auto; } 在选择器中使用#可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。 需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？ id选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 3. .X ? 1 2 3 .error { color: red; } 这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。 DEMO 兼容性 IE6+ Firefox Chrome Safari Opera 4. X Y ? 1 2 3 li a { text-decoration: none; } 下一个常用的就是descendant选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的a元素，而只需要定位li标签下的a标签？这时候你就需要使用descendant选择器了。 专家提示：如果你的选择器像X Y Z A B.error这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。 DEMO 兼容性 IE6+ Firefox Chrome […]
View Details2014年11月23日源创会年度盛典（北京站）正在报名 每次发这类文章时，用户集中反馈的问题包括： 好像以前发过 —— 答：标题类似，内容不同 怎么只有名称和图片，没有介绍 —— 答：介绍千篇一律，没什么特别的，图片更加直接，当然了最主要是为了偷懒，哈哈 怎么那么多前端的内容？ —— 答：多不好吗？ 1. MenuItems 2. Sidr 3. Material Menu 4. Responsive Tabbed Navigation 5. PGW Menu 6. jQuery Slimmenu 7. jQuery Sliding Menu 8. Responsive Tabs 9. Mmenu 10. Flex Nav 11. Responsive Full Width Tabs 12. Fixed Nav 13. Daisy Nav 14. Navgoco 15. Naver 16. Smart Menus 17. jQuery Fluid Content Scroller 18. Menu-aim 19. HorizontalNav 20. SlickNav 21. TinyNav.js 22. Menutron 23. Flaunt.js 24. jPanel Menu 25. Repsonsive Toggle Menu via codegeekz from:http://www.oschina.net/news/56988/responsive-jquery-navigation-plugins
View Details