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>

CSS开发模式

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

CSS结构图

CSS分为三个部分


  1. Reset
  2. Layout
  3. Mod

CSS Reset : 通用设置,不需要处理.

CSS Layout : 根据设计稿定义的布局定义好整体布局,不频繁改动.

CSS Mod : 各种模块集合.

Reset 和 Layout 作为核心CSS定义.直接影响全局页面展示.所以不轻易进行修改.

Mod 为各个模块的集合.每个模块的CSS只控制模块内部展示,不对外部影响.

CSS关键字列表


由于模块元素的具有很多共同的元素,但是可能表现方式是一致的.所以需要定义一些自身定义的CSS关键字列表.在定义css关键字的类的时候不造成全局影响.

如Author , Title , time 之类的

Mod 开发


每个Mod的相关代码只影响Mod自身,不影响外部展示,比如

html代码:

<div class="mod-a”>
	<span class="img">
		<img src="demo.jpg" alt="" />
	</span>
	<div class="info">
		<a class="title" href="#">item title</a>
		<a class="author" href="#">item author</a>
	</div>
</div>

如果要控制title和author的展示, 使用

CSS代码:

.mod-a .title{
	Color:#f60;
}
.mod-a .author{
	Color:#06f;
}

以用来保持只对mod-a内元素的控制

文件结构


  1. Style.css
  2. Base.css
  3. Mod-a.css
  4. Mod-b.css

Style.css作为一个统一的页面css,加载在页面当中.

Base.css 包含CSS Reset 和 CSS Layout ,作为基本样式

Mod-a.css , Mod-b.css 负责每个mod的样式.由不同的团队成员维护

Style.css包含代码

CSS代码:

@import url("base.css");
@import url("Mod-a.css");
@import url("Mod-b.css");

走有中国特色的网站重构道路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的话:

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

一个简单的css属性获取函数

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

粉简单的代码。自己记录下

javascript代码:

function getStyle(o, a){
    return o.style[a] ? o.style[a] : window.getComputedStyle ? window.getComputedStyle(o, null)[a] : o.currentStyle[a];
}

function $(id){
    return document.getElementById(id);
}

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>
    1. 1
    2. 2