<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<meta name=”Author” content=”Aultoale” />
<style type=”text/css”>
body {font:normal 12px Verdana}
a#tip {position:relative;left:75px; font-weight:bold;}
a#tip:link,a#tip:hover {text-decoration:none;color:#000;display:block}
a#tip span {display:none;text-decoration:none;}
a#tip:visited {color:#000;text-decoration:underline;}
a#tip:hover #tip_info {display:block;border:1px solid #F96;background:#FFEFEF;padding:10px 20px;position:absolute;top:0px;left:90px;color:#009933}
</style>
</head>
<body>
<a id=”tip” href=”#”>
移到这里试试!
<span id=”tip_info”>这里是提示信息!</span>
</a>
</body>
</html>
<!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=gb2312″ />
<title>DIV+CSS+JS制作滑动折叠的文字效果</title>
</head>
<style type=”text/css”>
<!–
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,”宋体”}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
–>
</style>
<script type=”text/javascript”>
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = “none”;
var isOpen = false;
head.onmouseover = function() {
this.style.background = “#EFEFEF”;
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = “#EFEFEF”;
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = “#FFF”
}
function show() {
head.style.borderBottom = “1px solid #DADADA”;
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
<!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=gb2312″ />
<title>CSS首字下沉</title>
<style type=”text/css”>
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
</style>
</head>
<body>
<div> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
<div> 对于世界而言，你是一个人；但是对于某个人，你是他的整个世界。纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。 </div>
</body>
</html>
<style type=”text/css”>
* {margin:0; padding:0;}
body {font:normal 12px/1.5em Verdana, Lucida, Arial, Helvetica, “宋体”, sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
.content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
.box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
.pager {width:180px;height:20px;margin:5pxauto;text-align:right;}
.pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
.pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}
</style>
<div>
<div id=”a1″><h2>锚点控制内容</h2><p>第一屏</p><p>网上有很多这样的教程，我这个只是娱乐而已</p></div>
<div id=”a2″><h2>锚点控制内容</h2><p>第二屏</p></div>
<div id=”a3″><h2>锚点控制内容</h2><p>第三屏</p></div>
<div id=”a4″><h2>锚点控制内容</h2><p>第四屏</p></div>
<div id=”a5″><h2>锚点控制内容</h2><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p><p>第五屏</p></div>
</div>
<div>
<a title=”" href=”#a1″>1</a>
<a title=”" href=”#a2″>2</a>
<a title=”" href=”#a3″>3</a>
<a title=”" href=”#a4″>4</a>
<a title=”" href=”#a5″>5</a>
</div>
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms(“formName”)，这样使用在IE 能接受，FF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id
1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
document.all(“itemName”)或者document.all(“itemId”)
解决方法：
使用对象ID作为对象变量名
document.getElementById(“itemId”)
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和FF都可以使用
var f = document.forms["formName "];
var o = f. itemId;
1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 FF 中不能。
DivId.style.display = “none”
解决方法：
document.getElementById(“DivId”).style.display = “none”
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2
1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，FF中不行
解决方法
在frame的使用方面FF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
在textarea 中输入时以回车来换行排版，但是入库后再读出来，显示时往往会出显没有换行的问题
原因在于textarea中换行用的是 "\n" 正常的HTML中换行是
解决方法：整体过程处理如下
一.表单处理
提交时使用JS把 textarea 中的 \n 替换成<br> ，偷了下懒JS使用了jquery ^^
<textarea name="tb" rows="2" cols="20" id="tb"></textarea>
<script>
$("#form").submit(function(){
var descrip = $("#tb").val();
descrip=descrip.replace(/\n/g,'<br />');
$("#tb").val(descrip);
}
</script>
二. 服务端处理
使用的是PHP4的原生函数，简单的做了一下入库前的处理
htmlentities(trim($postValue),ENT_QUOTES,"utf-8");
空格处理一下
$str = ereg_replace(" ", " ",$str);
三.读取显示
使用PHP的正则函数把读取的<br>还原，然后输出
<?php echo eregi_replace('<br>|<br />','<br>',$dataStr); ?>
OK，完成！ 收工
看到一些网站的底边下的工具条或是导航条效果很不错，FACEBOOK的很经典，自己也研究了一下简单的实现了功能 代码如下，IE6可能会有问题因为用到了position:fixed 虽然使用了_position:absolute;做兼容处理 但没有用IE6做测试
<!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>position:fixed</title>
</head>
<style>
.m-chat-box{position:fixed;_position:absolute;z-index:99999;width:100%;bottom:0}
.m-chat{position:relative;height:34px;background:url(http://i3.sinaimg.cn/lx/deco/2007/1229/yocc071229img/eladies_home_bg_002.gif) repeat-x ;border-left:1px solid #b5b5b5;border-right:1px solid#b5b5b5;margin:0 70px 0 15px;}
</style>
</head>
<body>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>
<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />
1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />
1111<br />1111<br />1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />
1111<br />1111<br/>1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />1111<br/>
<div>
<div>
position:fixed
</div>
</div>
</body>
</html>
下面的是我在网上找到的方法 一起记录在这吧
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
* html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
<DIV STYLE=”width: 120px; height: 50px; border: 1px solid blue;
overflow: hidden; text-overflow:ellipsis”>
<NOBR>文字过长时，一行显示不下，就会把过长的部分去掉用省略号代替<NOBR>
</DIV>
相关文章：
php内容长度截取 ： http://www.dyphp.com/?p=371
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。
详细介绍
下面介绍一些有关 标记的例子及解释。
META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
★HTTP-EQUIV
<!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”>
<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
Previous Entries
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire