flyingleaf's blog

象外行一样思考，象专家一样实践。

令人哭笑不得的便条

coolbean | 26 十二月, 2007 16:50

给恶心的弟弟：
问你为什么要用5只手指头轮流挖鼻孔时请别回答我说：“每只手指头挖起来各有不同的感觉。”
——小鼻孔姊姊留

给伤心欲绝的老板：
公司会倒，我想跟名字也有一点关系吧？
——惠岛有限公司的员工留

给大眼：
请你不要每次都用很羡慕的口吻对我说：“眼睛小真好，上课打瞌睡都不会被老师发现！好吗？”
——不知道该可悲还是该庆幸的小眼留

给反应很快的阿婆：
那天您坐在公车上，252司机的紧急刹车，您重心不稳冲了出去，竟问司机：“找我有什么事情？”
——觉得你蛮可爱的学生留

给表达不佳的琳：
虽然你的语文能力不好，但请不要离谱地告诉我：“阿琪他爷爷有一次死掉……”
——认为人只能死一次的璇留

给从没捐过血的大牛：
当你收到捐血报告书时，请不要大声嚷嚷，它把你的血打零分（O）而我的血是A！
——被你彻底打败的捐血人小明留

甜咸杂进 | 静态链接网址 | 评论 (23) | 引用 (0)

DIV+CSS布局-- 关于ID和CLASS

coolbean | 13 十二月, 2007 18:34

　　首先，有些东西需要说明一下。对于之前的文章，由于为了让大家更好的区分各层的关系，教程中不少地方使用了大写的CLASS或者ID，其实这样做是不推荐的，我推荐的方法是使用单词之间增加下划线，或者单词拼接的方法。因为CSS是区分大小写的。大家可以看到，我提供给大家的下载文件中全部都是使用小写来处理的。

　　我们先来处理sidebar的样式，经过分析，我们可以得知，sidebar有四个部分，我们将这四个部分分为四个层：
<div id="search"></div>
<div id="login">
<div class="bar_title"></div>
<div class="bar_body"></div>
中国网管论坛

</div>
<div id="infomation">
<div class="bar_title"></div>
<div class="bar_body"></div>
</div>
<div id="standard">
<div class="bar_title"></div>
<div class="bar_body"></div>
</div> (查看全文)

开源文化 | 静态链接网址 | 评论 (12) | 引用 (0)

div+css的浏览器兼容问题

coolbean | 11 十二月, 2007 15:57

  • 水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
  • 垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中;
  • !important标记，Firefox支持!important标记，IE6忽略!important标记;

开源文化 | 静态链接网址 | 评论 (1) | 引用 (0)

CSS：HTML结构化

coolbean | 11 十二月, 2007 15:33

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

 (查看全文)

开源文化 | 静态链接网址 | 评论 (3) | 引用 (0)

纯CSS完美地解决图片在div内垂直水平居中，几乎兼容全部浏览器

coolbean | 11 十二月, 2007 15:04

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
 display:table-cell !important;
 display:block;
 position:static !important;
 position:relative;
 overflow:hidden;
 width:400px;
 height:400px;
 border:1px solid #000;
 vertical-align:middle;
 text-align:center;
}
.img_v p {
 display:table-cell !important;
 display:block;
 margin:0;
 position:static !important;
 position:absolute;
 top:50%;
 left:50%;
 width:400px;
 margin-left:auto;
 margin-right:auto;
}
.img_v img {
 position:static !important;
 position:relative;
 top:auto !important;
 top:-50%;
 left:auto !important;
 left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
  <p><img src="http://haoshenqi.cn/images/logo.gif"></p>
</div>
</body>
</html>

开源文化 | 静态链接网址 | 评论 (1) | 引用 (0)

 
Accessible and Valid XHTML 1.0 Strict and CSS
Powered by LifeType - Design by BalearWeb