Rekey's WebSpace

Just So So ...

Home Develop Life Music News 关于

奇异的代码一段.

作者：Rekey 发布时间：August 5, 2010 分类：Develop

大家用稍微牛逼点浏览器去测试下这段代码吧.CSS还是很牛逼的.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#a{width:100px;height:100px;border:1px solid #666;background:#ccc;}
#b{width:100px;height:100px;border:1px solid #333;background:#666;margin:10px}
#a:hover + #b{
    background:#eee;
}
</style>
</head>

<body>
<div id="a">aaa</div>
<div id="b">bbbb</div>
</body>
</html>

走有中国特色的网站重构道路2

作者：Rekey 发布时间：April 22, 2010 分类：Develop

标题跟twinsen的走有中国特色的网站重构道路一样,实际上,一切都是幻觉,我要说的是另一件事情

引用下twinsen的言论先:

<div class="f14 cf60 fright">xxx</div>
肯定是14px大小 颜色f60
然后不改动html的时候改变样式，呵呵，SB了

他的言论其实是个引子,因为现在很流行这种开发方式

css代码:

.f14{
  font-size:14px;
}
.cf60{
  color:#f60;
}

html代码:

<div class="f14 cf60">14px的文字大小,颜色值是#f60</div>

于是乎,写html代码就真的变成了累积木的举动了.
大家一起高呼,哇,原来重构就这么容易啊.
等到某天.需要把某个div的颜色换成#333,傻逼了.这怎么改.改html.
顺便让asp,php,jsp,asp.net等各种程序员改改程序页面.
我举这么个例子不是想说这种思想错误.

只是我想突然想到一个问题.能不能换一种思维来想这个事情,尽管可能现在做不到.
以下代码是从未在css里出现过的..

诡异的CSS代码:

.f14{
  font-size:14px;
}
.cf60{
  color:#f60;
}
.mod{
  include: .f14 , .cf60;
}

并不诡异的html代码:

<div class="mod">14px的文字大小,颜色值是#f60</div>

这种方式我称之为零件式开发.
很简单,做一些.f14,.cf60之类的小零件,然后让模块(也就是.mod之类)在css中包含,然后体现在表现当中.
这样做,是否可以继续累积木,但是又不会累出问题呢?

再次引用twinsen的话:

时刻铭记你不是一个“页面仔”，是一个重构工程师；或者更进一层，你在影响人类信息化社会的发展。

IE6模拟position:fixed效果

作者：Rekey 发布时间：August 28, 2009 分类：Develop

不会抖动，但是使用了expression，很糟糕。
纯保存。
源代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<meta name="keywords" content="关键字" />
		<meta name="description" content="页面简介" />
		<meta name="generator" content="程序" />
		<meta name="author" content="作者[ReKey]" />
		<meta name="copyright" content="版权所有[ReKey]" />
		<meta name="MSSmartTagsPreventParsing" content="True" />
		<meta http-equiv="MSThemeCompatible" content="Yes" />
		<title>Untitled Document</title>
		<style type="text/css">
			body{margin:0;padding:5px 0 30px}
			.test{border:1px solid #ccc;line-height:100px;margin:0 5px 5px;}
			.fixed{position:fixed;bottom:0;left:15px;right:15px;height:30px;line-height:30px;background:#ccc;}
			#iefixed{zoom:1;margin:-1px 15px 0;height:1px;overflow:hidden;}
		</style>
		<!--[if lt IE 7]>
        <script type="text/javascript">
            function _fixBackground(){
				var body = document.body;
				var BLANK_GIF;
                if (body.currentStyle.backgroundAttachment != "fixed") {
                    if (body.currentStyle.backgroundImage == "none") {
                        body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
						body.runtimeStyle.backgroundAttachment = "fixed";
                    }
                }
            }
			window.onload = function(){
				_fixBackground();
				}
        </script>
        <style type="text/css">
        	.fixed{position: absolute;
    		bottom:0;
    		clear: both;
			width:expression(document.getElementById('iefixed').clientWidth);
			left:expression(document.getElementById('iefixed').offsetLeft);
    		top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop
        +(documentElement.clientHeight-this.clientHeight)
        : document.body.scrollTop
        +(document.body.clientHeight-this.clientHeight));}
        </style>
	< ![endif]-->
	</head>
	<body>
		<!--[if lt IE 7]><div id="iefixed"></div>< ![endif]-->
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="test">增加高度的</div>
		<div class="fixed">这里是position:fixed部分.</div>
	</body>
</html>

纯CSS实现2个div等高

作者：Rekey 发布时间：August 28, 2009 分类：Develop

很简单的实现.利用div的边框来模拟另外一个div的背景.这样就能通过一个视觉差别让人感觉2个div等高

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>纯CSS2列变态等高</title>
</head>
<div style="border-right:solid 180px #f00;zoom:1;background:#000;color:#fff">
    <div style="width:180px;float:right;position:relative;right:-180px;">
        右边的
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
    左边的
    <div style="clear:both;height:0;overflow:hidden;">
    </div>
</div>

</html>
    1. 1