JavaScript教程:网页浮动定位提示效果

本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。
这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。

程序特点

同一个提示框用在多个触发元素时，只需一个实例；显示和隐藏分别有点击方式和触发方式选择；能设置延时显示和隐藏；有25种预设定位位置；可在预设定位基础上，再自定义定位；可设置自适应窗口定位；

完整实例下载(点击下载)

运行代码框
!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"headmeta ...<a href="http://www.tulaoshi.com/n/20160220/1633103.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="http://www.tulaoshi.com/n/20160220/1633103.html" target="_blank">JavaScript教程:网页浮动定位提示效果</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1632968" target="_blank"><img src="http://img.tulaoshi.com/201602/20/7c71a5477eefc6c4faddc17dced1e6cf_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632968.html" target="_blank">JavaScript教程:Table行定位效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做 table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。还不清楚这个效果叫什么，有点像表头固定的效果，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，而是li，而我这...<a href="http://www.tulaoshi.com/n/20160220/1632968.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/小曲挺坚硬/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/8.jpg" /><span>小曲挺坚硬</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631509" target="_blank"><img src="http://img.tulaoshi.com/201602/20/3c8622334d4ff470dfc567a9fbe99e78_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1631509.html" target="_blank">绝对定位(absolute)和浮动定位(float)</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位绝对定位的优势在于，我们可...<a href="http://www.tulaoshi.com/n/20160220/1631509.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/lax0000000000/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>lax0000000000</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630404" target="_blank"><img src="http://img.tulaoshi.com/201602/19/02d7497a8e8db02cd0475e576f08ab1b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630404.html" target="_blank">CSS实现网页分栏布局的方法：绝对定位和浮动</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位绝对定位的优势在...<a href="http://www.tulaoshi.com/n/20160219/1630404.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/漂亮妮妮1/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/24.jpg" /><span>漂亮妮妮1</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">233</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632283" target="_blank"><img src="http://img.tulaoshi.com/201602/20/0bf7155fe45461d8dea8a16f82ff75d6_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632283.html" target="_blank">JavaScript教程：网页中加入JavaScript</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> JavaScript基本数据结构 JavaScript提供脚本语言的编程与C++非常相似，它只是去掉了Ｃ语言中有关指针等容易产生的错误，并提供了功能强大的类库。对于已经具备Ｃ++或Ｃ语言的人来说，学习JavaScript脚本语言是一件非常轻松愉快的事。一、JavaScript代码的加入 JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。可以直接将...<a href="http://www.tulaoshi.com/n/20160220/1632283.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/游戏失败者go/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>游戏失败者go</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">13</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631645" target="_blank"><img src="http://img.tulaoshi.com/201602/20/3e4018ab180eac4360fb04221beef0ed_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1631645.html" target="_blank">CSS网页定位教程:详细学习定位知识</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃...<a href="http://www.tulaoshi.com/n/20160220/1631645.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/宝v你我的过客/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/5.jpg" /><span>宝v你我的过客</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630493" target="_blank"><img src="http://img.tulaoshi.com/201602/19/416dbb1081ee75d20ab6082e1c066662_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630493.html" target="_blank">CSS网页布局教程:绝对定位和相对定位</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！概要：本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个。) ...<a href="http://www.tulaoshi.com/n/20160219/1630493.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/鲁宏君/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>鲁宏君</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">7</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610122" target="_blank"><img src="http://img.tulaoshi.com/201602/19/884a7b1912f6a8596fcc2dd278ef09bb_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1610122.html" target="_blank">javascript实现仿新浪信息提示效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">以下是引用片段： !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" xml:lang="zh-CN" lang="zh-CN" head meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" / title政策文件_中国电力工程造价信息网/title meta http-eq...<a href="http://www.tulaoshi.com/n/20160219/1610122.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/自由鱼V/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>自由鱼V</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">6</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631220" target="_blank"><img src="http://img.tulaoshi.com/201602/20/2c698ad87cfbba3f6337afb7f0d7e612_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1631220.html" target="_blank">CSS制作网页经验:清除网页浮动</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：div style=clear:both;/div。例如： div style=background:#666; div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码，我们会发现最外层的父元素float container,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height...<a href="http://www.tulaoshi.com/n/20160220/1631220.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/非常肥腻/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>非常肥腻</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630645" target="_blank"><img src="http://img.tulaoshi.com/201602/19/c2b4f7c381492fe405fd7393f0a5c9ee_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630645.html" target="_blank">清除网页浮动CSS的做法</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 闭合浮动元素也就是清除浮动，在webjx.com多次被提及，然后很多CSSer对此并不是非常了解，往往未闭合浮动元素，造成页面混乱的状况。按照 CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？有一种做法...<a href="http://www.tulaoshi.com/n/20160219/1630645.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/小处男呦丶/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/25.jpg" /><span>小处男呦丶</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1483483" target="_blank"><img src="http://img.tulaoshi.com/201601/29/e38863843a907cabaefa2d4719e9a893_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160129/1483483.html" target="_blank">Javascript制作浮动的工具条</A></div> <div class="span_em_123"> 该程序是我从别人的网站上分析出来的！由于对方的网站使用了框架，而且又取消了鼠标的右键功能，因此费了好长时间！当你浏览该页时，工具条始终浮在左上角，你若不喜欢，可以自己调节摆放位置！若想多页使用该代码，可以把JSP程序部分写成JS的文件，然后再通过调用来实现，有不明白的地方，欢迎各位与我交流！ <HTML <HEAD <TITLE</TITLE <META http-equiv="Content-Type" conten...<a href="http://www.tulaoshi.com/n/20160129/1483483.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/奋斗的青春CH/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>奋斗的青春CH</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1630938" target="_blank"><img src="http://img.tulaoshi.com/201602/19/df10ca6cb5bb8a0166a7820573a36f2c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1630938.html" target="_blank">网页布局教程:边距和绝对定位</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 这篇文章继续前面发起的关于的话题，先前在描述关于自动定位的一些基本信息之后，我留下了一些可能用在布局中的方法，现在是时候讨论元素定位的改进问题了。玩弄绝对定位元素于股掌之间首先，回忆一下自动定位是如何触发的，设置绝对定位元素的left、top、right、bottom属性为默认的auto值，而不是给定长度值。当属性为auto值时，绝对定位元素不会参考任何定位的祖先元素，而是参照它作为静态流动元...<a href="http://www.tulaoshi.com/n/20160219/1630938.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/外外是王的女人/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/18.jpg" /><span>外外是王的女人</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1617178" target="_blank"><img src="http://img.tulaoshi.com/201602/19/69755731761998ba5a8ff2c4dcfd2d30_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1617178.html" target="_blank">CSS分栏布局的方法:绝对定位和浮动</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动（float）概念。绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位绝...<a href="http://www.tulaoshi.com/n/20160219/1617178.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/蒙娜丽莎AiNi/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/28.jpg" /><span>蒙娜丽莎AiNi</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">16</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1623890" target="_blank"><img src="http://img.tulaoshi.com/201602/19/12d527605bb28671a9b71bee3eb1e94d_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1623890.html" target="_blank">javascript密码强度提示</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PasswordStrong._Default" % !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 runat="server" title/title /head body form id="form1" runat=...<a href="http://www.tulaoshi.com/n/20160219/1623890.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/思念着她的美/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>思念着她的美</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632763" target="_blank"><img src="http://img.tulaoshi.com/201602/20/b2abd6e48b3fb53c332dcedd64fea30e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632763.html" target="_blank">Javascript教程:拖放效果研究</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 拖放效果，也叫拖拽，学名Drag-and-drop ，是最常见的js特效之一。如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就像自己学习的知识那样。这里考虑到...<a href="http://www.tulaoshi.com/n/20160220/1632763.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/生命奇迹多多/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>生命奇迹多多</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632702" target="_blank"><img src="http://img.tulaoshi.com/201602/20/4156ed72bfdd732bf181c1a2c32de39c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632702.html" target="_blank">JavaScript教程:图片切割效果</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 自上一个版本的图片切割效果出来后，虽然也经常看到框架开发这个如何如何容易之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。近来我把其中的拖放效果和缩放效果单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。要说明的是这个只是一个效果，并不是...<a href="http://www.tulaoshi.com/n/20160220/1632702.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/流年逝水sing/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>流年逝水sing</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">65</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632853" target="_blank"><img src="http://img.tulaoshi.com/201602/20/edf22782f2cf8faa2fcfbd8112a53d33_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1632853.html" target="_blank">JavaScript教程:网页时间问题</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在浏览几个网页时，发现有几个网站在显示时间时存在问题，比如今天是2009年1月4日，但是有的网站上却赫然写着今天是 109年1月4日（这里有个例子就是中国银行的网站首页）。这是一个奇怪的问题，可看这些网站的代码，大致如下： var today; today = new Date(); document.write(today.getYear()); var today;today = new ...<a href="http://www.tulaoshi.com/n/20160220/1632853.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/有1点fan/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>有1点fan</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1631346" target="_blank"><img src="http://img.tulaoshi.com/201602/20/280c26e97346884d9827283de409b68b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160220/1631346.html" target="_blank">CSS浮动定位:引起文本重影的怪异问题</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 事物绝非十全十美总有强差人意的一面，之前针对浮动分析了其引起文本重影的怪异问题，而作为浮动布局的最佳搭档定位布局也存在一定的缺陷。围绕着定位列出的种种问题，对某些情况只是作出了分析而暂时没有找到有解决方案，但既然知道问题所在，我们可以尽可能的采取其它措施避免这现象。 position:relative;属性值导致overflow:hidden;失效。问题：在IE6/7中子级设置position:relative;属...<a href="http://www.tulaoshi.com/n/20160220/1631346.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/蔬菜水果人/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/6.jpg" /><span>蔬菜水果人</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">84</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1578719" target="_blank"><img src="http://img.tulaoshi.com/201602/17/d75193932a32463cc21a8e427d530b83_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160217/1578719.html" target="_blank">CSS分栏布局的方法：绝对定位和浮动</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/pmsj/" target="_blank">平面设计</a> <a href="http://www.tulaoshi.com/hbsj/" target="_blank">海报设计</a> <a href="http://www.tulaoshi.com/ggsj/" target="_blank">广告设计</a> <a href="http://www.tulaoshi.com/huabaosheji/" target="_blank">画报设计</a> <a href="http://www.tulaoshi.com/qmsj/" target="_blank">签名设计</a> <a href="http://www.tulaoshi.com/fzsj/" target="_blank">服装设计</a> <a href="http://www.tulaoshi.com/mpsj/" target="_blank">名片设计</a> <a href="http://www.tulaoshi.com/huacesheji/" target="_blank">画册设计</a> <a href="http://www.tulaoshi.com/banshisheji/" target="_blank">版式设计</a> <a href="http://www.tulaoshi.com/shangbiaosheji/" target="_blank">商标设计</a></div> <div class="span_em_123"> 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。进入论坛参与讨论但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图：这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏...<a href="http://www.tulaoshi.com/n/20160217/1578719.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/想念你的XX/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>想念你的XX</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">21</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1627691" target="_blank"><img src="http://img.tulaoshi.com/201602/19/9d615505f1f6c02ef90ea7bb9e34da2e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1627691.html" target="_blank">详解网页设计中的定位与定位应用</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。定位的定义：在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。 relative 不脱离文档流，参考自身静态位置...<a href="http://www.tulaoshi.com/n/20160219/1627691.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/究竟是誰膚淺/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/11.jpg" /><span>究竟是誰膚淺</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1603010" target="_blank"><img src="http://img.tulaoshi.com/201602/19/1783ee609183f1c6fe3eb1a6adb99117_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="http://www.tulaoshi.com/n/20160219/1603010.html" target="_blank">CSS网页中的相对定位与绝对定位</A></div> <div class="xiang_righ_lable">标签：<a href="http://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 在CSS中有这样的一个指令：(position)，在DreamWeaver中文版中翻译为“定位”，常用的属性有两个：relative(相对)与 absolute(绝对)。有很多朋友对这条指令的用法还是不清楚，这里做一些细致的讲解。 position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填...<a href="http://www.tulaoshi.com/n/20160219/1603010.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/z291892042/" target="_blank"><img src="http://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/20.jpg" /><span>z291892042</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21242.html">上一页</a><a href="/reader/21239.html">21239</a><a href="/reader/21240.html">21240</a><a href="/reader/21241.html">21241</a><a href="/reader/21242.html">21242</a><a href="/reader/21243.html" class="cur">21243</a><a href="/reader/21244.html">21244</a><a href="/reader/21245.html">21245</a><a href="/reader/21246.html">21246</a><a href="/reader/21247.html">21247</a><a href="/reader/21244.html">下一页</a> </div> </div> </div>  <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="http://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="http://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div>  <script type="text/javascript" src="http://static.tulaoshi.com/js/zt.js"></script> </body> </html>