稚子的成长博客 | 记录网站开发解决方案｜IT业界动态｜生活随想…

css关于定位的知识普及

发表于2013 年 5 月 14 日由稚子

absolute是相对于自己最近的父元素来定位的，如果你不给其父元素相对定位，那么这个绝对定位就是相对于body或者其父元素的父元素来定位的。

举个例子：比如

&lt;div id="aa"&gt;
    &lt;div id="bb"&gt;
        &lt;div id="cc"&gt;绝对定位内容&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

<div id="cc">绝对定位内容</div>

</div>

如果让cc绝对定位，必须给bb层首先定义个相对定位，这个相对定位无需设置位置。

否则cc会根据aa的位置（如果aa设置了相对定位的话），或者直接就根据页面的body来定位了。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

打个比方：把相对定位的层比喻成一个楼层，比如3层，这个楼6层，那么设置相对定位右侧偏移100米。那么结果是什么呢？？？

结果就是，1、2、4、5、6楼层还在原来的位置，3层的位置还是给留着的哦（因为他还在文档流中），只是看着没有了，因为他往右边跑了100米，他成了空中楼阁啦。。

发表在 Web前台开发技术 | 标签为 css, position | 留下评论

css中hideFocus的用法

发表于2013 年 5 月 14 日由稚子

hideFocus这个属性和SDK有什么关系呢，实际上hideFocus和SDK没有实质关系，不过在显示效果上，hideFocus还是起到一定作用的。

hideFocus即隐藏聚焦，具有使对象聚焦失效的功能，其功能相当于：

onFocus=”this.blur()”

它的值是一个布尔值，如hideFocus=true。也可省略赋值直接写hideFocus。

你给的代码如果没有hideFocus,那么鼠标点击该超链接，则外面出现一个虚线框，即为聚焦。而使用了hideFocus则不会有虚线框。

在IE下，需要在标签 a 的结构中加入 hidefocus=”true” 属性。即：

而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：

a {
outline:none;
}

a {

outline:none;

}

继续阅读 →

发表在 Web前台开发技术 | 标签为 css | 一条评论

javascript中 [CDATA[的web标准使用方法

发表于2013 年 5 月 14 日由稚子

根据W3C XHTML 1.0的规定：在XHTML中，因为<和&这两个符号有特殊意义（小于号用于标签的开始标记），所以这两个符号<和&需要转义成<和&。

比如下面的XHTML标准模式代码是错误，因为未使用转义字符（保存为itworks.xhtml文件，用firefox打开）：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cmn-Hans-CN"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /&gt;
    &lt;title&gt;test&lt;/title&gt;
    &lt;script type="text/javascript"&gt;
        if(1&lt;2)
        {
            alert('a');
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;xhtml,It works.
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

if(1<2)

{

alert('a');

}

</script>

</head>

<body>

<p>xhtml,It works.

</p>

</body>

</html>

继续阅读 →

发表在 Web前台开发技术 | 标签为 Javascript, web | 留下评论

CSS使Web页面变灰(但是不兼容firefox)

发表于2013 年 5 月 9 日由稚子

4．20地震给四川雅安人民带来了巨大灾难，4月27日到4月29日为全国哀悼日，有很多网站界面今天都变成了黑白色，从而纪念那些在地震中死去的逝者。对于普通的站长来说，对于灾难并不能多做些什么，但可以做到将自己的网站也变成黑白色，从而缅怀那些地震逝者。

如果用传统的方法将网站变成黑白色非常的麻烦，需要更换页面的文件，并且要对图片进行更改。但如果自己的网站支持CSS的话，一切变得很简单。只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。

以下是代码片段：

*{
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

filter: gray;

}

CSS简单入门教程

发表于2013 年 5 月 8 日由稚子

CSS是“Cascading Style Sheets”的简称，中文翻译为“串接样式表”，也有人翻译为“样式表”。CSS用以作为网页的排版和风格设计，在web标准建站中，对CSS的熟悉和使用是相当重要的一个内容。CSS的作用是弥补HTML的不足，让网页的设计更为灵活。

这个文章只是为您介绍CSS的基础应用，指引您的一个入门的基础教程，主要目的是为推进web标准贡献自己的微薄之力。

说点我自己的体会，现在有好多人都在推广WEB标准，其实对初学者来说，不需要刚学的时候就学标准，学点简单的还是容易入门的，因为现在HTML还在照样用啊，所以我希望初学者学习时不要非遵循标准，当你入门之后，你做网页的时候，发现使用表格特麻烦的时候你就该去寻求简单方法了，到时再学也不晚啊，如果你喜欢新技术那么你初学时就学标准吧，按个人的实际来行动吧。下面开始学习了继续阅读 →

发表在 Web前台开发技术 | 标签为 css | 留下评论

linux命令删除非空目录

发表于2013 年 5 月 5 日由稚子

在linux下面删除文件或者目录命令rm(remove)

功能说明：删除文件或目录。

语　　法：rm [-dfirv][–help][–version][文件或目录…]

补充说明：执行rm指令可删除文件或目录，如欲删除目录必须加上参数”-r”，否则预设仅会删除文件。

参　　数：

-d或–directory 　直接把欲删除的目录的硬连接数据删成0，删除该目录。

-f或–force 　强制删除文件或目录。

-i或–interactive 　删除既有文件或目录之前先询问用户。

-r或-R或–recursive 　递归处理，将指定目录下的所有文件及子目录一并处理。

-v或–verbose 　显示指令执行过程。

–help 　在线帮助。

–version 　显示版本信息。

注：rmdir只能用于删除空目录

发表在操作系统相关 | 标签为 linux | 留下评论

JavaScript 中万变不离其宗的 this 应用场景

发表于2013 年 5 月 1 日由稚子

this 是 JavaScript 中的一个关键字，它可以指向 window、函数、对象、全局变量，甚至是一个 Dom 元素，this 这是闹哪样啊？this 到底是指向什么？“模棱两可”的 this 几乎把前端开发们逼疯了。但我认为“模棱两可”的 this 恰恰是 JavaScript 灵活性的体现，如果摸清 this 的“脾气”，不旦不会加剧程序的复杂性，反而会让我们的代码更健壮。

this 的“脾气”并非是老虎的 P 股摸不得。我对使用 this 的场景作了一下分类，不过大家要知道，不管 this 的用法有多少，都是万变不离其宗的，它的宗旨可以总结成两句话，第一句话引自《JavaScript 权威指南》中很精辟的描述：JavaScript 中的函数运行在它们被定义的作用域里，而不是它们被执行的作用域里；第二句话引自 WanGe 同样很精辟的描述：this 指向的是调用该函数或者对象的拥有者。

带着这两句话，我们来看一下 this 可能存在的场景：继续阅读 →

发表在 Web前台开发技术 | 标签为 Javascript | 留下评论

IETester中Debugbar插件的注册码

发表于2013 年 5 月 1 日由稚子

大家都知道IETester是一款可以兼容 IE5.5/IE6/IE7/IE8 的免费网页调试软件，主要用来检测网站在 IE 下的兼容性，相信大家都知道，我就不多介绍了。

但该利器中的一个debugbar功能大家一定没用过。

DebugBar 是 IETester的一个插件，类似于 Firefox 的 Firebug，该功能只能在线查看 DIV+CSS，而不能在线修改调试，所以功能上比 Firebug 差远了，虽说在功能上有些太监，但至少聊胜于无。

但是因为该插件不对用户免费，所以大部分用户都不怎么关心这个功能，今天我们就来提供一个DebugBar的注册码，来开启DebugBar之旅…

具体注册步骤就不说了，相信一般会用IETester的人对于注册码的使用都了如指掌。

name：itphome.cn

SN：948573d572cc817067ebb87e93943fad

发表在应用工具软件 | 标签为 Debugbar, IETester | 留下评论

Mysql字符串截取函数用法说明

发表于2013 年 4 月 29 日由稚子

感觉上MySQL的字符串函数截取字符，比用程序截取（如PHP或JAVA）来得强大，所以在这里做一个记录，希望对大家有用。
函数：
1、从左开始截取字符串
left（str, length）
说明：left（被截取字段，截取长度）
例：select left（content,200） as abstract from my_content_t
2、从右开始截取字符串
right（str, length）
说明：right（被截取字段，截取长度）
例：select right（content,200） as abstract from my_content_t
3、截取字符串
substring（str, pos）
substring（str, pos, length）
说明：substring（被截取字段，从第几位开始截取）
substring（被截取字段，从第几位开始截取，截取长度）
例：select substring（content,5） as abstract from my_content_t
select substring（content,5,200） as abstract from my_content_t
（注：如果位数是负数如-5 则是从后倒数位数，到字符串结束或截取的长度）继续阅读 →

发表在数据库相关技术 | 标签为 MySQL, 字符串 | 留下评论

浏览器 CSS 兼容写法的测试总结

发表于2013 年 4 月 26 日由稚子

做前端最讨厌的就是 IE6，虽然被淘汰的浏览器，但是在中国用户仍然很多，不可能像国外网站一样直接就不管它了，这样会流失很多流量啊。

现在有了IE9，IE10还好些，几乎和 Chrome，Firefox 差别不大了，但是IE6，IE7，IE8还是要做单独兼容的，这里总结下兼容方法：

对于 IE6、IE7、IE8 进行 CSS 兼容方法可以看看这篇文章

https://blog.zzstudio.net/web/article_249.html

以下方法均在 IE6、IE7、IE8、IE9、Chrome、Firefox 中测试过，其他如 Opera 浏览器等感觉国内没什么用户的就未涉及

继续阅读 →

发表在 Web前台开发技术 | 标签为 IE6, 兼容 | 一条评论

归档

功能