03 2013 档案
摘要:1.>对于article section nav aside元素的使用->article主张独立性->section主张分块性->nav适用于重要链接->aside适用于附属信息,侧边栏2.>对新增元素的使用->无法知道浏览器是否支持新元素,所以需要适用css追加声明.通知浏览器html5新增元素是以块来显示的article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}->ie8之前的浏览器不支持用css来使用这些尚未支持的结构元素的,需要适用javasc
阅读全文
摘要:Firebug是网页开发的利器,能够极大地提升工作效率。但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它的高级用法。===================================Firebug控制台详解作者:阮一峰出处:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。一、显示信息的命令Firebug内置一个console对象,提供5
阅读全文
摘要:html5 要解决三个问题1>浏览器之间的兼容性很低2>文档结构不够明确3>web应用程序的功能受到限制html5 相比html4的变化1>doctype声明<!DOCTYPE html>2>指定字符编码html4-> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >html5-> <meta charset="utf-8">(不能同时使用)3>新增的结构元素->
阅读全文
摘要:样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。 内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。 外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElement
阅读全文
摘要:一直以来没去注意这个恒等于(三个等号:===)的运算符。后来实际工作中遇到,就想了解一下这个等于和恒等于到底有什么区别。JavaScript是弱类型语言,这就意味着,等于操作符会为了比较两个值而进行强制类型转换。注意0的相等运算,例如:""=="0"//false0==""//true0=="0"//truefalse=="false"//falsefalse=="0"//truefalse==undefined//falsefalse==null//falsenull==u
阅读全文
摘要:在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document .documentElement来取代document .body,可以这样写 例: var top = document .documentElement.scrollTop || document .b
阅读全文
摘要:INPUT元素是页面设计的最基本的元素之一,是FORM表单的组成部分,也可以单独使用。是用户交互必不可少的元素。对于INPUT的布局,可能会出现在某些浏览器下正常,在某些浏览器中杂乱的现象:无缘无故的换行了--!,曾经为此事甚感头疼。造成布局问题的最直接的一个原因,往往是宽度高度设置的不合理导致的。更有甚者,是不设置高度,因为 INPUT的size属性,也会影响它的宽度,所以,有的人往往只设置size,不设置width,孰不知,因小而见大,一个不小心,就会出现布局的混乱。size属性到底是?当INPUT元素的“type”属性值为“text”(文本框)或“password”时(密码框),“siz
阅读全文
摘要:有时候项目中会用到用js获取元素位置来定位元素,我在网上开了大量的 图解,代码,最终把我搞的晕了,还是结合网上的 自己来总结一下,首先来看看网上的:DOM的定义如下图获取元素的位置属性可以通过HTMLElement.offsetLeftHTMLElement.offsetTop但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。所以我们要得到她的绝对位置,那么我们必须依次向上获取他的父元素的位置,然后获取它父元素的父元素的offersetLeft和offersetT.
阅读全文
摘要:IE css hack汇总汇总下IE各版本的css hackhack示例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)**colorYYYYNYNY++colorYYYYNYNY--colorYYNNNNNN__colorYYNYNYNY##colorYYYYNYNY\0color:red\0NNNNYNYN\9\0color:red\9\0NNNNNNYN标准模式中:1,减号(-)是IE6专有hack2,反斜杠零(\0)是IE8/9的hack3,\9\0是IE9/10的hack
阅读全文
摘要:<html><head> <title></title> <style> #slideshow{width:256px;height: 256px;position:relative;overflow: hidden;} </style></head><body><h1>Web Design</h1><p>There are things you should know</p><ol id="linklist"> <
阅读全文
摘要:<html><head> <title></title> <style> .hover{font-weight: bold;font-style: italic;} .intro{font:italic 50px Trebuchet MS;} </style></head><body><P id="example" style="font:italic 1em Trebuchet MS;color:#bbbbbb;"> html 结构层, css
阅读全文
摘要:<html><head> <meta charset=utf-8 /> <title>Explaining the Document Object Model</title></head><body><h1>What is the Document Object Model?</h1><p>The <abbr title="World Wide Web Consortium">W3c</abbr> defines the <a
阅读全文
摘要:进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n filename :打开文件,并将光标置于第n行首 vi + filename :打开文件,并将光标置于最后一行首 vi +/pattern filename:打开文件,并将光标置于第一个与pattern匹配的串处 vi -r filename :在上次正用vi编辑时发生系统崩溃,恢复filename vi filename....filename :打开多个文件,依次进行编辑 移动光标类命令h :光标左移一个字符 l :光标右移一个字符 space:光标右移一个字符 Backspace:光标左移一个字
阅读全文
摘要:<html> <head> <meta charset=utf-8> <title></title> </head> <body> <h1>Snapshots</h1> <ul id="imageGallery"> <li><a href="images/1 (1).png" title="picture1" alt="picture1">picture1</a>
阅读全文
摘要:Ajax中,XMLHttpRequest对象的status属性一般用来返回服务器的HTTP状态码。status为200表示“成功”,status为404代表“页面未找到”。很多书上都是这样写的,一点也不错。 但是,有时候,特别是刚开始学Ajax的时候,可能会将代码直接在本地运行。这样就出现问题了。 如果在本地运行(如:C:ajaxhelloworld.htm),那么status属性不管是在“成功”还是“页面未找到”的情况下,都返回的是0,而 不是200和404。这个时候如果还用if(xmlHttp.status==200)来判断运行,则会毫无结果。如果要在本地测试,最好写成 if(xmlHt.
阅读全文
摘要:<html> <head> <meta charset=utf-8> <title></title> </head> <body> <h1>Snapshots</h1> <ul> <li><a href="images/1 (1).png" title="picture1" alt="picture1">picture1</a></li> <li><a
阅读全文
摘要:<html><head> <meta charset=utf-8> <title></title></head><body><h1>非平稳退化,如果浏览器禁用javascript,则会变得很糟糕</h1><a href="#" onclick="popUp('http://www.baidu.com');return false">Example1</a><h1>平稳退化Graceful degr
阅读全文
摘要:没用过zencoding的同学可以自行研究,然后试试这段代码 :h1{Snapshots}+ul>li*3>a[href="images/$.jpg" title="picture$" alt="picture$"]{picture$} 1 <html> 2 <head> 3 <meta charset=utf-8> 5 <title></title> 6 </head> 7 <body> 8 <h1>Snapshots<
阅读全文
摘要:1 <html> 2 <head> 3 <title></title> 4 5 </head> 6 <body> 7 <form action="test_submit" method="get" accept-charset="utf-8" class="test" id="form1"> 8 9 <div class="test"></div>10 <div
阅读全文
摘要:<html><head> <title></title> <script> //create array var beatles = new Array("1","2","3","4"); beatles = Array("1","2","3","4"); beatles = ["1","2","3","4&
阅读全文
摘要:本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。 差别1: link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下
阅读全文
摘要:CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm。CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节 点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设 置多大的字体,这完全可以根据您自己的需,
阅读全文
摘要:尽管你可以使用GIMP来进行图纸格式的转换,但是操作还是有的麻烦。一个比较容易的方法是使用Imagemagick软件。 sudo apt-get install imagemagick安装完成以后,就可以 使用convert命令。convert命令非常简单,譬如:压缩图片大小: convert -resize 80% 1440×9200.png 1440×9200.png转换图片格式:convert filename.jpg filename.bmp 如果你使用JPEG等大小和图片质量有关的图形格式化,可以使用-quality参数。参数的数值在0至100之间,数值越大文件越
阅读全文