深山老林

2006-08-14[原]老调重弹-三栏布局

TAG：CSS 原创 布局

在之前的《[原]一个三栏布局(2)》中提到的不用JS制作自适应高度的页面，不过得改HTML为：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="nojs">
      <div id="midpart"><p>midpart</p></div>
      <div id="leftpart"><p>leftpart</p></div>
    </div>
    <div id="rightpart"><p>rightpart</p></div>
  </div>
<div id="bottom">bottom</div>
-----------------------------------------------------

其实是可以不用改的，就使用原来的那个HTML代码，也可以做到不加JS而自适应高度：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="midpart"><p>midpart</p></div>
    <div id="leftpart"><p>leftpart</p></div>
    <div id="rightpart"><p>rightpart</p></div>
  </div>
<div id="bottom">bottom</div>
-----------------------------------------------------

具体的CSS如下：

-----------------------------------------------------
body,html{
 font-family:Arial;
 font-size:12px;
 background-color:#FFFFFF;
}
*{
 margin:0;
 padding:0;
}
#top,#bottom{
 width:100%;
 background-color:#0099FF;
 height:50px;
 margin:0 auto;
 clear:both;
}
#main{
 width:auto;
 padding:0;
 color: black;
 height:100%;
 overflow:hidden;
 position:relative;
 left:0;
}
#leftpart{
 width:200px;
 height:auto;
 background-color:#999900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 position:absolute;
 left:0;
 top:0;
}
#midpart{
 width:auto;
 height:auto;
 margin:0 200px;
 background-color:#00CC99;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#rightpart{
 width:200px;
 height:auto;
 background-color:#FF9900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 position:absolute;
 right:0;
 top:0;
}
-----------------------------------------------------

具体就不做解释了，原理还是一样，只是换了种方式。

注：由于年青气盛，头脑一时发热，犯了“自以为”的错，这个布局是有缺陷的，左右两边因为使用了绝对定位，所以无法自适应高度。Sorry

2006-08-04[原]7月工作小结

TAG：CSS 原创 经验之谈

终于也算是结束了一个项目，对我来说，这是我进TC后的第一个项目。没有什么新鲜感，写出的代码还是一样垃圾，一直自己提倡的东西自己却做不好，不过我相信，现在“丑”只是为了更快的看到进步。OK，牢骚发完，还是说点有用的吧。

一，宽度的问题。

auto 默认值。无特殊定位，根据HTML定位规则分配。 length 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。

二，浮动的问题。

当该属性不等于 none 引起对象浮动时，对象将被视作块对象，即 display 属性等于 block 。也就是说，浮动对象的 display 属性将被忽略。

跟随浮动对象的对象将移动到浮动对象的位置。浮动对象会向左或向右移动直到遇到边框、内补丁、外补丁或者另一个块对象为止。 div 和 span 对象假如没有指定宽度会被分配默认的宽度，在IE5之前的浏览器版本中则必须指定宽度值才可以呈递此属性。

三，样式的重用问题。

样式的名称真是个头大的问题，太多了也不好维护，虽然可以使用包含选择符，但同时也会带来继承的问题。

一直都知道样式有继承的特点，可什么时候会继承，怎么继承就不得而知了，还好在《HTML与XHTML权威指南》里发现了这么一段“类继承了它们的一般基本标签的样式属性……”、“类无法继承其他类的属性，只能从它们代表的标签的未分类版本中继承。”也就是说类之间没有继承的关系，只有当它代表了某个标签后才会继承那个标签的样式。基本标签样式会继承它的“父元素”的样式。

四，边界的auto问题。

对于盒模型，只有宽与左右边界可以使用auto，表示让浏览器自动确定宽度。此外，如果宽和左右边界都定义了宽度，而且它们之和小于父元素的宽，会向左对齐；如果左右边界为auto，会居中；都为auto时会向左对齐。

以上只是把这段时间里想到的做了下总结，会在以后再分别展开讨论。

2006-06-25烦恼

TAG：随便想想

好久没更新BLOG了，也许是懒了，问题越来越多，像浮动、菜单、导行……之类的，总觉得应该可以更优化的。

看着自己写的代码，垃圾一般，本想写得容易复用，可结果却变得更难阅读，真想买块豆腐撞死算了。

做交互设计好呢？还是做页面制作好呢？鱼与熊掌不可兼得，选择总是让人烦恼啊……

2006-06-14[原]用menu标签制作CSS菜单

TAG：HTML 原创
现在很多人都用CSS制作导行菜单，像使用“滑动门技术”之类的方法，但都是使用了无序列表ul标签，其实HTML的标签里还有专门为菜单而设计的标签menu标签。 用法很简单，就像使用ul一样，只是把ul标签换成了menu标签，像这样： -----------------------------HTML---------------------------------

菜单项1

菜单项2

菜单项3

菜单项4

--------------------------------------------------------------------- 而样式的写法也跟原来的差不多，只是把对ul标签的定义改成对menu标签就行。 注：menu标签不是标准推荐的标签！！

2006-06-07[原]定义小于18px的高

TAG：CSS 经验之谈 原创

在IE中定义height时，如果值小于18px的默认行高时，得到的结果总是18px的高，这是个已经困扰了很多人的问题，这里我总结了相关的解决方法，希望能对你有所帮助吧。

一，使用overflow:hidden隐藏多出的部分。这个方法被大部分人所使用，效果还是不错的。

---------------------------CSS----------------------------------
.E{height:10px;overflow:hidden;}
------------------------------------------------------------------

二，使用小于12px的字号来强制IE改变默认的行高，同样可以实现效果，但在做CSS检查时会出现“字号太小”的警告。

---------------------------CSS----------------------------------
.E{height:10px;font-size:1px;}
------------------------------------------------------------------

三，定义小行高来实现效果。个人觉得这种方法更方便使用，而且不会有警告，推荐使用。

---------------------------CSS----------------------------------
.E{height:10px;line-height:1px;}
------------------------------------------------------------------

不要奇怪定义那么小，有文字怎么办，因为一般会用这么小的高，都是不会再加文字的，如果非要加，那就用第二种方法吧，相信也没人会看到你写了什么。

注意：如果你想让宽度也小于默认值的话，就得使用定义小字号的方法了。