http://www.ibloglife.com 个人现实生活博客:人,终究是生活在现实之中,是为了活着而生活. Wed, 08 Feb 2012 10:02:23 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 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/preblockquotebiaoqianzidonghuanxingjianrongieoperafirefoxchrome.html http://www.ibloglife.com/archives/preblockquotebiaoqianzidonghuanxingjianrongieoperafirefoxchrome.html#comments Sat, 16 Jul 2011 00:39:05 +0000 浮云 http://www.ibloglife.com/?p=3054 在使用<pre></pre>粘贴代码时，或者用<blockquote></blockquote>引用时，会发现pre/blockquote中的过长的代码，如过长的url等，在Opera/Firefox/Chrome不会实现自动换行。对于IE，可以通过IE专有的CSS属性word-wrap即可实现自动换行：word-wrap:break-word;，而对于Opera/Firefox/Chrome则不适用......

]]> 在使用<pre></pre>粘贴代码时，或者用<blockquote></blockquote>引用时，会发现pre/blockquote中的过长的代码，如过长的url等，在Opera/Firefox/Chrome不会实现自动换行。对于IE，可以通过IE专有的CSS属性word-wrap即可实现自动换行：word-wrap:break-word;，而对于Opera/Firefox/Chrome则不适用......

]]> http://www.ibloglife.com/archives/preblockquotebiaoqianzidonghuanxingjianrongieoperafirefoxchrome.html/feed 1 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 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/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 http://www.ibloglife.com/archives/yongcsszhizuoyuanjiaodiv.html http://www.ibloglife.com/archives/yongcsszhizuoyuanjiaodiv.html#comments Sat, 05 Jun 2010 03:12:26 +0000 浮云 http://www.ibloglife.com/?p=1652 为了增加页面的美观效果，有时需要将div层或表格的边角进行圆角处理。下面介绍一个老外用CSS写的实例： CSS: /*注意CSS标签之间的嵌套*/ body{padding: 20px;background-color: #FFF;  font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;} h1,h2,p{margin: 0 10px;} h1{font-size: 250%;color: #FFF;} h2{font......

]]> 为了增加页面的美观效果，有时需要将div层或表格的边角进行圆角处理。下面介绍一个老外用CSS写的实例： CSS: /*注意CSS标签之间的嵌套*/ body{padding: 20px;background-color: #FFF;  font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;} h1,h2,p{margin: 0 10px;} h1{font-size: 250%;color: #FFF;} h2{font......

]]> http://www.ibloglife.com/archives/yongcsszhizuoyuanjiaodiv.html/feed 2 http://www.ibloglife.com/archives/csssuoxie.html http://www.ibloglife.com/archives/csssuoxie.html#comments Fri, 04 Jun 2010 02:27:32 +0000 浮云 http://www.ibloglife.com/?p=1650 　　Web网站可用性的关键指标是速度，影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小等等，尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。 　　为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，......

]]> 　　Web网站可用性的关键指标是速度，影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小等等，尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。 　　为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，......

]]> http://www.ibloglife.com/archives/csssuoxie.html/feed 0 http://www.ibloglife.com/archives/15gecsschangshi.html http://www.ibloglife.com/archives/15gecsschangshi.html#comments Thu, 03 Jun 2010 02:02:10 +0000 浮云 http://www.ibloglife.com/?p=1647 　　1、不要使用过小的图片做背景平铺。因为宽高1px的图片平铺出一个宽高200px的区域，需要200*200=40,000次，这就是为何很多人都不用1px的原因，占用资源。 　　2、无边框的推荐写法是border:none;，而border:0;只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析。 　　3、慎用*通配符。所谓通配符，就是将CSS......

]]> 　　1、不要使用过小的图片做背景平铺。因为宽高1px的图片平铺出一个宽高200px的区域，需要200*200=40,000次，这就是为何很多人都不用1px的原因，占用资源。 　　2、无边框的推荐写法是border:none;，而border:0;只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析。 　　3、慎用*通配符。所谓通配符，就是将CSS......

]]> http://www.ibloglife.com/archives/15gecsschangshi.html/feed 5 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 http://www.ibloglife.com/archives/cssdingweipositionshuxing.html http://www.ibloglife.com/archives/cssdingweipositionshuxing.html#comments Wed, 19 May 2010 02:05:42 +0000 浮云 http://www.ibloglife.com/?p=1600 　　CSS为定位和浮动提供了一些属性（position static relative absolute float z-index），利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的......

]]> 　　CSS为定位和浮动提供了一些属性（position static relative absolute float z-index），利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的......

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