- 浏览: 224100 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
本文转载于:http://www.twinsenliang.net/skill/20081109.html
首先这是一篇让你知其所以然的文章,如果你不了解栅格化你应该看看,如果你很了解栅格化你更加应该看看。
事情的起因:
今天帮跑去跟小组争取福利,和领导谈话。
我说小组对于那种虚名的表扬最近不太感冒,最好来点实质的奖励。
他就说什么技术提升之类远景什么的,让大家为了理想去工作。
我说我们组总体水平已经是重构界最强了的哦。
他就问我知道什么是栅格化么?不知道怎么谈业界最强。
我无言……
我这样对技术沉溺到BT的人,又怎会允许自己在技术上的无知呢?……于是回到座位,查了一下,找到了些业界的文章。
网页栅格系统研究(1):960的秘密 http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/
网页栅格系统研究(2):蛋糕的切法 http://ued.taobao.com/blog/2008/10/22/
网页栅格系统研究(3):粒度问题 http://ued.taobao.com/blog/2008/10/28/
网页栅格系统研究(4):技术实现 http://ued.taobao.com/blog/2008/11/05/grid_system_research_/
网页的栅格系统设计: http://www.vvsoo.com/article/19.htm
我的栅格系统实现: http://www.gracecode.com/Archive/Display/2363
栅格化……
qzone的“栅格化”……四年前就开始了……鬼都不知道那叫“三格”(其实正确的说那个应该叫做网格),我还以为山木的弟弟呢……
引用平面设计导论
5、网格式结构布局。
网格系统是现代国际上普遍使用的一种版面构成方式。勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。 近三十年来,越来越多的平面设计家开始熟练使用网格这种技巧与自由灵活的方式相结合,根据主题与设计的需要,集条理与活泼于一体。
x=小模块宽度
y=模块的间距
z=大模块宽度
m=大模块宽度等同于小模块宽度的个数
w=总宽度
根据qzone的实际状况(z=x*2+y)得三元一次方程式如下:
w=x*4+3*y
推得
w=z*2+y
根据这个才会得到qzone现在的这样的比例。
我们现在按照实际要求(z=x*m+y)基础推理得总宽度不定情况下,假定需容纳小宽度模块n个得
w=x*n+(n-1)*y
同理推得
w=z*Math.floor(n/m)+(Math.floor(n/m)-(n%m-1))*y+x*(n%m)
使用穷举的程序如下(简单的算法想不到,我高数没学好):
function DOG(){//最搞笑的是这里的缩写居然是DOG……
//Deletion of grid
//m=大模块宽等同于小模块宽度的倍数
//x=小模块宽度
//y=模块的间距
//z=大模块宽度
//w=总宽度
mm=3;//设定默认对比倍数,qzone的为2;
mmax=1002;//最大像素
my=5;
for (var mx=my+1;mx<mmax;mx++){
mz = mx*mm+(mm-1)*my;
for (var mn=3;((mn*mx)<=mmax) || (mn*my)<mmax;mn++){
mw=mz*Math.floor(mn/mm)+(Math.floor(mn/mm)+(mn%mm)-1)*my+mx*(mn%mm);
if ((Math.floor(mw)==mw) && (mw<=mmax) && mw>900 && 3<mn && mn<10 && mx>150){
document.write(mw+"="+mz+"*Math.floor("+mn+"/"+mm+")+(Math.floor("+mn+"/"+mm+")+("+mn+"%"+mm+")-1)*"+my+"+("+mn+"%"+mm+")*"+mx+"<br />");
document.write("小模块宽度:"+mx+";");
document.write("模块的间距:"+my+";");
document.write("大模块宽度:"+mz+";");
document.write("全是小模块的话个数为:"+mn+";")
document.write("总宽度:"+mw+"<br />");
}
}
}
}
DOG();//运算时间小于15秒,可以接受。
上例已经按照最佳状态进行筛选n选3以上,总宽度选定为900以上,全是小模块的话小于10个,最小的小模块宽度大于150;之后可以得到一个详尽的列表。
Twinsen这里只选取其中随便几个。
1002=600*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*3+(5%3)*198
小模块宽度:198;模块的间距:3;大模块宽度:600;全是小模块的话个数为:5;总宽度:1002
1001=750*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*3+(4%3)*248
小模块宽度:248;模块的间距:3;大模块宽度:750;全是小模块的话个数为:4;总宽度:1001
然后又根据网站布局的可三可二原则(即小模块的个数应当为6时)以及两大一小原则(即小模块的个数应当为5时)以及一大两小原则(即小模块的个数应当为4时)同时
得到相同的答案950
950=950*Math.floor(3/3)+(Math.floor(3/3)+(3%3)-1)*7+(3%3)*312
小模块宽度:312;模块的间距:7;大模块宽度:950;全是小模块的话个数为:3;总宽度:950
950=711*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*6+(4%3)*233
小模块宽度:233;模块的间距:6;大模块宽度:711;全是小模块的话个数为:4;总宽度:950
950=568*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*5+(5%3)*186
小模块宽度:186;模块的间距:5;大模块宽度:568;全是小模块的话个数为:5;总宽度:950
950=473*Math.floor(6/3)+(Math.floor(6/3)+(6%3)-1)*4+(6%3)*155
小模块宽度:155;模块的间距:4;大模块宽度:473;全是小模块的话个数为:6;总宽度:950
以及7等分原则
950=402*Math.floor(7/3)+(Math.floor(7/3)+(7%3)-1)*9+(7%3)*128
小模块宽度:128;模块的间距:9;大模块宽度:402;全是小模块的话个数为:7;总宽度:950
以及9等分原则
950=314*Math.floor(9/3)+(Math.floor(9/3)+(9%3)-1)*4+(9%3)*102
小模块宽度:102;模块的间距:4;大模块宽度:314;全是小模块的话个数为:9;总宽度:950
还有11等分原则
950=254*Math.floor(11/3)+(Math.floor(11/3)+(11%3)-1)*7+(11%3)*80
小模块宽度:80;模块的间距:7;大模块宽度:254;全是小模块的话个数为:11;总宽度:950
大家可以明显地看到这里和UED得出的结论一样都是950,但是Twinsen一点都不赞同UED的分析方式。这里有几点很想说明一下的:
首先是这个名称的问题,别人明明就是叫做网格,干嘛死活要搞个名词出来作为自己研究的成果。别人《超越CSS》里面写的也是”网格“,硬是将别人的内容变成栅格化。简直就是对笔者莫大的侮辱。
其次是强拉硬扯的典故和经典。“勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。”……2n*3*5……神奇的数字……确实是神奇了,别人用的是黄金分割:”根号5减1除以2(0.6180339)“;用一个无理数算出一个极其有规律的自然数,我都觉得神奇。(看来某人不单设计没学好,数学也没学好……)也就是为什么上面的例子使用的是穷举,我实在想不到更好的办法……。再说那篇文章里面提到的黄金分割也不赞同,因为很牵强;比如我分的格是1px,我就不信搞不出比你更能适应更能黄金的两个块出来。
第三其实早前我们小组在研究YUI的时候,很不赞同他们的构想。如果我们使用这样固定的宽高大小比例(最可恶的是谁限定了间距一定为那么死老粗的10px),那么请问我们要设计师来干嘛?剩下的也就是定定颜色,画画小图标做做广告图而已了。
第四所谓的栅格化某种程度上面来讲只是一群偷懒的页面仔省事的办法而已。定死了一个个的块以后,直接的套用固有的CSS去完成需求(达不成结构与表现分离);只要一有设计师不使用这套东西就被灌上:“不栅格化”的名头。损害项目的高度扩展性,PO害设计师才华;损人利己,非行家所为。
解释了一大堆,问题也说了一大堆;然而Twinsen并不是一个评论而不给解决方案废物;而且Twinsen也不会是手动去画若干张图来显示自己很专业的人。所以做了下面的这样的一个生成器,只是为了方便设计师在设计的时候可以方便、快捷、有效的得到最正确的创作指引。
首先这是一篇让你知其所以然的文章,如果你不了解栅格化你应该看看,如果你很了解栅格化你更加应该看看。
事情的起因:
今天帮跑去跟小组争取福利,和领导谈话。
我说小组对于那种虚名的表扬最近不太感冒,最好来点实质的奖励。
他就说什么技术提升之类远景什么的,让大家为了理想去工作。
我说我们组总体水平已经是重构界最强了的哦。
他就问我知道什么是栅格化么?不知道怎么谈业界最强。
我无言……
我这样对技术沉溺到BT的人,又怎会允许自己在技术上的无知呢?……于是回到座位,查了一下,找到了些业界的文章。
网页栅格系统研究(1):960的秘密 http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/
网页栅格系统研究(2):蛋糕的切法 http://ued.taobao.com/blog/2008/10/22/
网页栅格系统研究(3):粒度问题 http://ued.taobao.com/blog/2008/10/28/
网页栅格系统研究(4):技术实现 http://ued.taobao.com/blog/2008/11/05/grid_system_research_/
网页的栅格系统设计: http://www.vvsoo.com/article/19.htm
我的栅格系统实现: http://www.gracecode.com/Archive/Display/2363
栅格化……
qzone的“栅格化”……四年前就开始了……鬼都不知道那叫“三格”(其实正确的说那个应该叫做网格),我还以为山木的弟弟呢……
引用平面设计导论
5、网格式结构布局。
网格系统是现代国际上普遍使用的一种版面构成方式。勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。 近三十年来,越来越多的平面设计家开始熟练使用网格这种技巧与自由灵活的方式相结合,根据主题与设计的需要,集条理与活泼于一体。
x=小模块宽度
y=模块的间距
z=大模块宽度
m=大模块宽度等同于小模块宽度的个数
w=总宽度
根据qzone的实际状况(z=x*2+y)得三元一次方程式如下:
w=x*4+3*y
推得
w=z*2+y
根据这个才会得到qzone现在的这样的比例。
我们现在按照实际要求(z=x*m+y)基础推理得总宽度不定情况下,假定需容纳小宽度模块n个得
w=x*n+(n-1)*y
同理推得
w=z*Math.floor(n/m)+(Math.floor(n/m)-(n%m-1))*y+x*(n%m)
使用穷举的程序如下(简单的算法想不到,我高数没学好):
function DOG(){//最搞笑的是这里的缩写居然是DOG……
//Deletion of grid
//m=大模块宽等同于小模块宽度的倍数
//x=小模块宽度
//y=模块的间距
//z=大模块宽度
//w=总宽度
mm=3;//设定默认对比倍数,qzone的为2;
mmax=1002;//最大像素
my=5;
for (var mx=my+1;mx<mmax;mx++){
mz = mx*mm+(mm-1)*my;
for (var mn=3;((mn*mx)<=mmax) || (mn*my)<mmax;mn++){
mw=mz*Math.floor(mn/mm)+(Math.floor(mn/mm)+(mn%mm)-1)*my+mx*(mn%mm);
if ((Math.floor(mw)==mw) && (mw<=mmax) && mw>900 && 3<mn && mn<10 && mx>150){
document.write(mw+"="+mz+"*Math.floor("+mn+"/"+mm+")+(Math.floor("+mn+"/"+mm+")+("+mn+"%"+mm+")-1)*"+my+"+("+mn+"%"+mm+")*"+mx+"<br />");
document.write("小模块宽度:"+mx+";");
document.write("模块的间距:"+my+";");
document.write("大模块宽度:"+mz+";");
document.write("全是小模块的话个数为:"+mn+";")
document.write("总宽度:"+mw+"<br />");
}
}
}
}
DOG();//运算时间小于15秒,可以接受。
上例已经按照最佳状态进行筛选n选3以上,总宽度选定为900以上,全是小模块的话小于10个,最小的小模块宽度大于150;之后可以得到一个详尽的列表。
Twinsen这里只选取其中随便几个。
1002=600*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*3+(5%3)*198
小模块宽度:198;模块的间距:3;大模块宽度:600;全是小模块的话个数为:5;总宽度:1002
1001=750*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*3+(4%3)*248
小模块宽度:248;模块的间距:3;大模块宽度:750;全是小模块的话个数为:4;总宽度:1001
然后又根据网站布局的可三可二原则(即小模块的个数应当为6时)以及两大一小原则(即小模块的个数应当为5时)以及一大两小原则(即小模块的个数应当为4时)同时
得到相同的答案950
950=950*Math.floor(3/3)+(Math.floor(3/3)+(3%3)-1)*7+(3%3)*312
小模块宽度:312;模块的间距:7;大模块宽度:950;全是小模块的话个数为:3;总宽度:950
950=711*Math.floor(4/3)+(Math.floor(4/3)+(4%3)-1)*6+(4%3)*233
小模块宽度:233;模块的间距:6;大模块宽度:711;全是小模块的话个数为:4;总宽度:950
950=568*Math.floor(5/3)+(Math.floor(5/3)+(5%3)-1)*5+(5%3)*186
小模块宽度:186;模块的间距:5;大模块宽度:568;全是小模块的话个数为:5;总宽度:950
950=473*Math.floor(6/3)+(Math.floor(6/3)+(6%3)-1)*4+(6%3)*155
小模块宽度:155;模块的间距:4;大模块宽度:473;全是小模块的话个数为:6;总宽度:950
以及7等分原则
950=402*Math.floor(7/3)+(Math.floor(7/3)+(7%3)-1)*9+(7%3)*128
小模块宽度:128;模块的间距:9;大模块宽度:402;全是小模块的话个数为:7;总宽度:950
以及9等分原则
950=314*Math.floor(9/3)+(Math.floor(9/3)+(9%3)-1)*4+(9%3)*102
小模块宽度:102;模块的间距:4;大模块宽度:314;全是小模块的话个数为:9;总宽度:950
还有11等分原则
950=254*Math.floor(11/3)+(Math.floor(11/3)+(11%3)-1)*7+(11%3)*80
小模块宽度:80;模块的间距:7;大模块宽度:254;全是小模块的话个数为:11;总宽度:950
大家可以明显地看到这里和UED得出的结论一样都是950,但是Twinsen一点都不赞同UED的分析方式。这里有几点很想说明一下的:
首先是这个名称的问题,别人明明就是叫做网格,干嘛死活要搞个名词出来作为自己研究的成果。别人《超越CSS》里面写的也是”网格“,硬是将别人的内容变成栅格化。简直就是对笔者莫大的侮辱。
其次是强拉硬扯的典故和经典。“勒.柯布塞的《模式》一书是最早将网格用于设计的,他将一个矩形以黄金分割法分割出44个设计方案,从而为图形设计提供了一个较宽选择余地的样板。”……2n*3*5……神奇的数字……确实是神奇了,别人用的是黄金分割:”根号5减1除以2(0.6180339)“;用一个无理数算出一个极其有规律的自然数,我都觉得神奇。(看来某人不单设计没学好,数学也没学好……)也就是为什么上面的例子使用的是穷举,我实在想不到更好的办法……。再说那篇文章里面提到的黄金分割也不赞同,因为很牵强;比如我分的格是1px,我就不信搞不出比你更能适应更能黄金的两个块出来。
第三其实早前我们小组在研究YUI的时候,很不赞同他们的构想。如果我们使用这样固定的宽高大小比例(最可恶的是谁限定了间距一定为那么死老粗的10px),那么请问我们要设计师来干嘛?剩下的也就是定定颜色,画画小图标做做广告图而已了。
第四所谓的栅格化某种程度上面来讲只是一群偷懒的页面仔省事的办法而已。定死了一个个的块以后,直接的套用固有的CSS去完成需求(达不成结构与表现分离);只要一有设计师不使用这套东西就被灌上:“不栅格化”的名头。损害项目的高度扩展性,PO害设计师才华;损人利己,非行家所为。
解释了一大堆,问题也说了一大堆;然而Twinsen并不是一个评论而不给解决方案废物;而且Twinsen也不会是手动去画若干张图来显示自己很专业的人。所以做了下面的这样的一个生成器,只是为了方便设计师在设计的时候可以方便、快捷、有效的得到最正确的创作指引。
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 480一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 524一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 597话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1551Web前端开发和JS面向对象编程分享 一、前端 ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 659让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 723现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 621一般情况下,元素拥有默认的white-space:norm ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 643<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1675看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 1011写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 698/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1555这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 837研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
完美解决IE6不支持position:fixed的bug
2012-04-28 16:50 830废话不多说,先看一下下面这段代码: ? ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 951用一个div作为提示信息或者与用户交互的层控件, ... -
IE和Firefox浏览器下javascript、CSS兼容性研究
2012-04-24 17:04 701为了将公司的产品在IE和Firefox下达到兼容,前段时间做了 ... -
如何通过CSS实现div的固定位置,不随页面滚动消失
2012-04-24 16:56 1410每个 Web Developer / Designer 都知道 ... -
如何去掉链接虚线框,css去链接虚线,html链接虚线框隐藏
2012-02-12 11:34 1185链接的虚线框影响整 ... -
让apache支持shtml 文件,aphache shtml
2012-01-10 09:58 737介绍一下shtml和shtm 关于shtml,shtml是一 ... -
firefox ie 字体不一样
2012-01-10 09:44 1053今天无意遇到了火狐,IE不一致。那么在公共样式里加如下代码: ...
相关推荐
淘宝UED设计流程图
4. **个性化**:由于是仿照淘宝UED设计,我们可以期待这个主题具有高度的定制性,包括颜色方案、字体选择、布局调整等,让用户可以根据自己的需求打造出独特的网站风格。 5. **用户体验**(UED):淘宝UED团队以其...
UED(User Experience Design,用户体验设计)是互联网产品开发中的关键环节,它专注于创建易于使用、功能强大且视觉吸引力强的用户界面。UED设计插件则是设计师们为了提高工作效率、简化设计流程而开发的一类工具。...
标题中的“淘宝的UED招聘试题”指的是淘宝用户体验设计团队(User Experience Design,简称UED)的招聘过程可能会涉及到的技术考核题目。UED团队主要负责网站或应用的用户界面设计、交互设计以及用户体验优化,因此...
【WEB前端与UED角色对应关系模型】 在互联网行业中,WEB前端和UED(User Experience Design,用户体验设计)是两个紧密关联的领域。UED主要是关注产品前端的设计,追求的不仅仅是外观的美观,更重要的是创造出用户...
在腾讯网这样的大型互联网平台上,UED的重要性不言而喻,它涉及到产品的易用性、可访问性、功能性和情感化设计等多个方面。设计师们通过理解用户需求,进行原型设计、交互设计、视觉设计以及用户测试,旨在创建出...
总结:这款“腾讯UED设计的提示插件”通过与jQuery库的结合,为开发者提供了一套易于使用的提示解决方案。其丰富的样式和功能,以及良好的用户体验,使得网站能以更具吸引力的方式与用户交互。通过深入研究提供的...
阿里巴巴旺旺产品的用户体验设计流程图(UED流程图)是展示产品开发过程中一系列关键步骤的可视化工具,对于理解和实践高效的产品设计至关重要。该流程图涵盖了从项目启动到发布跟踪的全过程,确保产品能满足商业...
阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED阿里旺旺产品UED
### 腾讯网UED体验设计之旅知识点梳理 #### 一、概述 《腾讯网UED体验设计之旅》是一本深入探讨用户体验设计(User Experience Design, UED)的专业书籍,主要面向产品经理、设计师以及对用户体验感兴趣的读者群体...
产品UED流程及交付物 UED流程是产品开发过程中不可或缺的一环,它涉及到用户需求把握、视觉呈现优化和使用体验提升。下面将对UED流程的各个阶段进行详细解释。 需求分析阶段 在需求分析阶段,用户研究工程师将跟进...
产品经理也有全栈一说了.UI,UX,UE,UXD,UED,UCD
根据提供的文件信息,我们可以深入探讨其中涉及的关键知识点,主要包括编码的基础知识、ASCII编码、国际化问题、Unicode以及HTTP中的编码方式等内容。 ### 编码之初 #### 摩尔斯码 摩尔斯码是一种早期的编码方式,...
前端开发 可以学习 淘宝的前端页面是如何开发的
在具有边界定位(运动或质量)项(BLT)的S1 / Z2固定点的五维通用超维模型中,可以违反Kaluza-Klein(KK)奇偶校验。 在这个框架中,我们研究了LHC上中性电弱规子玻色子的Kaluza-Klein激发的共振产生以及它们衰变成...
在探讨阿里巴巴旗下的即时通讯软件阿里旺旺产品项目中,UED流程图扮演了一个重要的角色。UED是User Experience Design的简称,即用户体验设计,它囊括了用户研究、交互设计、视觉设计等多个方面。这个流程图不仅让...
【腾讯UED设计提示插件详解】 腾讯用户体验设计团队(User Experience Design,简称UED)是业界知名的设计部门,致力于提供高质量的交互设计、视觉设计以及用户体验策略。这款提示插件是腾讯UED为提升用户在产品...