牧童映画

学习制作的WEB GUI样式

2008-11-19T11:16:12+08:00

很早的时候有人就和我说起了这种样式只不过那时候我才刚刚出道还是菜鸟中的菜鸟（现在是菜鸟了）

人们称为WEB GUI 嘿嘿以前我的理解的面向对象的WEB 页面嘿嘿其实也可以这么理解嘿嘿反正多是“交互式”嘿嘿~~

不过说真的这种样式怎么来说捏其实也就是和传统的有点区别也就是在美工上面花了时间，除去了传统的模式（其实核心的东西没什么变化），这种样式看起来大方淡雅朴素嘿嘿（我们也可以应付上头说的大气<--其实我一直不知道怎么理解这个词-。-！）

以前不注意这方面，现在也就侧重的学习下继续学习ing

设计和布局之间的思考

2008-11-14T16:05:28+08:00

矛盾出来了，像我们这些小作坊，基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了，我们都有这个能力进行调整。但像大公司，分工严格的情况下，如果设计师不懂css不会布局。或者理解有误，那么设计稿就会让布局人员耗费大量的时间和精力。因为浏览器太多！

经常看到有网友抱怨设计师给的稿子无法还原。因为他们对浏览器和屏幕的理解不一样。也有的是因为效果太绚，颜色太多。更有甚者是使用flash制作嫌浪费，而html又鸡肋.....好吧，我们抛开这最后一种情况，只谈对屏幕和效果以及设计布局的理解。

先谈屏幕：

屏幕分辨率，还是以1024×768为主。而满屏的定义则无从谈起。为什么？请看一下原因：

你不能确定用户的ie装了几个插件！插件越多，浏览器显示高度越低！
你不能确定用户的显示器是否设置正确（歪一边了，弧形的，截断的，缩小的放大的）
你不能确定用户显示器的分辨率是否为最佳分辨率。其典型在于某些宽屏或高屏显示器，有的是等比例缩小后留白。而更有甚者则是满屏拉伸。比例就不对了！

要使得网页满屏。很多人说宽度1003，也有人说是1004。而我则不这样认为。

假设客户要求网页满屏。那么，你就要晓得用户的显示器尺寸的屏幕分辨率。如果客户对这玩意认知度很低。就不要轻易去改人家的分辨率。我1440×900的宽屏，我用1024×768的分辨率，我乐意！如果这客户要求一定要满屏，那么问题又出现了，如果交货的时候客户换了一台不同尺寸的显示器呢？分辨率变大了，你的网页窄了，分辨率小了，你的网页宽了！你咋办？

其实满屏也分两种，我姑且命名一种为内容满屏，一种为视觉满屏！

所谓内容满屏，就是指网站上的东西，左边界就在显示器左边界，右边界就是在显示器右边界。最佳的解决办法就是使用百分比。而百分比带来的负面效应：

浏览器bug
设计及制作难度增加

所谓视觉满屏，其实是一种取巧的做法。而这种方法。其实很简单，一个网站的头部，无非就是导航和banner，如果导航在最上边，那么，将导航的背景呈100%，导航居中。如果banner在最上边，那么注意处理图片两端，还是100%宽+背景！

OK，虽然内容宽度还有可能是1000、1003、甚至是900或更低，视觉上依然是百分百的宽度，只要避免最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。永远OK。

再谈布局和循环：

这里有篇文章http://weilaixu.cn/read.php/174.htm

其实呢，说网页制作，直角最简单，比如老印，他的东西全部是直角。用他的话说就是刀切一样！为嘛？简单方便速度快内容清晰！

布局以按照设计稿为标准。或者说叫使用html还原设计稿，如果html截图能和设计稿重叠，再过了标准，我认为就是最高境界了！

问题最大的，其实还是在设计和还原效果上！虽然可以使用css的负值、浮动、重叠等属性进行不规则布局，但问题依然存在，工作量和难度有可能依然会翻倍。还有，那可恶的N种浏览器！

对于复杂的设计稿、复杂的效果、甚至是过分的设计，如何降低使用html还原设计稿的工作量及难度！

如果你有权力微调设计稿，那么，你可以在“可忍受”范围内微调。这个范围，每个公司都不一样！
如果你没有权力懂设计稿的任何东西，那么，请和设计师或主管沟通，请设计者进行微调。但你要把你的难点描述的清晰，让他们理解！
没人同意改稿子，那么，恭喜你。加班吧！
或者，你可以把那些细节工作扔给flash！

问题集中体现在设计和效果上！

先说设计：

网页设计，除了体现效果，还有很多不可缺少的东西。这里不谈纯粹用来欣赏的网站。毕竟大部分的站点需要被大量阅读的。

网页的栅格系统
看这篇文章：http://ued.taobao.com/blog/2008/09/17/grid_systems/
速度
很重要，非常的重要！减少图片，使用背景图整合降低http连接次数。能使用文字尽量使用文字。所以嘛，还是得注意啊！
背景图的小图循环和重复使用
大的就不说了，弄几个弧度上去，几乎就要用大图片了，像奥运时候那么网站的大背景。
小的背景图，小栏目的背景图，以及子页面的某个地方的背景图。咱尽量一致！小背景循环，效果图里的宽和高哪个小，尽量按哪个方向循环！目的就是保证速度！
效果
png，这个可以说是效果的典型了！无背景的透明属性。相信很多人都喜欢！但ie6却有缺陷，好了，看码头的：【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

我在做设计的时候，一般的站点是不考虑布局的！但那些艺术气息特浓厚，效果忒多忒强烈的站，在吃自己的亏吃了两次之后，就开始主动考虑后期布局，尽量避免让布局难度加大！

如果设计的时候，考虑到重复利用图片、背景等。会降低布局切片的很多工作。或者我可以说，页面重复利用率越高，就越快！主页虽然是主页，子页虽然更简单，但重复利用主页上已经下载了的东西，不更好么？我想说的是，要有全局的思维！

当然了，你肯定也想到了flash的应用。但flash貌似也有浏览器兼容问题！

如果设计和布局中间有某个问题被耽搁或某一方不退让，那么程序、交互就要延后，上线日期也要推迟。

如果制作方擅自行动修改而设计方死活有意见......

唉，问题可大可小！做个网页也不容易啊！

...............................................................................................................................................

这是我在蓝色上读到的一篇文章，怎么说捏说出了我的心声啊！
在公司里面做设计时候确实要考虑方方面面的问题
1、视觉，在视觉效果上面要好，毕竟用户第一印象就是版面。
2、布局，设计的时候必须考虑布局时候的各种问题，比如宽度、图标、背景、各个栏目的标题等等。
3、对齐问题，我不知道其他的人有没有遇到设计时候只注重视觉效果，没有考虑岛布局问题，毕竟布局时候我们是使用table或者DIV和CSS构建还原设计图的，但是设计时候不考虑对齐问题也是很痛苦的，我这高一些，那边低一些我这里大一些那边又小一点好家伙，麻烦来了~~~这样一来就增加了布局的工作量，这还是小事情，主要问题就是对齐不工整，始我们在布局时候往往会重复的出现很多问题代码的重叠和很多层次的叠加，当然貌似还是可以用flash来解决，但是用flash毕竟只能解决小部分，如果你做一个大型一点的站点我想flash是解决不了的，毕竟flash实在是太拖速度了，也只是在个性站点方面使用较多。

所以说捏设计时候必须要全面的掌控好布局方面，你可以不懂写hmtl CSS DIV等代码但是毕竟掌握布局的结构。

上述应该可以说是我看这文章的感想吧。。。。
..............................................................................................................................................

新健一个群QQ 73869687

2008-11-09T20:12:27+08:00

新健一个群QQ 73869687
有兴趣的朋友可以进来交流大家一起探讨。。
主要是设计、div+css、JavaScript... 这些之类的
刚开的所以还没什么人气大叫可以叫上大家之间的相关行业的朋友一起来加油大家一起建设

自己弄的一个页面

2008-11-04T08:56:49+08:00

自己这段时间弄的一个页面~~前台后台基本也弄得差不多了~~不过还有很多方面没有考虑到。其实这个站点也就是在我Blog基础上面托变来的~~~基本就是BLog的一个细化相当于一个首页的调用和一个专门的图片管理。

CSS常用网站布局实例

2008-07-15T13:21:50+08:00

几个使用DIV标签布局时候用的常用布局

1、自由伸展的三栏式版面,div布局，非绝对定位，IE,FireFox都OK.

HTML代码

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>自由伸展的三栏式版面</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=GB2312" /> 
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />

html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; 
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);}
/*** Image is 180px wide, and 20px high ***/

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/*******************************************************************************
                       Positioning rules
*******************************************************************************/
h1, h2 {
font-size: 22px;
margin: 0;
color: #040;
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/
border-top: 4px solid #000;
border-bottom: 5px solid #000;
padding: 3px 0 3px 1em;
}

h2 {background-color: #638; color: #fff;}

div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #ee8;
padding-top: 10px;
}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #000;
border-right: 3px solid #000;
padding: 10px;
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px;     /*** IE5/mac will show a horizontal scrollbar 
		if this is less than 16px, or other units are used
		<a href="http://www.l-c-n.com/IE5tests/right_pos/" target="_blank" rel="external">http://www.l-c-n.com/IE5tests/right_pos/</a> ***/           
width: 30%;
color: #820;
padding-top: 10px;
}

-->
</style>
</head>

<body>

<h1>
自由伸展的三栏式版面（Three Column Stretch）（页首）
</h1>

<div id="leftbox">
<pre>
<strong>#leftbox</strong> {
position: absolute;
left: 10px;
width: 180px(150px?);
}
</pre>

<p>
<strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。
<p>
</p>
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的“宽度(width)”值。
</p>
<p>
<a href="http://www.mt53.com/blog/#"><strong>测试用连结</strong></a>
</p>
</div>

<div id="rightbox">    
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}

</pre>
<p>
<strong>这个栏段</strong>也能显示“body”的背景，但是因为“body”的背景
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是“body”的背景颜色(background-color)。 
这个栏段的“宽度(width)”和右边界的区域是用百分比作单位，你想用其它单位也可以。
</p>
<p>
如果页面比 640px 还窄，中间和右边栏段使用的“pre”卷标会导致内容重叠。
</p>
<p>
<a href="http://www.mt53.com/blog/#"><strong>测试用连结</strong></a>
</p>

</div>

<pre>
<strong>#middlebox</strong> { 
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
</pre>
<p>
<strong>中间栏段</strong>有设定背景色，以便跟右边栏段作区分。
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定“宽度(width)”属性，并不会触发 IE5.x 的区块模块(box model)问题。
</p>
<p>
这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则“body”的背景就会在页尾(footer)下方出现。
</p>

<p>
<strong>这整个范例</strong>没有在任何栏段里宣告“高度(height)”属性，这是为了避掉一些浏览器表现“高度(height)”属性的独特方式。
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。
</p>
<p>
页首、页尾和中间栏段是“固定的(static)”（或说“相对的(relative)”），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定“高度(height)”。
</p>
<p>
在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，
因此这些 div 的“top”属性可以忽略。
这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。
所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？
</p>
<p>
<strong>Mozilla 中</strong>，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，
<a href="http://www.mt53.com/blog/mozshift.html">这个范例</a>描述得更详细。
</p>
<p>

<strong>Nav4 中</strong>没办法使用像“div#leftbox”这类语法，所以请用“#leftbox”来代替。我的写法只是为了要明确地表示。
</p>
<p>
<strong>致谢：</strong>再次感谢<a href="http://www.mt53.com/blog/../../../www.l-c-n.com/default.htm">Philippe Wittenbergh</a>
，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong> 
<a href="http://www.mt53.com/blog/../../../www.mark.ac/help/default.htm">Mark Howells</a>
，因为他提供了最初的 body 背景点子。 
</p>
<p  class="small alignright">
<a href="http://www.mt53.com/blog/../../../users.rraz.net/mc_on_the_rocks/default.htm"
 title=" My mountain bike site "><strong>Big John</strong></a>

<a href="http://www.mt53.com/blog/mailto:johnthebig66@yahoo.com" title="If you've found something new and
interesting to say about any CSS subject, please contact me. I want to know! ">e-mail</a> 
©positioniseverything<br />
最后更新日期： September 6, 2002<br />
Created August 24, 2002
</p>
<p class="small alignright">
<a href="http://www.mt53.com/blog/../../../ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁体中文翻译：</a><strong>yyhuang</strong>

简体中文转换:<br />
<a href="http://www.mt53.com/blog/../../../www.onestab.net/default.htm"><strong>onestab</strong></a>

<p>
<strong>以下是填满栏段用的</strong><br /><br />
Why don't cannibals eat clowns?<br />
Answer: They taste funny.<br /><br />
What is the difference between a lousy golfer and a lousy skydiver?<br />

Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!<br /><br />
Did you hear about the geneticist that tried to cross a potato and a chicken?<br />
He wanted to produce a chicken that would definitely NOT cross the road, but instead, 
got a bunch of potatoes that sat around pecking eachother's eyes out.<br /><br />
How many Psychiatrists does it take to change a light bulb?<br />
Answer: Only one, but the bulb has to really <em>want</em> to change.<br /><br />
Why did the egg cross the road?<br />
Answer: It had an inclination.
</p>

</div>

<h2>
自由伸展的三栏式版面（Three Column Stretch）（页尾）
</h2>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2、纯CSS制作的新闻网站中的文章列表

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3、CSS左右两列自适应高

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div class="da_div">
  <div class="top_540">
    <div class="t540_text">fdsfjdsklfds</div>
  </div>
  <div class="top_200">
    <div class="t200_text">fdfdsfdsfdsfds<br />
      fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />
      fds</div>
  </div>
</div>
<div class="da_div_xia">
  <div class="top_540"> </div>
  <div class="top_200"> </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

单行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列
以下是引用片段：

引用内容

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列
以下是引用片段：

引用内容

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列
以下是引用片段：

引用内容

#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列
绝对定位
以下是引用片段：

引用内容

#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一
xhtml:
以下是引用片段：

引用内容

这里是第一列

这里是第二列

这里是第三列

CSS:
以下是引用片段：

引用内容

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二
xhtml:
以下是引用片段：

引用内容

This is the main content.

This is the left sidebar.

This is the right sidebar.

CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

两行三列
xhtml:
以下是引用片段：

引用内容

这里是第一列

这里是第二列

这里是第三列

CSS:
以下是引用片段：

引用内容

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列
xhtml:
以下是引用片段：

引用内容

这里是第一列

这里是第二列

这里是第三列

CSS:
以下是引用片段：

引用内容

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！

CSS布局自适应高度解决方法

2008-05-14T15:35:00+08:00

原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

引用内容

#wrap{
overflow: hidden;
}

#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}

实现原理：

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IE Mac 5

得到高度正确，所以要过滤掉上面的代码。

引用内容

/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/

Opera

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

引用内容

/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/

2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：

引用内容

/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/

3.Opera9的B2在修正8的bug.

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

最终效果:

运行代码框

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 140%;
	text-align: center;
	background:#E7DFD3;
}
#wrap{
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
#header{
	background: #E8E8E8;
}
#sideleft{
	width: 580px;
	float: left;	
	background: #FFF;
	text-align: left;
}
#sideright{
	width: 170px;
	float: left;
	background: #F0F0F0;
	text-align: left;
}
/* easy clearing */
#wrap:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrap
	{
	display: inline-block;
	}
/*\*/
#wrap
	{
	display: block;
	}
/* end easy clearing */
/*\*/
#sideleft, #sideright
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#sideleft, #sideright
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#sideleft:before, #sideright:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/**/
#footer{
	background: #E8E8E8;
	width: 100%;
	float: left;
}
h1,h2,address,p{
	margin: 0;
	padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1>Head</h1>
  </div>
  <div id="sideleft">
  <h2>sideleft</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
   
  </div>
  <div id="sideright">
  <h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
  </div>
  <div id="footer">
    <address>
    Footer
    </address>
	<p>制作：<a href="http://www.mt53.com/blog/<a href="http://www.forest53.com" target="_blank" rel="external">http://www.forest53.com</a>">forestgan</a></p>
  </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

自己的站点

2008-04-10T11:47:08+08:00

好久没发做的东西了刚好这几天弄好了一个就发上来大家看看吧~~
顺便在给我点意见~~
没意见我不知道那里不好啊~~~~

第一次完全全部用DIV+CSS布局嘿嘿写得我要死
不过好像兼容不是很好~~~~嘿嘿
不过只要是IE7.0以上的核心看起来是没问题的

现在还只弄好了一个首页嘿嘿预览地址

这是管理样式预览地址

用CSS控制图片自适应大小

2008-03-27T10:16:19+08:00

图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制
代码：

引用内容

.img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
　◎ width:600px; 在所有浏览器中图片的大小为600px;
　◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
　◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

仿flash图片展示效果

2008-03-07T12:32:55+08:00

蓝色上看到的感觉蛮有用的嘿嘿先当下来以备以后只用

HTML代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿flash图片展示效果</title>
<style>
.showBox{ position:relative; height:138px; margin-top:100px;}
.showBox img{ position:absolute; border:0; width:150px; background:#000; cursor:pointer;}
</style>
<script type="text/javascript">
var Container_div;
var Imgs;
var div_left;
var maxZoom = 1.6;
var timer;
function $(id){return typeof(id) == "string"?document.getElementById(id):id;}
function getEvent(){
	var e = window.event || getEvent.caller.arguments[0];
	if(document.all){
		e.target = e.srcElement;
		e.pageX = e.clientX + document.documentElement.scrollLeft;
		e.pageY = e.clientY + document.documentElement.scrollTop;
	}
	return e;
}
function getLeft(element){
	var left = 0;
	while(element.offsetParent){
		left += element.offsetLeft;
		element = element.offsetParent;
	}
	return left;
}
function getURL(url){
	if(url)location.href = url;
}
function init(){
	Container_div = $("Container");
	Imgs = Container_div.getElementsByTagName("img");
	div_left = getLeft(Container_div);
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		image.i = i;
		image.w = image.width;
		image.h = image.height;
		image.l = i - 1 >= 0 ? Imgs[i - 1].l + Imgs[i - 1].w + 20 : 230;
		image.t = 0;
		image.style.left = image.l + "px";
		image.onclick = function(){getURL(this.getAttribute("longdesc"))};
		image.onmousemove = MouseOver;
		image.onmouseout = MouseOut;
	}
}
function MouseOver(){
	if(timer)clearTimeout(timer);
	/*控制鼠标所指图片的位置和大小*/
	var e = getEvent();
	var zoom = ((e.pageX - this.l - div_left > this.w / 2 ? this.l + this.w - e.pageX + div_left : e.pageX - div_left - this.l) * 2 / this.w) * (maxZoom - 1) + 1;
	var tmpWidth = this.w * zoom;
	var tmpHeight = this.h * zoom;
	var tmpLeft = this.l - (tmpWidth - this.w) / 2;
	var tmpTop = this.t - (tmpHeight - this.h) * 0.8;
	this.style.width = tmpWidth + "px";
	this.style.left = tmpLeft + "px";
	this.style.top = tmpTop + "px";
	
	/*控制周围图片的位置*/
	var index = this.i;
	var imageIdx = Imgs[index];
	var zIndex = Imgs.length;
	var space = 100;
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		i <= index ? zIndex++ : zIndex--;
		image.style.zIndex = zIndex;
		if(i != index){
			var offset = imageIdx.l + imageIdx.w + div_left - e.pageX;
			var ambit = image.w * 0.4;
			if(i < index){
				if(i == index - 1 && offset > ambit){
					image.style.left = image.l - space + (offset - ambit) * 0.8 + "px";
				}else{
					image.style.left = image.l - space + "px";
				}
			}else if(i > index){
				offset = e.pageX - imageIdx.l - div_left;
				if(i == index + 1 && offset > ambit){
					image.style.left = image.l + space - (offset - ambit) * 0.8 + "px";
				}else{
					image.style.left = image.l + space + "px";
				}
			}
		}
	}
}
function MouseOut(){
	this.style.width = this.w + "px";
	this.style.top = this.t + "px";
	step();
}
function step(){
	move();
	timer = setTimeout(step,20);
}
function move(){
	var tag = 0;
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		var tmpL = image.offsetLeft;
		if(image.l - tmpL < 1) tag++;
		var desX = tmpL + (image.l - tmpL) * 0.1;
		image.style.left = desX + "px";
	}
	if(tag == Imgs.length) clearTimeout(timer);
}
window.onload = function(){
	init();
}
</script>
</head>
<body>
<div class="showBox" id="Container">
	http://www.sina.com.cn</a>"/>
	http://www.baidu.com</a>"/>
	http://www.163.com</a>"/>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

DIV+CSS布局中的居中问题

2008-02-19T15:20:17+08:00

这两天在改一些页面途中碰到DIV定义居中的问题，自带属性中没有这项，网络上搜索了一下，得出的结论还是很多的，特当了一下来，以备以后之用嘿嘿，忘记了有地方找^_^

1、DIV居中

引用内容

body {text-align: center;}
div {margin-right: auto; margin-left: auto;}

说明：对于IE，在父元素定义“text-align: center;”就可以了对于FF等其他浏览器，仅这样不能居中，需在子元素中定义“margin-right: auto; margin-left: auto;”。

2、背景居中

引用内容

body {background:url(#) #fff no-repeat center;}

说明：参数中的center是对背景位置的定义。

3、文本垂直居中

引用内容

div {vertical-align:middle;line-height:？px;}

说明：vertical-align:middle;表示行内垂直居中，我们将行距调整到和整个DIV一样高，文字就垂直居中了。

4、FF和IE中DIV兼容问题居中

body {text-align: center;}

引用内容

#DIV {
margin: 0 auto;
}

基本加上这个就能居中了

或者是加上

引用内容

Margin-Right: auto;Margin-Left: auto;

也是居中的只是上面的相对简单一些