HTML/CSS - vfresh

使用css给图片添加阴影

2009年06月24日 | HTML/CSS

一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？
我们可以采取“视觉欺骗大法”——定义渐变边框来实现

示例代码：

<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css" >
body {background:#2e334d;}
img {border:none;}
a.pic-shadow {display:inline-block;zoom:1;padding:1px;background:#262a3f;border:solid #2b3048 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
a.pic-shadow img {padding:1px;background:#13151f;border:solid #1e2132 1px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
</style>
</head>
<body>
<a class="pic-shadow" href="#" title=""><img src="http://www.vfresh.org/wp-content/uploads/2008/11/mxlineage.gif" alt="" title="" /></a>
</body>
</html>

border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;

上面这段定义是各标准浏览器中圆角定义，用以更专业地欺骗眼睛

颜色代码可以在ps中做好外发光效果后拾取。
我上面的效果是[柔和]、[扩展0]、[大小5px]、[颜色#000]其余默认

当然了，特殊要求的话可以使用ie的滤镜来实现更华丽的阴影
反对滤镜主义者飘过……你们自己gg去

已有 0 条评论

固宽背景图居中错位的问题

2009年03月02日 | HTML/CSS

在 IE/FF/OP/Safari/chrom 中运行下面代码，然后将页面收缩至小于980px

<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>test</title>
<style type="text/css" >
body {background:url(http://www.vfresh.org/wp-content/uploads/2009/03/test.gif) top center no-repeat;}
#trunk {width:980px;height:100px;margin:0 auto;}
</style>
</head>
<body>
<div id="trunk">
	testtest!~~~~~~~~~
</div>
</body>
</html>

会发现在FF/OP下背景图错位了，而IE/chrom/safari下是正常的。

可以使用以下hack解决这个问题：

body {display:table;width:100%}

<!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" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>test</title>
<style type="text/css" >
body {background:url(http://www.vfresh.org/wp-content/uploads/2009/03/test.gif) top center no-repeat;display:table;width:100%}
#trunk {width:980px;height:100px;margin:0 auto;}
</style>
</head>
<body>
<div id="trunk">
	testtest!~~~~~~~~~
</div>
</body>
</html>

这个bug触发的条件：
1.主容器未定宽度或宽度为100%
2.主容器背景属性符合：background-repeat:no-repeat;background-position:center 0;(不平铺、横向居中)
3.子容器有定义宽度

原因：FF/OP是将body的总宽度定为了当前浏览器的宽度
也就是说，当浏览器缩小至800px的时候，FF/OP将body的宽度设为800px，再将body的背景图按照宽度800px居中放置，而body的子容器#trunk是980px，冲破了body，这样就导致了错位的问题。

这个问题在所有未定宽度或宽度为100%的容器内都有发生。
对于非body元素，我们可以使用以下方式修正：

div {min-width:980px;}

已有 0 条评论

有感于yahoo对css bug的利用：margin重叠

2008年10月29日 | HTML/CSS

CSS2规范里面对margin重叠的描叙：

1.水平边距永远不会重合。

2.垂直边距可能在特定的框之间重合：

常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。

在一个浮动框和其它框之间的垂直边距不重合。

“绝对定位的框”与“相对定位的框”边距不重合。

magrin重叠
如上图所示，结构层及样式层如下：

<div class="wrap">
  <div class="t1">t1111111111111</div>
  <div class="t2">t222222</div>
</div>

.wrap {margin:10px;}
.t1,.t2 {margin:10px;}
.t1 {background:blue;}
.t2 {background:red;}

黑字描叙的重叠部分为t1与t2的上下边距
红字描叙的重叠部分为wrap与t1及t2的边距

一直以来，我都只是对这类“bug”予以解决或避免：
黑字描叙部分margin重叠的解决办法：
1.浮动

.t1,.t2 {clear:both;float:left;}

2.两个不同的定位

.t1{position:relative;}
.t2{position:absolute;}

红字描叙部分margin重叠的解决办法：
给予wrap容器padding或border或float属性值

.wrap {padding:1px 0}
.wrap {border:1px solid #ccc}
.wrap {float:left}

但今天简单看了下yahoo的页面布局，他们合理地利用了这个我一直以为是bug的东西来改善模块重用化
yahoo首页左侧的各块，都是有margin重叠现象的

但这种重叠，恰到好处的改善了模块的重用化

模块的重用化简单来讲就是各模块（如上图yahoo的“Small Business”部分，我称之为页面的一个模块），对它进行删除、移动操作都不需要修改样式，也就是说可以任意从结构中删除或移动“Small Business”部分，而不需再修改其他模块甚至它本身的样式。延伸的应用，如一个模块的样式可多处重复应用等；有时间再细说吧

也许，我应该更多地改变思维方式——我一直都太愚钝。

已有 5 条评论

IE 6实现min/max-height/width

2008年01月02日 | HTML/CSS

1.min/max-height

*html Element {
	_height: expression(this.scrollHeight > 475?"475px":"auto");
}

2.min/max-width

*html Element {
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
}

*html Element {
	width:expression(this.offsetWidth>200?200:'');
}

已有 0 条评论

display:inline-block

2007年12月18日 | HTML/CSS

display:inline-block 的详细介绍至PlanABC

display:inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内

支持inline-block的浏览器：Opera、Safari

各浏览器中的hack：

1.Opera中出现多余外边距：

vertical-align:middle;

2.IE下实现inline-block：
~~div {display:inline-block;}~~

div {
*display:inline;
*zoom:1;
}

~~/*两处display需要分开声明*/~~

3.Mozilla(FireFox 2.x)浏览器实现方法：(FF 3.0开始已经全面支持inline-block)

div {
display:-moz-inline-box;/** FF 实现inline-block**/
-moz-box-pack:center; /** FF 解决水平居中**/
-moz-box-align:center;/** FF 解决垂直居中 **/
}

已有 0 条评论

浏览器特定选择器（hack）

2007年11月21日 | HTML/CSS

IE6以下

*html{
  ...
}

IE 7 以下

*:first-child+html {
    ...
}
* html {
   ...
}

只对IE 7

*:first-child+html {
   ...
}

只对IE 7 和现代浏览器

html>body {
 ...
}

只对现代浏览器(非IE 7)

html>/**/body {
  ...
}

最新的Opera 9以下版本

html:first-child {
  ...
}

Safari

html[xmlns*=”"] body:last-child {
  ...
}

最新的，由bias发表在蓝色《最新css兼容方案》

.e {/*FF OP*/
background-color: #FF0000
}

html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}

*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}

* html .e{/*IE6*/
background-color:#00FFFF
}

仅FireFox

@-moz-document url-prefix() {body {
	font-size:0px;
}}

已有 0 条评论

修正IE对PNG颜色显示错误的问题

2007年08月28日 | HTML/CSS

IE下面PNG图片的颜色显示较深，但在其余的浏览器中却显示正常，如下图：
IE对PNG颜色显示错误的问题
(查看全文»)

已有 0 条评论

position: fixed for IE < 7

2007年08月18日 | HTML/CSS

position: fixed for IE < 7

#footer {
	position: absolute;
	bottom: auto;
	clear: both;
	top:expression(eval(document.compatMode &&
		document.compatMode=='CSS1Compat') ?
		documentElement.scrollTop
		+(documentElement.clientHeight-this.clientHeight) - 1
		: document.body.scrollTop
		+(document.body.clientHeight-this.clientHeight) - 1);
}

已有 0 条评论

HTML默认样式

2007年07月31日 | HTML/CSS

http://www.w3.org/TR/CSS21/sample.html

html, address, 
blockquote, 
body, dd, div, 
dl, dt, fieldset, form, 
frame, frameset, 
h1, h2, h3, h4, 
h5, h6, noframes, 
ol, p, ul, center, 
dir, hr, menu, pre   { display: block } 
li              { display: list-item } 
head            { display: none } 
table           { display: table } 
tr              { display: table-row } 
thead           { display: table-header-group } 
tbody           { display: table-row-group } 
tfoot           { display: table-footer-group } 
col             { display: table-column }  
colgroup        { display: table-column-group } 
td, th          { display: table-cell; } 
caption         { display: table-caption } 
th              { font-weight: bolder; text-align: center } 
caption         { text-align: center } 
body            { margin: 8px; line-height: 1.12 } 
h1              { font-size: 2em; margin: .67em 0 } 
h2              { font-size: 1.5em; margin: .75em 0 } 
h3              { font-size: 1.17em; margin: .83em 0 } 
h4, p, 
blockquote, ul, 
fieldset, form, 
ol, dl, dir, 
menu            { margin: 1.12em 0 }  
 
h5              { font-size: .83em; margin: 1.5em 0 } 
h6              { font-size: .75em; margin: 1.67em 0 } 
h1, h2, h3, h4, 
h5, h6, b, 
strong          { font-weight: bolder } 
blockquote      { margin-left: 40px; margin-right: 40px } 
i, cite, em, 
var, address    { font-style: italic } 
pre, tt, code, 
kbd, samp       { font-family: monospace } 
pre             { white-space: pre } 
button, textarea, 
input, object,  
select          { display:inline-block; } 
big             { font-size: 1.17em } 
small, sub, sup { font-size: .83em } 
sub             { vertical-align: sub }  
sup             { vertical-align: super } 
table           { border-spacing: 2px; } 
thead, tbody, 
tfoot           { vertical-align: middle } 
td, th          { vertical-align: inherit } 
s, strike, del  { text-decoration: line-through } 
hr              { border: 1px inset } 
ol, ul, dir, 
menu, dd        { margin-left: 40px } 
ol              { list-style-type: decimal } 
ol ul, ul ol, 
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 } 
u, ins          { text-decoration: underline } 
br:before       { content: "\A" } 
:before, :after { white-space: pre-line }  
 
center          { text-align: center } 
abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em } 
:link, :visited { text-decoration: underline } 
:focus          { outline: thin dotted invert } 
 
/* Begin bidirectionality settings (do not change) */ 
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override } 
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override } 
 
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed } 
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed } 
 
@media print { 
  h1            { page-break-before: always } 
  h1, h2, h3, 
  h4, h5, h6    { page-break-after: avoid } 
  ul, ol, dl    { page-break-before: avoid }

已有 1 条评论

YAHOO的性能分析工具YSlow

2007年07月28日 | HTML/CSS

YSlow 是YAHOO提供的性能分析工具，它会分析页面加载的所有内容，然后根据加速站点的13条军规来给站点页面评分并给出建议。另外还集成了一些小工具。详细请见 YSlow官方站点。

YSlow以Firefox Add-on的形式发布，并集成到Firebug中，安装前一定要先安装Firebug。

下载YSlow

感觉非常好用，除了是E文的……有时间慢慢捣鼓了

已有 0 条评论

2/3«123 »

使用css给图片添加阴影

固宽背景图居中错位的问题

有感于yahoo对css bug的利用：margin重叠

IE 6实现min/max-height/width

display:inline-block

浏览器特定选择器（hack）

修正IE对PNG颜色显示错误的问题

position: fixed for IE < 7

HTML默认样式

YAHOO的性能分析工具YSlow

分类

热门文章

IT技术圈

学习资料

工具

链接

管理登录