<![CDATA[风吹草动]]> http://58589584.qzone.qq.com Sat, 28 Nov 2009 22:01:53 GMT Qzone zh-cn Copyright (C), 2005-2008, Tencent Tech. Co., Ltd. Sun, 15 Nov 2009 03:28:00 GMT <![CDATA[浏览器默认样式]]> http://58589584.qzone.qq.com/blog/1258255680
IE默认为10PX，通过body的margin属性设置

FF默认为8PX它，通过body的padding属性设置

解决方法：

body{padding:0;margin:0;}

2.段间距：

IE默认为19px,通过p的margin-top、margin-bottom属性设置,

FF默认为1.12em,通过p的margin-top、margin-bottom属性设置,

解决方法：

p{margin-top:0;margin-bottom:0}

3.标题样式：

h1-h6:font-weight:bold;

解决方法：

hx{ font-weight:normal; font-size:value;}

4.列表样式：

IE默认为左缩进40px,通过ul,ol的margin属性设置

FF默认为左缩进40px，通过ul,ol的padding属性设置

dl无缩进;但其内部的dd默认为左缩进40px，而名称元素dt没有缩进。

解决方法：

ul,ol,dd{list-style-type:none;margin-left:0;padding-left:0;}

5.元素居中：

IE默认为text-align:center;

FF默认为margin-left:auto;margin-right;auto;

6.超链接样式：

清除链接样式：

a{text-decoration:none;color:#colorNmae;}

8.图片链接样式：

IE默认为紫色2px的边框;

FF默认为蓝色2px的边框;

解决方法：img{border:0} ]]> http://58589584.qzone.qq.com/blog/1258255680#comment 134218240 Sun, 15 Nov 2009 03:28:00 GMT http://58589584.qzone.qq.com/blog/1258255680 <![CDATA[div高度随窗口变化而变化]]> http://58589584.qzone.qq.com/blog/1257068455 其实他是指DIV的高度。简写了一下，感觉不是很实用。不过在某些特殊页面中，有一定的作用。
　　可以在IE6、IE7与FF中，自由的调整浏览器窗口的高度。即可看到DIV高度上的变化。

<!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" />
<title>CSS网页布局实例：div高度随窗口变化而变化</title>
<style>
* {margin:0px;}
html {height: 100%; }
body {height: 100%; }
div { margin:0 auto;}
#top { width:800px; min-height:100%; background-color:#00f;}
*html #top {height:100%; background-color:#f00;}
*html body {height:100%; }
#topz{ width:800px; height:60px; background:#ddd;}
#topx{ width:800px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div id="top">
52CSS & W3Cbbs - CSS学习班 本学习班培训，不收任何费用，学习成果在于你自己的努力。
</div>
<div id="topz">
<h1><a href="http://52css.com">我爱CSS DivCSS教程 - 52CSS.com</a><h1>
</div>
<div id="topx">
<h2><a href="http://w3cbbs.com/">DivCSS网页布局 W3C标准 - W3Cbbs.com</a></h2>
</div>
</body>
</html> ]]> http://58589584.qzone.qq.com/blog/1257068455#comment 134218240 Sun, 01 Nov 2009 09:40:55 GMT http://58589584.qzone.qq.com/blog/1257068455 <![CDATA[多种清楚浮动方法--推荐查看]]> http://58589584.qzone.qq.com/blog/1256786596 清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了，下一个专题再写)。先查看下代码DEMO
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="zh-cn"http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="Description" content="腾讯webteam是一个设计团队，即腾讯互联网业务系统网站组，腾讯webteam关注于网站产品的体验设计，包括网站的可用性、视觉风格以及网页重构。“让我们的互联网服务像水和电一样融入到人们的生活当中”，是我们的梦想，距离目标还有很长的路要走，至今我们仍在不懈的努力，如果你愿意，欢迎和我们一起。" />
<meta name="Keywords" content="webteam,blog,tencent design,tencent gui,tencent hci,tencent team,ISD,isd,腾讯ISD,腾讯设计,腾讯视觉设计,腾讯交互设计,腾讯设计团队,腾讯网站组,腾讯网站团队,腾讯网页制作,网页重构,重构,QQ设计,QQ设计团队,QQ视觉设计,QQ交互设计,QQ网页制作" />
<meta id="author" content="Tencent ISD Webteam" />
<meta id="Copyright" content="Copyright 1998-2009 Tencent Inc. All Rights Reserved" />
<title>全方位清理浮动</title>
<style type="text/css">
/*<![CDATA[*/
ul {
list-style:none;
margin:0;
padding:0;
background-color:#A9CE78;
}
li {
float:left;
width:40px;
height:40px;
background-color:#66C7F7;
padding:5px;
margin-right:2px;
color:#FFF;
font-family:"Arial Black";
}
.demo {
width:800px;
}
.demo div {
border:2px solid #FF6767;
background:#FF6767;
margin-bottom:5px;
}
#after ul{
zoom:1;
}
#after ul:after {
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
#afterout div:after {
content:"";
display:block;
height:0;
line-height:0;
clear:both;
visibility:hidden;
}
h1 {
color:#66C7F7;
font-family:"Arial Black";
margin:0;
padding:0;
font-size:20px;
clear:both;
}
h2 {
color:#66C7F7;
font-family:"Arial Black";
margin:0;
padding:0;
font-size:16px;
clear:both;
}
#brcssclear div{
zoom:1;
}
#brpropertyclear div{
zoom:1;
}
#cssoverflowauto ul {
overflow:auto;
zoom:1;
}
#cssoverflowhidden ul {
overflow:hidden;
zoom:1;
}
#cssdisplaytable ul {
display:table;
zoom:1;
}
#cssoverflowautoout div{
overflow:auto;
zoom:1;
}
#cssoverflowhiddenout div{
overflow:hidden;
zoom:1;
}
#cssdisplaytableout div{
display:table;
zoom:1;
}
.cleardiv{
zoom:1;
}
#brcssclear br.clear,
#divcssclear div.clear{
clear:both;
height:0;
line-height:0;
margin:0;
padding:0;
border:0;
overflow:hidden;
}
/*]]>*/
</style>
</head>
<body>
<h1>Cealr Fix Layout</h1>
<div id="after" class="demo">
<h2>Css :after</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssoverflowauto" class="demo">
<h2>Css overflow:auto</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssoverflowhidden" class="demo">
<h2>Css overflow:hidden</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssdisplaytable" class="demo">
<h2>Css display:table</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="divcssclear" class="demo">
<h2>Div css clear</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="brcssclear" class="demo">
<h2>Br css clear</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<br class="clear" />
</div>
</div>
<div id="brpropertyclear" class="demo">
<h2>Br property clear</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<br clear="all" />
</div>
</div>
<div id="normal" class="demo">
<h2>Normal</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="afterout" class="demo">
<h2>Css :after out</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssoverflowautoout" class="demo">
<h2>Css overflow:auto out</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssoverflowhiddenout" class="demo">
<h2>Css overflow:hidden out</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
<div id="cssdisplaytableout" class="demo">
<h2>Css display:table out</h2>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------
  1. 采用伪类:after进行后续空制的高度位零的伪类层清除
  2. 采用CSS overflow:auto的方式撑高
  3. 采用CSS overflow:hidden的方式产生怪异适应
  4. 采用display:table将对象变成table形式
  5. 采用div标签，以及css的clear属性
  6. 采用br标签，以及css的clear属性
  7. 采用br标签，以及其自身HTML的clear属性
粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）
  1. 优点结构语义化完全正确，不会产生其余的怪异问题。
    缺点复用方式不当容易造成代码量急剧增大。
    建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。
  2. 优点结构语义化完全正确，代码量极少。
    缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。
    建议内个模块使用，请勿嵌套。
  3. 优点结构语义化完全正确，代码量极少。
    缺点内容增多时候极易不会自动换行而内容被隐藏掉。
    建议宽度固定时使用，请勿嵌套。
  4. 优点结构语义化完全正确，代码量极少。
    缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
    建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
  5. 优点代码量极少，复用性极高。
    缺点完全不能完美的适应语义化，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  6. 优点语义化程度比第5种情况要更优；代码量极少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议初学者使用，可以让你快速的解决浮动问题。
  7. 优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
    缺点语义化依旧不完美，不利于改版以及需求变更。
    建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
]]> http://58589584.qzone.qq.com/blog/1256786596#comment 134218240 Thu, 29 Oct 2009 03:23:16 GMT http://58589584.qzone.qq.com/blog/1256786596 <![CDATA[精选30个优秀的CSS技术和实例]]> http://58589584.qzone.qq.com/blog/1255421527 30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。
单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。1.Hoverbox 图片集一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。
2.高级CSS菜单一款很有创意且复杂的CSS导航方案。
3.滑动影集手风琴效果的影集，悬停便可拉伸图片。
4.Lightbox幻灯片题为”Supercharge your image borders“的文章中的一部分展示了如何使用CSS样式让图片变得更有意思。
5.图片的阴影效果在A List Apart上的一个关于图片效果Demo的讨论文章“CSS Drop shadows“.
6.跨浏览器多页式影集悬停标签改变分类，悬停缩略图显示放大图。
7.CSS照片放大使用简单的图片和background-position属性来进行调解。
8.CSS gallery layout—smells like a table模仿表格布局，但使用的是列表。图集是流式宽度。
9.Sticky Footer仅使用了很少XHTML的静态页脚。
10.whatever: hover模仿Windows开始菜单的CSS导航菜单。
11.纯CSS手风琴效果使用div和:hover伪类的手风琴效果，这个效果可以垂直显示也可以水平显示。
12.使用PNG和背景色的可扩展按钮
13.Pushbutton Links链接在不使用图片的情况下看起来像个按钮。
14.含固定Header的可卷动表格表格的标题被固定的优秀长表格。
15.CSS内容遮盖当你悬停在图片上时，div容器会显示更多文字。
16.CSS样式表格版本2一个使用背景图片且非常漂亮，被语义化标记的表格。
17.PNG遮盖另一种为图片添加圆角的方法。（圆角、边框、阴影）
18.利用CSS为超链接添加提示关于为不同类型的链接添加图标的简单教程。
19.简单的CSS圆角边框仅适用了一张图片和很少的几行代码及标记。
20.Sitemap Celebration使用嵌套列表的树形导航，很适合网站地图页面。
21.简单的跨浏览器幻灯片不使用JavaScript实现透明度技巧（但是以不符合XHTML验证为代价）
22.圆角2流式跨度和高度的圆角div。
23.使用背景图片百分比来创建图表条线图使用列表<li>。
24.CSS柱状图:实例3款柱状图实例:使用div和列表标签的”基本CSS柱状图”、”复杂CSS柱状图”、”垂直CSS柱状图”。
25.动态翻转简单头箭头会平滑的跟随鼠标移动，没有使用一丁点JavaScript和gif动画。
26.基于CSS的表单模板
27.CSS图片文本结合技巧使用了空白div来让文本能围绕背景图中的图像显示。
28.使用CSS实现淡入效果的图片这个实例使用透明度设置和简单的图片逐渐在文字上方淡入图片。
29.纯CSS弹出效果一个在IE5(Mac)上也能正常工作的弹出技巧。
30.使用CSS实现文本渐变效果使用背景图片遮盖，和一个空的span标签，还有position: absolute声明来实现文本的渐变效果。
原文:30 Exceptional CSS Techniques and Examples ]]> http://58589584.qzone.qq.com/blog/1255421527#comment 134218241 Tue, 13 Oct 2009 08:12:07 GMT http://58589584.qzone.qq.com/blog/1255421527 <![CDATA[会触发hasLayout 的一些元素]]> http://58589584.qzone.qq.com/blog/1255225425 默认layout元素
下列元素应该是默认具有 layout 的：<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <select>, <textarea>, <button> <iframe>, <embed>, <object>, <applet> <marquee>

-----------------------------------------------------------------------------------
属性
下列 CSS 属性和取值将会让一个元素获得 layout：position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
float: left|right
由于 layout 元素的特性，浮动模型会有很多怪异的表现。
display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果——让某个元素拥有 layout。“inline-block行为”在IE中是可以实现的，但是非常与众不同： IE/Win: inline-block and hasLayout http://www.brunildo.org/test/InlineBlockLayout.html。
width: 除 “auto” 外的任意值
很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。
height: 除 “auto” 外的任意值
height: 1% 就在 Holly Hack 中用到。
zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp
MS专有属性，无法通过校验。 不过 zoom: 1 可以临时用做调试。
writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp
MS专有属性，无法通过校验。

在 IE7 中，overflow 也变成了一个 layout 触发器：
overflow: hidden|scroll|auto
这个属性在之前版本 IE 中没有触发 layout 的功能。
overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。

另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。
position: fixed
./.
min-width: 任意值
就算设为0也可以让该元素获得 layout。
max-width: 除 “none” 之外的任意值
./.
min-height: 任意值
即使设为0也可以让该元素的 haslayout=true
max-height: 除 “none” 之外的任意值
./.

以上结论借助 IE Developer Toobar 以及预先测试得出。
有关内联级别元素
对于内联元素(可以是默认即为内联的比如 span 元素，也可以是 display: inline 的元素)
width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于 IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height 不能在此种情况下令该元素具有 layout。
zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

具有“layout” 的元素如果同时也 display: inline ，那么它的行为就和标准中所说的 inline-block 很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align 影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中 display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。
脚本属性 hasLayout
我们这里称 hasLayout 为“脚本属性”是为了和我们熟知的 CSS 属性相区别。
注意一旦一个元素拥有了 layout，就没有办法再将其设成 hasLayout = False 了。
hasLayout-property http://msdn.microsoft.com/worksh ... rties/haslayout.asp可以用来检测一个元素是否拥有 layout：举个例子，如果它的 id 是“eid”，那么只要在 IE5.5+ 的地址栏里输入 javascript: alert(eid.currentStyle.hasLayout) 即可检测它的状态。
IE的 Developer Toolbar http://www.microsoft.com/downloa ... &displaylang=en可以实时检查一个元素的当前样式；如果 hasLayout 是 true ，那么它的值显示为 “-1”。 我们可以通过实时修改一个元素的属性将“zoom(css)”设置为“1”来触发 hasLayout 以便调试。
另外一个需要注意的是“layout”会影响脚本编程。如果一个元素没有“layout”，那么clientWidth/clientHeight 总是返回0。这会让一些脚本新手感到困惑，而且这和 Mozilla 浏览器的处理方式也不一样。不过我们可以利用这一点在 IE5.0 中检测“layout”：如果 clientWidth 是零那么这个元素就没有 layout。
]]> http://58589584.qzone.qq.com/blog/1255225425#comment 134218240 Sun, 11 Oct 2009 01:43:45 GMT http://58589584.qzone.qq.com/blog/1255225425 <![CDATA[清楚浮动布局的常用方法]]> http://58589584.qzone.qq.com/blog/1255141218 针对非 IE 浏览器：

.yui-gf:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
而对于 IE 浏览器，使用了 zoom:1 来触发 haslayout ]]> http://58589584.qzone.qq.com/blog/1255141218#comment 134218240 Sat, 10 Oct 2009 02:20:18 GMT http://58589584.qzone.qq.com/blog/1255141218 <![CDATA[快速定位页面中复杂 CSS BUG 问题]]> http://58589584.qzone.qq.com/blog/1255141097 1、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。
2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。
对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。
3、模块确认法
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。
4、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。
5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）
快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。
6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^
最后想给大家强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。希望大家远离 BUG ，生活越来越美好。 ]]> http://58589584.qzone.qq.com/blog/1255141097#comment 134218240 Sat, 10 Oct 2009 02:18:17 GMT http://58589584.qzone.qq.com/blog/1255141097 <![CDATA[修正IE下使用CSS属性overflow的bug]]> http://58589584.qzone.qq.com/blog/1255136893 你或许知道IE在使用 CSS 属性 overflow 时，有一些bug，请允许我在里重述一下。
我们要建立一个测试用HTML文件，以下是关键的代码片断
<div> <pre><code> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> <a href="http://creativecommons.org/licenses/by-nc-sa/2.5/cn/" rel="license">遵守我的版权</a> </code></pre></div>
在以上代码中我将应用以下CSS
div{ width: 60%;}pre{ overflow : auto ; background-color : #fff0f5 ; margin : 1.6em 0 ; padding : 0 1.6em ;}
以上代码在Firefox中的显示是可以预料的。
但是在IE6中，没有任何 overflow 效果能够显示出来
图1 IE6下的效果
而在IE7中的显示也有些不同，多了一个惹人讨厌的右侧滚动条
图2 IE7下的效果
IE6的bug可以通过给containing block添加width的方法解决，即

pre{ overflow : auto ; background-color : #fff0f5 ; margin : 1.6em 0 ; padding : 0 1.6em ; width : 90% ;}

此时，IE6的滚动条出来了，但是它与IE7表现的一样，多了一个右侧滚动条。
多一个右侧滚动条的原因在于：IE总是将底部滚动条添加在元素的总高度的内部，这样使得元素的一部分高度被底部滚动条占据，不能完全显示，所以IE就自动添加了右侧滚动条使得元素被挡住的内容也能够滚动后看到 。
最后为了去除IE右侧的滚动条，我们给containing block添加以下CSS

pre{ overflow : auto ; background-color : #fff0f5 ; margin : 1.6em 0 ; padding : 0 1.6em ; width : 90% ; overflow-y : hidden ;}

这样我们就在IE中创造出了和Firefox、Opera和Safari同样的 overflow : auto 效果。
在实际应用中，这一效果可以应用于所有固定格式的元素（通常为 pre 元素），最常见的是代码块。 ]]> http://58589584.qzone.qq.com/blog/1255136893#comment 134218241 Sat, 10 Oct 2009 01:08:13 GMT http://58589584.qzone.qq.com/blog/1255136893 <![CDATA[化龙巷站点研究发展方案]]> http://58589584.qzone.qq.com/blog/1255066051 发展时间：3年
发展方向：垂直型地方社区门户
站点URL：http://www.hualongxiang.com/

概述：化龙巷是一个以地方垂直型社区型地方门户发展的典型例子。这种圈地式发展例子比较相近的有“杭州19楼”。主要是从3个方面来发展。
1. 建立品牌关键词（化龙巷），建立品牌关键词非常重要，首先选择这个关键词在于结合域名、站点名称、和站点设计安排 3项特色。主要目的是为了让用户更容易记住和理解这个网站。
例子：品牌关键词“化龙巷”，域名取化龙巷３字的拼音（hualongxiang）容易记，第二你必须要让用户熟悉并且了解该名词，那么就以巷单位来建立一个社区，比如：1号巷子 龙城美食 2号巷子 房产楼市 等等。这样页面设计和布局就更容易让用户懂得并且理解化龙巷的含义并且印象深刻被记住了。

2. 垂直型发展优势，其实就是所谓的站点定位，我们都知道，如果一个站点仅仅是利用一些新闻或者没有优势，吸引不到用户的方面去制作门户的话很难发展并且找到属于自己的站点用户群体。化龙巷的优势在于，他定位非常细。刚建立站点的时候就3个方面的定位。他的选择和定位是根据常州的生活水平和特色来定位25-30左右的年轻人消费需求最大的3个方面。（1）房子 （2）车子 （3）结婚 我们知道，这个年龄段的人最的消费能力是最强的，讨论的最多的也就是购房，购车，结婚3个问题，那么如果把这些需求放进社区建立这样的圈子让大家自然讨论，这样就会快速形成固定增长的群里效应。因为你找到了其中的用户群体需求，所以你便拥有的用户群体。
3. 地区性站点消费类站点优势明显。这是本地社区的一个根本性的好处，当站点建立流量了，接下来的发展非常清晰，针对性的操作广告了，因为地区性用户群体的质量，针对性都是非常高的。因为都是属于本市的广告商来对应本市的需求人群，比如旅游、汽车经销商、婚纱等等消费类的。所以广告商是非常愿意投放的。就常州地区，化龙巷08年一年的广告业务是500万，09年预计达到1000万。


4． 针对性推广，根据常规的优化手段和组织社区会员线下活动，在本地区拓宽社区影响力 和知名度。常规优化手段是针对本地方的一些新闻性流量高的地方站点进行广告投放和搜索引擎的地区关键词优化。来提升第一批人群入住社区，根据地区消费人去来进行推广，比如：利用手机群发短信推广社区信息、本地区QQ邮箱群发、QQ群结合社区推广等手段来进行 前期大量的推广。
]]> http://58589584.qzone.qq.com/blog/1255066051#comment 134218240 Fri, 09 Oct 2009 05:27:31 GMT http://58589584.qzone.qq.com/blog/1255066051 <![CDATA[说说地方网站的操作手法（实战）]]> http://58589584.qzone.qq.com/blog/1255061761

对于这个我非常认同，感觉他这朋友非常非常的懂得互联网。个人认为，无论是社区还是资讯类的门户，尤其是社区，归属感尤其重要。另外，我建议不要做资讯，资讯这个东西是毒药，累且互动性差，完全可以通过论坛帖子的方式来展现。当然，如果你要像门户那样卖广告，也不妨留下一个资讯类东栏目，虽然不会有什么人看，但对广告主的感觉会比较好。


归属感做什么呢？本地的新闻？一年没有几个的。本地的特产?你会发现，网上已经有无数个了。那什么呢？本地的图片!学校啊，电影院啊，大的工厂啊，马路啊，乡村啊，图片配文章，到处拍，到处贴。人都是怀旧的，都是有归属感的，而地名就是这个归属感的轴。这个轴会圈起很多人，而这些人会有更多的交流。



2.地方网站做什么？上面说了，我的建议是社区，以后什么网站的核心都会是社区，像19楼啊，厦门小鱼啊这样的，柴米油盐，生活情感什么的都可以。但要做影响力，最好还是要做一些社会热点事件，这样的热点事件不是说非要大到什么程度，越是细小的，天天常见的，就是越容易热门的。例如某个十字路口红绿灯的时间的长短这样的就是事实的热门。这方面，小地方可以看百度贴吧的泊头吧，大点的地方可以看海南在线的海南发展论坛。这个地方的一个建议就是多和本地的媒体合作，这花不了多少钱，但做这样的事件的时候，这些媒体的价值很大。



除了这些热门事件外，网友们会喜欢什么样的帖子呢，我在搜狐的时候，做社区用的方法就是埋种子。在IT里面，华为是种子，只要谈华为，多方几个这方面的帖子，立马会有大量的人来跟。在国际版，印度就是种子，韩国就是种子，放大量这样的文章，就会形成一片的人来骂，来吵。在情感，小三就是种子，只要小三一出现，女人们就大把的冲上前。那么在地方一样，也要找到当地的种子。在奇虎的时候，我做社区发现的另一点就是万能贴，也就是只要放上，10个人看就有3个人会回的贴。如果细心的话，你在大部分百度贴吧里都可以发现这些贴，不过万能贴最全的地方是51的问答广场。51问答广场我以后会专门写篇博客说说，也是个非常神奇的东西。



另外，地方网站需要做的还有不时的聚会，还要有无数个qq群。泡与被泡，永恒的话题啊。



3.地方网站哪些地方可以赚钱？广告大家都在用，我就不说了，我就先提一个我亲自参与和验证过的吧。2001年，互联网真正的寒冬。968（天涯老板邢明）的海南在线却在反其道而行之，不但没裁员还在大肆扩张，我身边坐的就有来自TOM的，新浪的，还有一个说是foxmail张小龙的助手。天涯？那时候虽不能说是在襁褓中，但肯定是在婴儿期，基本没有收入。很难想象，海南在线第一个赚钱的栏目居然是招聘（域名 网吧 做网站那样的业务不算的话）。



操作手法呢，其实也很简单。就是拿着海南日报和海口晚报，看到招聘广告就一个个字的录入（好像没有用扫描仪），录完后给招聘方打个电话，我们是海南在线的，现在免费给您录入了您的招聘广告，如果有人来面试，帮忙问下他是从哪看到的招聘启事。3个月后，就有钱开始进来了，一个200，300的，都是我们骑着摩托车过去拿，大概6个月后，就有半年半年交的了，招聘广告也不要自己录了，钱也不要自己去拿了，再后来，招聘成了海南在线最稳定的赚钱项目之一了。类似的，地方的分类信息同样可以赚钱，而且这部分钱也不会少，细节就不说了。



至于广告的话，哪些公司会投广告，会投什么样的广告，大家可以学学19楼，我也不多说了。



4.怎么做影响力。如果有钱，建议在最好的地方买一个最大的广告位，或者在人最多的地方买一个好的广告位。小地方几乎见不到互联网广告的（甚至可以说出了北上广深杭外，都很少有互联网公司的户外广告），如果51没有在那做的话。钱不是很多的话，那就多累点，回到第一点，多拍照，拍照总比写东西容易，而且每一个照片都会不一样，哪里出去的人多久拍哪，这个很重要。



5. 再说一个偏门但绝对有效的方法。如果当地有棋牌的地方打法，建议做这么一个在线的地方打法棋牌游戏，看看淮安的掼蛋你就知道了，这个东西是一个地域文化的魂。虽然我不会打除跑得快和五十k之外的任何牌（升级都不会），但这个东西真真切切可以将一个地方的人串联起来。而且更重要的是，这个东西能将很多本地出来的在外面上学工作的人穿起来，事实上，在外地的本地人一直是地方论坛里最活跃的一群人。另外，不要忘记的事，现在的公务员都能上网，他们比我们更无聊，做地方网站，怎么能忘记咱们的伟大公仆呢。说的够多的了，另外，请大家帮忙加上打工123、看qq加密相册，上帝也装机和周博通的友情链接，算是对我说的这些干货的支持 ]]> http://58589584.qzone.qq.com/blog/1255061761#comment 134218240 Fri, 09 Oct 2009 04:16:01 GMT http://58589584.qzone.qq.com/blog/1255061761