防图片太大撑破页面css

这个在网页布局里很常见,网上看到有人用overflow:hidden来隐藏超出部分的图片,但那样图片就被截断了,不够完美。 用个简单的css max-width: 100%;可以解决这个问题,css代码如下: img{ max-width: 100%; height: auto; vertical-align: middle; } 不过max-width在IE6.0中是无效的,为了照顾到IE6.0,还是顺便把overflow:hidden加上比较好


div自适应高度

朋友问一个div自适应高度的问题,其实我也好久没关注css了,但是朋友问起来,还是帮忙解决一下。我没怎么深入去研究,只是从pjblog的皮肤里提取了最外层的div框架就能得到这个div自适应高度的案例。贴出代码如下: css


收藏一个找图标的网站

非常实用的一个网站,做logo时到上面找素材还是挺方便的。 地址:www.iconfinder.net


记一个每段开头空两格的css

每段开头空两格css p{ text-indent: 2em; }


颜色快速采集器

还是同事们发的一个工具:颜色快速采集器,用它来取一些简单颜色还是挺方便的。地址:http://www.baizoo.cn/tools/color.html


Fireworks超质感按钮

闲着无聊,逛了经典论坛后跟着教程做的一个按钮效果。教程原文:超酷质感按钮制作


CSS 定义IMG样式解决页面被撑变形的问题

当网页中插入的过大的图片的时候,经常会撑破网页JS是可以解决的,但是用CSS解决会比较简单点。CSS代码如下:CSS:.entry img { max-width: 520px; width:e­xpression(width>520?”520px”:”width”);} 另外记几个限制宽度的CSS样式IE7以上 和 Firefox浏览器(限定宽度大于700小于1024)min-width:700px;max-width:1024px;IE7以下最小宽度为700 width:e­xpression( documentElement.clientWidth < 770 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 770 ? “770″ : “auto”) : “770px”) : “auto” );最大宽度为1024width:e­xpression( … Continue reading →


仿站长站滑动门导航效果

搜了blueidea论坛之后才知道,这叫滑动门导航效果,顾名思义,就是鼠标滑动到导航链接处,可以无刷新显示下级菜单。收藏一个韩国滑动门效果导航网站:http://www.priden.com/ 只是导航CSS效果不一样,实现原理都一样的,有空的时候模仿一个priden的效果。这个效果在做cms模板时比较有用的。效果查看:chinaznav.html 程序代码 <%@LANGUAGE=”VBSCRIPT” CODEPAGE=”936″%><!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>滑动门导航实例</title><style type=”text/css”>body{    margin: 0; padding: 0;    background: #fff ;    font-family: Verdana, Geneva, Arial; font-size: 12px; color:#000;    line-height: 15px;} … Continue reading →


CCS实现仿淘宝无刷新导航切换效果

比较炫的仿淘宝导航切换效果,在博客里收藏共享,做皮肤的时候可以参考。查看页面:taobaonav.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>无标题文档</title><style type=”text/css”><!–* {    margin: 0; padding:0}body {    margin-top: 10px;    margin-right: auto;    margin-bottom: 10px;    margin-left: auto;    text-align: center;    height: auto;    width: auto;    background-color: #666666;    font-size: 12px;    color: #000000;}#container … Continue reading →


Div中class与id的区别及应用

class是设置标签的类。id是设置标签的标识。 class属性用于指定元素属于何种样式的类。如样式表可以加入: .baobao { color: lime; background: #ff80c0 } 使用方法:class=”baobao” id属性用于定义一个元素的独特的样式。如一个CSS规则:#binbin { font-size: larger }使用方法:id=”binbin” id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;class是一个样式,可以套在任何结构和内容上,就象一件衣服;概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,javascript等来使用这个类。因此你可以在一个页面上使用class=”Frodo” ,class= “Gandalf”, class=”Aragorn”来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。归纳成一句话就是:Class可以反复使用,而ID在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个ID不会出现问题,但在标准上这绝对是错误的使用,而且很可能导致某些浏览器的现实问题。在实际应用的时候,Class可能对文字的排版等比较有用,而ID则对宏观布局和设计放置各种元素较有用。