分类 网站建设 下的文章

纯JS打造幻灯片 - 放弃低效率的FLASH吧

ResponsiveSlides

这里介绍的js脚本名字叫ResponsiveSlides

这个js脚本的min版本大小不超过1KB,几乎不会额外增加带宽,但是其幻灯片功能却非常强大。

主要参数如下:

auto: true, // 布尔型: 是否自动播放幻灯片, true 或 false
speed: 500,// 整数型: 幻灯片切换速度, 单位毫秒
timeout: 4000,// 整数型: 幻灯片之间的过渡时间, 单位毫秒
pager: false, // 布尔型: 显示切换按钮, true 或 false
nav: false, // 布尔型: 显示导航, true false
random: false,// 布尔型: 以随机顺序显示幻灯片, true false
pause: false, // 布尔型: 鼠标悬停时暂停, true false
pauseControls: true,// 布尔型: 悬停控制时暂停, true false
prevText: "Previous", // 字符串型: “上一张”按钮的的文本
nextText: "Next", // 字符串型: “下一张”按钮的的文本
maxwidth: "", // 整数型: 幻灯片的最大宽度, 单位像素
navContainer: "", // 选项控制器: 控制器应附着的地方, 默认在'ul'之后
manualControls: "", // 选项控制器: 声明自定义的导航
namespace: "rslides", // 字符串型: 修改默认使用的名称空间
before: function(){}, // 函数: 回调前的
after: function(){} // 函数: 回调后的

详细使用方法见官方网站:http://responsiveslides.com/

div嵌套引起的margin-top不起作用

转自互联网,出处不明

嵌套div中margin-top转移问题的解决办法

在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div style="background-color:#FF0000;width:300px; height:100px">上部层</div>

<div style="background-color:#009900; width:300px; height:300px;overflow:hidden "> <!--父层-->
<div style="margin:50px; background-color:#000000;width:200px; height:200px"">子层</div>
</div>

</body>
</html>

原因:盒子没有获得 haslayout 造成 margin-top无效

解决办法:
1、在父层div加上:overflow:hidden;
2、把margin-top外边距改成padding-top内边距 ;
3、父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border。
父层div加: padding-top: 1px;
4、让父元素生成一个 block formating context,以下属性可以实现
* float: left/right
* position: absolute
* display: inline-block/table-cell(或其他 table 类型)
* overflow: hidden/auto
父层div加:position: absolute;

解决IE6兼容性问题常见方法

转自互联网

解决IE6兼容性问题常见方法
1、使用声明
你必须经常在html网页头部放置一个声明,推荐使用严格的标准。例如

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 

or,forXHTML:  

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
最后你需要是IE6进入兼容模式,这已经足够兼容了。
2、使用position:relative
设置一个标签position:relative可以解决很多问题,特别是曾经有过看不见的经历或者奇怪布局的框架。明显的,你需要小心,绝对位置放置的子元素是否都参照找到新位置。
3、为浮动元素使用display:inline
IE6兼容性解决方案为浮动元素使用display:inline。浮动元素会有一个著名的IE6双边距marginbug。假如你设置了左边距5px但实际上得到了10px左边距。display:inline可以解决这个问题,尽管它不是必需的,但是css仍然有效。
4、设置元素启动hasLayout
大部分IE6(IE7)的渲染问题都可以通过起来元素的hasLayout属性来兼容。这是IE内置的设定,确定一个内容块相对其它内容块是有界限和位置的。当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果,设置hasLayout也是必须的。
5、修复重复字符的bug
IE6兼容性解决方案修复重复字符的bug。复杂的布局会触发一个bug:浮动对象的最后字符会出现在已经清除浮动的元素后面。这里有几种解决的办法,部分是理想的,并且一些测试和出错是必须的。
a、确保浮动元素都使用:display:inline;
b、最后一个浮动元素使用margin-right:-3px;
c、在浮动对象最后一个元素后使用一个条件注释。例如<!—>这里输入注释…<![endif]
d、在容器内的最后使用一个div空标签(它也必须设置90%宽度甚至更小)
6、使用a标签完成可点击和hover原理
IE6只支持a标签的css定义hover效果
你可以使用它去控制javascript启动的widgets,使得他们仍然保持键盘操作。这里有个二择一的问题,但是a标签是所有解决方案中最可靠的。

几个图片轮播FLASH动画 - 让你的幻灯片更美观

文件名 说明
bcastr.swf 目前最新的是第四版bcastr4.swf
pixviewer.swf 新浪门户用的图标轮播FLASH

bcastr最新版本下载:
实例:http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip
源代码:http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip

Apache的rewrite规则详细介绍 - 制作跳转伪静态

rewrite标志

R[=code](force redirect) 强制外部重定向
强制在替代字符串加上http://thishost[:thisport]/前缀重定向到外部的URL.如果code不指定,将用缺省的302 HTTP状态码。
F(force URL to be forbidden)禁用URL,返回403HTTP状态码。
G(force URL to be gone) 强制URL为GONE,返回410HTTP状态码。
P(force proxy) 强制使用代理转发。
L(last rule) 表明当前规则是最后一条规则,停止分析以后规则的重写。
N(next round) 重新从第一条规则开始运行重写过程。
C(chained with next rule) 与下一条规则关联
如果规则匹配则正常处理,该标志无效,如果不匹配,那么下面所有关联的规则都跳过。
T=MIME-type(force MIME type) 强制MIME类型
NS (used only if no internal sub-request) 只用于不是内部子请求
NC(no case) 不区分大小写
QSA(query string append) 追加请求字符串
NE(no URI escaping of output) 不在输出转义特殊字符
例如:RewriteRule /foo/(.*) /bar?arg=P1\%3d$1 [R,NE] 将能正确的将/foo/zoo转换成/bar?arg=P1=zed
PT(pass through to next handler) 传递给下一个处理
例如:
RewriteRule ^/abc(.*) /def$1 [PT] # 将会交给/def规则处理
Alias /def /ghi
S=num(skip next rule(s)) 跳过num条规则
E=VAR:VAL(set environment variable) 设置环境变量

rewrite时服务器变量:HTTP headers:HTTP_USER_AGENT, HTTP_REFERER, HTTP_COOKIE, HTTP_HOST, HTTP_ACCEPT
connection & request: REMOTE_ADDR, QUERY_STRING
server internals: DOCUMENT_ROOT, SERVER_PORT, SERVER_PROTOCOL
system stuff: TIME_YEAR, TIME_MON, TIME_DAY

Rewrite规则表达式的说明:
. 匹配任何单字符
[chars] 匹配字符串:chars
[^chars] 不匹配字符串:chars
text1|text2 可选择的字符串:text1或text2
? 匹配0到1个字符
* 匹配0到多个字符
+ 匹配1到多个字符
^ 字符串开始标志
$ 字符串结束标志
\n 转义符标志

反向引用 $N 用于 RewriteRule 中匹配的变量调用(0 <= N <= 9)
反向引用 %N 用于 RewriteCond 中最后一个匹配的变量调用(1 <= N <= 9)

RewriteCond标志符'nocase|NC'(no case)忽略大小
'ornext|OR' (or next condition)逻辑或,可以同时匹配多个RewriteCond条件

RewriteRule适用的标志符
'redirect|R [=code]' (force redirect)强迫重写为基于http开头的外部转向(注意URL的变化) 如:[R=301,L]
'forbidden|F' (force URL to be forbidden)重写为禁止访问
'proxy|P' (force proxy)重写为通过代理访问的http路径
'last|L' (last rule)最后的重写规则标志,如果匹配,不再执行以后的规则
'next|N' (next round)循环同一个规则,直到不能满足匹配
'chain|C' (chained with next rule)如果匹配该规则,则继续下面的有Chain标志的规则。
'type|T=MIME-type' (force MIME type)指定MIME类型
'nosubreq|NS' (used only if no internal sub-request)如果是内部子请求则跳过
'nocase|NC' (no case)忽略大小
'qsappend|QSA' (query string append)附加查询字符串
'noescape|NE' (no URI escaping of output)禁止URL中的字符自动转义成%[0-9]+的形式。
'passthrough|PT' (pass through to next handler)将重写结果运用于mod_alias
'skip|S=num' (skip next rule(s))跳过下面几个规则
'env|E=VAR:VAL' (set environment variable)添加环境变量

实际操作

例子:
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ^MSIE [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Opera [NC]
RewriteRule ^.* - [F,L] 这里”-”表示没有替换,浏览器为IE和Opera的访客将被禁止访问。

例子:
RewriteEngine On
RewriteBase /test
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ([^/]+)$ /test/$1.php
#for example: /test/admin => /test/admin.php
RewriteRule ([^/]+)\.html$ /test/$1.php [L]
#for example: /test/admin.html => /test/admin.php

限制目录只能显示图片
< IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !^.*\.(gif|jpg|jpeg|png|swf)$
RewriteRule .*$ - [F,L]
< /IfModule>