活着的博客 » HTML http://www.ibloglife.com 个人现实生活博客:人,终究是生活在现实之中,是为了活着而生活. Wed, 08 Feb 2012 10:02:23 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 可拖动的浮动框js代码，兼容IE/FF/chrome/Opera http://www.ibloglife.com/archives/ketuodongdefudongkuangjsdaimajianrongieffchromeopera.html http://www.ibloglife.com/archives/ketuodongdefudongkuangjsdaimajianrongieffchromeopera.html#comments Tue, 03 Jan 2012 00:05:47 +0000 浮云 http://www.ibloglife.com/?p=3611 在我们要用浮动的QQ客服时，通常是固定在页面某个位置，但需要兼容的浏览器很多，可能会导致浮动的QQ客服盖住了页面内容。这个JavaScript代码可以解决这个问题，可随意拖动的浮动框到页面任意位置，且兼容IE/FF/chrome/Opera等主流浏览器。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://......

]]> 在我们要用浮动的QQ客服时，通常是固定在页面某个位置，但需要兼容的浏览器很多，可能会导致浮动的QQ客服盖住了页面内容。这个JavaScript代码可以解决这个问题，可随意拖动的浮动框到页面任意位置，且兼容IE/FF/chrome/Opera等主流浏览器。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://......

]]> http://www.ibloglife.com/archives/ketuodongdefudongkuangjsdaimajianrongieffchromeopera.html/feed 0 浏览器CSS3测试 http://www.ibloglife.com/archives/lanqicss3ceshi.html http://www.ibloglife.com/archives/lanqicss3ceshi.html#comments Fri, 18 Nov 2011 00:15:51 +0000 浮云 http://www.ibloglife.com/?p=3546 先有牛人用CSS3画了机器猫，然后另一位工程师用HTML5画了灰太狼，从一定程度上测试出主流浏览器对HTML5和CSS3的支持情况。 机器猫：http://www.liulan7.net/labs/css3.html 灰太狼：http://www.liulan7.net/labs/huitailang.html 测试代码下载，版权归原作者所有！ 收藏、分享这篇文章!

]]> 先有牛人用CSS3画了机器猫，然后另一位工程师用HTML5画了灰太狼，从一定程度上测试出主流浏览器对HTML5和CSS3的支持情况。 机器猫：http://www.liulan7.net/labs/css3.html 灰太狼：http://www.liulan7.net/labs/huitailang.html 测试代码下载，版权归原作者所有！ 收藏、分享这篇文章!

]]> http://www.ibloglife.com/archives/lanqicss3ceshi.html/feed 0 鼠标滑过图片放大镜效果 http://www.ibloglife.com/archives/shubiaohuaguotupianfangda.html http://www.ibloglife.com/archives/shubiaohuaguotupianfangda.html#comments Thu, 07 Jul 2011 00:29:22 +0000 浮云 http://www.ibloglife.com/?p=3035 另外一种图片放大镜效果，在鼠标滑过缩略图时，原图放大显示： <style type="text/css"> .thumb{ position: relative; z-index: 0; } .thumb:hover{ background-color: transparent; z-index: 50; } .thumb span{ position: absolute; left: -1000px; background-color: #ffffcc; padding: 5px; border: 1px dash......

]]> 另外一种图片放大镜效果，在鼠标滑过缩略图时，原图放大显示： <style type="text/css"> .thumb{ position: relative; z-index: 0; } .thumb:hover{ background-color: transparent; z-index: 50; } .thumb span{ position: absolute; left: -1000px; background-color: #ffffcc; padding: 5px; border: 1px dash......

]]> http://www.ibloglife.com/archives/shubiaohuaguotupianfangda.html/feed 0 使用CSS固定页脚footer http://www.ibloglife.com/archives/shiyongcssgudingyejiaofooter.html http://www.ibloglife.com/archives/shiyongcssgudingyejiaofooter.html#comments Tue, 28 Jun 2011 00:07:09 +0000 浮云 http://www.ibloglife.com/?p=2955 因朋友网页改版后的页面内容少，要将footer层固定在整个页面的最下方，网页的内容比较少时，页脚的联系方式部分不随着页面中的内容高度的减小而上移。这种方式适用于将网页中的版权信息固定在页面下方。当然，当页面内容多时，页脚也要正常显示。 这就要用到CSS的4大核心基石：盒子模型、标准流、浮动、定位。只有把这些......

]]> 因朋友网页改版后的页面内容少，要将footer层固定在整个页面的最下方，网页的内容比较少时，页脚的联系方式部分不随着页面中的内容高度的减小而上移。这种方式适用于将网页中的版权信息固定在页面下方。当然，当页面内容多时，页脚也要正常显示。 这就要用到CSS的4大核心基石：盒子模型、标准流、浮动、定位。只有把这些......

]]> http://www.ibloglife.com/archives/shiyongcssgudingyejiaofooter.html/feed 0 网页安全色 http://www.ibloglife.com/archives/wangyeanquanse.html http://www.ibloglife.com/archives/wangyeanquanse.html#comments Tue, 05 Oct 2010 00:35:50 +0000 浮云 http://www.ibloglife.com/?p=2080 　　在 HTML 中，颜色或者表示成十六进制值（如 #FF0000）或者表示为颜色名称 (red)。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。 　　网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）......

]]> 　　在 HTML 中，颜色或者表示成十六进制值（如 #FF0000）或者表示为颜色名称 (red)。网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），也就是说这些颜色在任何终端浏览用户显示设备上的现实效果都是相同的。 　　网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）......

]]> http://www.ibloglife.com/archives/wangyeanquanse.html/feed 0 HTML 5 http://www.ibloglife.com/archives/html5.html http://www.ibloglife.com/archives/html5.html#comments Mon, 26 Jul 2010 00:24:43 +0000 浮云 http://www.ibloglife.com/?p=1782 　　HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。......

]]> 　　HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。......

]]> http://www.ibloglife.com/archives/html5.html/feed 0 用列表ul+li制作CSS横向菜单 http://www.ibloglife.com/archives/yongliebiaoullizhizuocsshengxiangcaidan.html http://www.ibloglife.com/archives/yongliebiaoullizhizuocsshengxiangcaidan.html#comments Mon, 07 Jun 2010 00:17:25 +0000 浮云 http://www.ibloglife.com/?p=1657 ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。 在CSS网页布局中，我们通常用ul、li来实现横向导航菜单。这就是要我们自己定义CSS来改变它的外观，使它能横向显示在在一行中，并且将项目符号去掉。 CSS： * {......

]]> ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。 在CSS网页布局中，我们通常用ul、li来实现横向导航菜单。这就是要我们自己定义CSS来改变它的外观，使它能横向显示在在一行中，并且将项目符号去掉。 CSS： * {......

]]> http://www.ibloglife.com/archives/yongliebiaoullizhizuocsshengxiangcaidan.html/feed 3 在网页中插入flv视频 http://www.ibloglife.com/archives/zaiwangyezhongcharuflvshipin.html http://www.ibloglife.com/archives/zaiwangyezhongcharuflvshipin.html#comments Sat, 22 May 2010 02:26:51 +0000 浮云 http://www.ibloglife.com/?p=1608 　　如何在网页中插入flv视频？用网页设计软件dreamweaver，可以直接插入flv格式的视频：选择“插入”>“媒体”>“Flash 视频”，如下图： 　　在弹出的窗口填下各项参数，如flv视频的路径，外观等，如下图，插入的视频文件名为demo.flv： 　　确定后，会自动生成以下代码，并生成二个swf文件（FLVPlayer_Progre......

]]> 　　如何在网页中插入flv视频？用网页设计软件dreamweaver，可以直接插入flv格式的视频：选择“插入”>“媒体”>“Flash 视频”，如下图： 　　在弹出的窗口填下各项参数，如flv视频的路径，外观等，如下图，插入的视频文件名为demo.flv： 　　确定后，会自动生成以下代码，并生成二个swf文件（FLVPlayer_Progre......

]]> http://www.ibloglife.com/archives/zaiwangyezhongcharuflvshipin.html/feed 1 div层叠 http://www.ibloglife.com/archives/divcengdie.html http://www.ibloglife.com/archives/divcengdie.html#comments Thu, 20 May 2010 02:26:53 +0000 浮云 http://www.ibloglife.com/?p=1602 　　首先要明确在文中所需要用到的几个自定义概念： 　　1、静态定位：position:static（为position属性的默认值）。 　　2、动态定位：position:relative或position:absolute或position:fixed。 　　3、祖元素：任意包含该元素的元素。 　　4、父元素：直接包含该元素的祖元素。 　　5、同辈元素：拥有共同的父元素的元......

]]> 　　首先要明确在文中所需要用到的几个自定义概念： 　　1、静态定位：position:static（为position属性的默认值）。 　　2、动态定位：position:relative或position:absolute或position:fixed。 　　3、祖元素：任意包含该元素的元素。 　　4、父元素：直接包含该元素的祖元素。 　　5、同辈元素：拥有共同的父元素的元......

]]> http://www.ibloglife.com/archives/divcengdie.html/feed 0 正确使用IMG标签的alt属性和title属性 http://www.ibloglife.com/archives/zhengqueshiyongimgbiaoqiandealtshuxinghetitleshuxing.html http://www.ibloglife.com/archives/zhengqueshiyongimgbiaoqiandealtshuxinghetitleshuxing.html#comments Fri, 23 Apr 2010 04:01:12 +0000 浮云 http://www.ibloglife.com/?p=1466 　　alt属性和title属性的正确使用，不仅可以提高用户体验，还能提高搜索引擎对图片的搜索能力(图片SEO)。 　　alt属性 　　替换文字(alt属性)是为了给那些不能看到你网页文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。......

]]> 　　alt属性和title属性的正确使用，不仅可以提高用户体验，还能提高搜索引擎对图片的搜索能力(图片SEO)。 　　alt属性 　　替换文字(alt属性)是为了给那些不能看到你网页文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。......

]]> http://www.ibloglife.com/archives/zhengqueshiyongimgbiaoqiandealtshuxinghetitleshuxing.html/feed 0