最近微软已经正式发布了windows 8操作系统，window操作系统的风格已经完全改变成了瓦片状的Metro UI。 对于微软来说这是一个巨大的改变，而且所有微软的平台包括，桌面，平板，移动及其网站都使用这个UI风格。 Metro UI包含了所有的现代web设计的特点，包括了，简化，基于网格的界面，并且富有连续性。 大家如果有兴趣可以看看这个界面设计说明 （http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx）。 如果你也喜欢Metro风格的话，这里我们收集了很多windows 8的Metro UI风格布局资源，希望大家喜欢！ Metro风格的网站框架和模板 Metro UI CSS Metro UI CSS是一个非常完整的创建Metro风格的网站的框架。使用LESS创建，并且拥有网格系统，排版样式，表格，按钮和图片。 同时也拥有内建的javascript组件，帮助你生成片状，菜单，边栏，进度条，提示等等 etro UI CSS BootMetro BootMetro是一个Twitter Bootstrap的Metro风格主题。你可以创建Metro风格的样式。例如，片状UI，工具栏，其它组件。 metro-bootstrap 类似上面的BootMetro，这是另外一个Twitter Bootstrap主题，拥有所有的漂亮组件，并且包含了LESS。 Metro UI Template 这是一个网站的框架和模板，用来创建windows 8 Metro UI风格的界面。拥有平滑的过渡效果和tiles（包括，RSS，Twitter，weather等等） 这个模板支持模板并且拥有jQuery UI主题。 Droptiles – Metro-Style Web Dashboard 一个开源的windows 8开始界面dashboard（类似igoogle)。 使用tiles来展示信息，每一个tiles是独立的应用可以用来获取数据。这个项目基于ASP.NET可以移植到其它语言。 PHP Image Gallery In Metro UI 一个PHP的图片画廊可以自动生成缩略图，并且可以使用lightbox来显示图片。支持HTML5和CSS3。 Motown 一个用来创建Metro风格应用的类库，使用很少代码即可实现。不依赖其它javascript类库。 Metro风格jQuery插件资源 jq-metro 一个jQuery插件用来创建Metro风格的界面。目前，panorama，privot，进度条，列表选择，切换，按钮等。 Metro JS 这个jQuery Metro UI插件可以用来创建tiles，应用条，并且支持主题。功能和设计完全可定制。 jQuery Metro UI Plugin 这个插件可以简单的创建tiles视图并且支持聚焦。 jQuery Mobile Metro Theme 一个免费jQuery移动Metro UI主题，完全支持自定义。使用不同插件来处理应用栏，进度条，按钮和日期选择器。 Metro UI Theme Builder For jQuery UI 拥有themeroller风格的jQuery UI主题创建，帮助你创建Metro UI风格样式 TileJS (non-jQuery) 一个标准的javascript代码来创建tiles并且拥有完整tiles的onclick效果。 免费Metro UI图标 Modern UI Icons 一套简单手绘的Metro […]
View Details|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> function QqClose() { window.opener = null; window.open('', '_top'); window.top.close(); window.close(); } </script> <a href="javascript:window.close();void(0);">正常关闭</a> <a href="javascript:QqClose();void(0);">QQ关闭</a> </body> </html> |
View Details
JS中操作table的方法 var myTable = document.getElementById("myTable "); //添加行 var newTR = myTable.insertRow(index); 该方法创建一个新的 TableRow 对象表示一个新的 <tr> 标记，并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。 如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。 //设置行的id和class属性 newTR.id = "myid"; newTR.className="MainContentText"; //添加列:序号 var newTD=newTR.insertCell(0); //添加列内容 newTD.innerHTML = "dfdsf"; //删除表所有行，只留标题行 var rows = myTable.rows.length; for(var i=0;i<rows-1;i++){ myTable.deleteRow();//不给参数，代表删除最后一行 } JS本身不支持方法重载 Js中实现方法重载的方式也知道了呵呵（会默认调用参数最多的那个方法） 转自：http://www.cnblogs.com/judy/archive/2010/06/05/1752230.html
View Details第一步样式表中定义一个@face样式 @font-face {font-family: 'weiruanyahei';src: url('7000.eot');src: local('weiruanyahei Regular'), local('weiruanyahei'), url('7000.ttf') format('truetype'),url('7000.woff') format('woff');} font-family: 'weiruanyahei';这个 “weiruanyahei”是自己起的名字什么都行。。。 第二步 在服务器上安装这个特殊字体 第三步 下载字体的ttf格式转换成需要的woff，eot，svg等格式字体 这个是要做到多个浏览器都支持的效果 转换步骤 我用的一个网站转换的 挺好用的 网址 http://onlinefontconverter.com/ 注册一下 上传ttf字体 然后选择需要的格式就会转换了 下载下来就好了 第四步 把转换好的格式 分别上传到 服务器的网站文件中。。css中7000.woff就是那个字体的路径及名称 我的是在同级目录下所以就直接写7000.woff了。 第五步 #poem{font-size:45px;font-family:weiruanyahei;text-align:center;} 样式中定义font-family:weiruanyahei; 是你起的名字 然后再应用的地方应用就好了。。。。。。 大功告成哦 转自：http://hi.baidu.com/ionly0801/item/6f3aa7ea7c296b3e86d9deae
View DetailsdecodeURI()函数： 定义和用法:decodeURI()函数可对encodeURI()函数编码过的URI进行解码.语法:decodeURI(URIstring)参数描述:URIstring必需,一个字符串,含有要解码的URI组或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换. decodeURIComponent()函数： 定义和用法:decodeURIComponent()函数可对encodeURIComponent()函数编码过的URI进行解码.语法:decodeURIComponent(URIstring)参数描述:URIstring必需,一个字符串,含有解码的URI组件或其他要解码的文本.返回值:URIstring的副本,其中的十六进制转义序列将被它们表示的字符替换.
|
1 |
<p> </p><p><span class="tag"><html></span><br /><span class="pln"> </span><span class="tag"><body></span><br /><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test </span><span class="pun">=</span><span class="pln"> </span><span class="str">"</span><a href="http://www.test.com/My" rel="nofollow"><span class="str">http://www.test.com/My</span></a><span class="str"> test/"</span><span class="pun">; </span><span class="pln"> </span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test1 </span><span class="pun">=</span><span class="pln"> encodeURI</span><span class="pun">(</span><span class="pln">test</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test2 </span><span class="pun">=</span><span class="pln"> decodeURI</span><span class="pun">(</span><span class="pln">test1</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test3 </span><span class="pun">=</span><span class="pln"> encodeURIComponent</span><span class="pun">(</span><span class="pln">test</span><span class="pun">);</span><br /><span class="pln"> </span><span class="kwd">var</span><span class="pln"> test4 </span><span class="pun">=</span><span class="pln"> decodeURIComponent</span><span class="pun">(</span><span class="pln">test3</span><span class="pun">);</span></p><br /><p><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test1 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test2 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test3 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="pln">test4 </span><span class="pun">+</span><span class="pln"> </span><span class="str">"<br />"</span><span class="pun">);</span><br /><span class="pln"> </span><span class="tag"></script></span><br /><span class="pln"> </span><span class="tag"></body></span><br /><span class="tag"></html></span></p><p> </p> |
运行结果： http://www.test.com/My%20test/ http://www.test.com/My test/ http%3A%2F%2Fwww.test.com%2FMy%20test%2Fhttp://www.test.com/My test/
View Details定义和用法 decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。 语法
|
1 |
decodeURI(URIstring) |
参数 描述 URIstring 必需。一个字符串，含有要解码的 URI 或其他要解码的文本。 返回值 URIstring 的副本，其中的十六进制转义序列将被它们表示的字符替换。 实例 在本例中，我们将使用 decodeURI() 对一个编码后的 URI 进行解码：
|
1 |
<script type="text/javascript">var test1="http://www.w3school.com.cn/My first/"document.write(<code style="font-family: 'Courier New', monospace; color: rgb(0, 0, 255); ">encodeURI(test1)</code>+ "<br />")document.write(<code style="font-family: 'Courier New', monospace; color: rgb(0, 0, 255); ">decodeURI(test1)</code>)</script> |
输出：
|
1 |
http://www.w3school.com.cn/My%20first/http://www.w3school.com.cn/My first/ |
Date (对象) Date 对象能够使你获得相对于国际标准时间（格林威治标准时间，现在被称为 UTC-Universal Coordinated Time）或者是 Flash 播放器正运行的操作系统的时间和日期。要使用Date对象的方法，你就必须先创建一个Date对象的实体（Instance）。 Date 对象必须使用 Flash 5 或以后版本的播放器。 Date 对象的方法并不是静态的，但是在使用时却可以应用于所指定的单独实体。 Date 对象的方法简介： ·getDate ｜ 根据本地时间获取当前日期(本月的几号)·getDay ｜ 根据本地时间获取今天是星期几(0-Sunday,1-Monday…)·getFullYear ｜ 根据本地时间获取当前年份(四位数字) ·getHours ｜ 根据本地时间获取当前小时数(24小时制,0-23)·getMilliseconds ｜ 根据本地时间获取当前毫秒数·getMinutes ｜ 根据本地时间获取当前分钟数·getMonth ｜ 根据本地时间获取当前月份(注意从0开始:0-Jan,1-Feb…)·getSeconds ｜ 根据本地时间获取当前秒数·getTime ｜ 获取UTC格式的从1970.1.1 0:00以来的毫秒数·getTimezoneOffset ｜ 获取当前时间和UTC格式的偏移值(以分钟为单位)·getUTCDate ｜ 获取UTC格式的当前日期(本月的几号)·getUTCDay ｜ 获取UTC格式的今天是星期几(0-Sunday,1-Monday…)·getUTCFullYear ｜ 获取UTC格式的当前年份(四位数字)·getUTCHours ｜ 获取UTC格式的当前小时数(24小时制,0-23)·getUTCMilliseconds ｜ 获取UTC格式的当前毫秒数·getUTCMinutes ｜ 获取UTC格式的当前分钟数·getUTCMonth ｜ 获取UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·getUTCSeconds ｜ 获取UTC格式的当前秒数·getYear ｜ 根据本地时间获取当前缩写年份(当前年份减去1900)·setDate ｜ 设置当前日期(本月的几号)·setFullYear ｜ 设置当前年份(四位数字)·setHours ｜ 设置当前小时数(24小时制,0-23)·setMilliseconds ｜ 设置当前毫秒数·setMinutes ｜ 设置当前分钟数·setMonth ｜ 设置当前月份(注意从0开始:0-Jan,1-Feb…)·setSeconds ｜ 设置当前秒数·setTime ｜ 设置UTC格式的从1970.1.1 0:00以来的毫秒数·setUTCDate ｜ 设置UTC格式的当前日期(本月的几号)·setUTCFullYear ｜ 设置UTC格式的当前年份(四位数字)·setUTCHours ｜ 设置UTC格式的当前小时数(24小时制,0-23)·setUTCMilliseconds ｜ 设置UTC格式的当前毫秒数·setUTCMinutes ｜ 设置UTC格式的当前分钟数·setUTCMonth ｜ 设置UTC格式的当前月份(注意从0开始:0-Jan,1-Feb…)·setUTCSeconds ｜ 设置UTC格式的当前秒数·setYear ｜ 设置当前缩写年份(当前年份减去1900)·toString ｜ 将日期时间值转换成"日期/时间"形式的字符串值·Date.UTC ｜ 返回指定的UTC格式日期时间的固定时间值 创建新的 Date 对象 语法：new Date();new Date(year [, month [, date [, hour [, minute [, second [, millisecond ]]]]]] );参数：year 是一个 0 到 99 之间的整数，对应于 1900 到 1999 年，或者为四位数字指定确定的年份；month 是一个 0 (一月) 到 11 (十二月) 之间的整数，这个参数是可选的；date 是一个 1 到 31 之间的整数，这个参数是可选的；hour 是一个 0 (0:00am) 到 23 (11:00pm) 之间的整数，这个参数是可选的； minute 是一个 […]
View DetailsJQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。 废话少说，先上实例 【代码】 <script> $(function() { $( "#datepicker" ).datepicker(); });</script> <p>Date: <input type="text" id="datepicker"></p> 【效果图】 下面介绍一下具体用法： 一、需要加载的js文件 (1)jquery.js (2)jquery.ui.core.js (3)jquery.ui.widget.js (4)jquery.ui.datepicker.js 二、html代码 需要一个用来加载datepicker控件的输入框 <input id = "date" type="text"/> 三、js代码 初始化函数：$(.selecter).datepicker() 【参数】 因为参数较多，把所有参数根据功能分成几组进行阐述 1、动画 duration 'normal' 设置日期控件展开动画的显示时间，可选是 "slow", "normal", "fast"，"代表立刻，数字代表毫秒数。 showAnim 'show' 设置显示、隐藏日期插件的动画的名称。 showOptions {} 如果使用showAnim来显示动画效果的话，可以通过此参数来增加一些附加的参数设置。 2、图片按钮 buttonImage "" 设置弹出按钮的图片，如果非空，则按钮的文本将成为alt属性，不直接显示。 buttonImageOnly false 是否把按钮安全显示成图片的样子 buttonText "…" 设置触发按钮的文本内容。 showOn 'focus' 设置什么事件触发显示日期插件的面板，可选值： focus, button, both(当为focus时，不显示图片按钮) 3、选中之后时间格式 dateFormat mm/dd/yy 设置日期字符串的显示格式。 dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 设置一星期中每天的名称，从星期天开始。此内容用于dateFormat时显示，以及日历中当鼠标移至行头时显示。 dayNamesMin ['Su', 'Mo', 'Tu', […]
View Details当你需要编辑或改变网站设计时，CSS 起着重要的作用。 透过一些 CSS工具可以让新手开发人员和设计人员轻松地学习这门语言和它的功能。 今天，我们为你编制了30个有用的CSS工具和应用程序。使用下列工具，您将能够以任何顺序进行CSS属性的排序，能够将您的Photoshop图层转成CSS样式，可以创建自己的响应Web系统。希望你能从这些工具和应用中发掘对自己有用的内容。 1. Metro UI CSS Metro UI CSS 是一套实现了 Windows 8 的 Metro 风格界面的 CSS 框架。 2. CSScomb CSScomb 可使用指定的排序方法对 CSS 的属性进行排序，提供多种版本，包括： CSScomb Online CSScomb for Sublime Text 2 (Also in Package Control) CSScomb for Textmate CSScomb for Coda & Coda 2 CSScomb for Espresso 2 CSScomb for IntelliJIDEA/WebStorm/PyCharm CSScomb for Notepad++ CSScomb for Vim 3. CSS3Ps CSS3Ps 是一个免费的基于云端的 Photoshop 插件，用来将 PhotoShop 的图层转成用 CSS3 实现的方式，外观完全一致。您可以选择多个图层和图层组，一键转换。行程转换为CSS边框属性。内阴影，内发光，阴影，外发光转换成CSS的box- shadow属性。您可以在浏览器中看到的结果样式，并与其他人分享。它适用于Windows或Mac OS X和Photoshop CS3及更高版本。最重要的是，它是完全免费的！ 4. ResponsiveAeon ResponsiveAeon 是一个HTML5/CSS3的框架，可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列，提供了3个非常容易理解的基本类供 使用。该框架使使用@mediaqueries的，支持任何尺寸的设备。除了网格系统，也有排版，列表，表格，按钮和表格的样式。 5. RefineSlide RefineSlide是一个轻量级（4KB压缩）的jQuery插件快速整合一个响应式的、基于图像滑块的效果到我们的网站。滑块使用CSS3转 换+ 3D变换（有JS备用）和有一堆有吸引力的转变。它有一个选项，以显示缩略图（自动格式化和响应）或箭头的导航（支持键盘操作）。 6. Photon Photon 是一个JavaScript库，实现了在三维空间中的任何元素添加简单的照明效果。为了制造出效果，它采用了WebKitCSSMatrix的对象 （WebKit是唯一支持的浏览器引擎）。光的角度可以定义，并随时更改所提供的功能。这是可能被点亮一个由一个或一组一次来定义对象，我们可以通过设置 的最大黑色+白色用法自定义的效果。 7. Gridpak Gridpak 的目的是实现了响应式的 Web 页面设计，提高您的工作流程，节省了时间。通过生成PNG图像，CSS和JavaScript，，让 […]
View Details