CSS的语义化命名规范

南瓜小米粥 发表于 前端开发 分类，标签: css 蓝色 命名规范 语义
12 6月 2008
      CSS的语义化命名规范摘自蓝色

      网上大部分文章在谈到网站设计中的语义问题时，大都只集中于语义化的Html标签，或者谈到CSS的语义命名时也只局限于少数几个例子，比如命名中不应出现left,right,red等表象性（描述性）命名，而未给出较完整的命名规范。
      
   命名规范在开发(不管是团队或是个人）中的重要性大家自是明了。而CSS命名规范的意义不同于一般，不仅仅在提高开发效率上，比如，有两个网站A和B，你喜欢A的内容而B却有更佳的排版方式，如果这两个网站具有相同的命名规范，那么这两个网站的设计者将能够让访问者把B的CSS样式应用到A中，那将是一件多么美妙的事情.......^_^

阅读全文>>

无尽的任务

南瓜小米粥 发表于 前端开发 分类，标签: css 蓝色 八界网 大杭州 最后的战役 淘宝
13 5月 2008
       跌跌撞撞，磕磕绊绊，“最后的战役”总算是过去一半了：静态文件写完了只等着BOSS的验收，然后就是程序了。从FW到html，时间花的很多，也曾经很为难，毕竟一个人的力量是有限的，而且在页面设计上自己半把刀都算不上，颜色都把握不准……整个页面参考了很3个站：大杭州（以前的版面）、八界网（刚从上面找了点感觉就改版了）、淘宝，大部分的素材都是根据淘宝重绘的。感谢淘宝的大哥大姐们“无私的奉献”，谢谢

阅读全文>>

负边距在Opera、Safari中的表现

南瓜小米粥 发表于 前端开发 分类，标签: css opera safari 负边距
10 5月 2008

        第一次拿Opera、Safari调试页面（太无聊了，想给自己找点麻烦XD），果然，麻烦来了……例子是关于more的一个写法。一般的是用负上边距让more与标题在同一行上。测试代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD...

阅读全文>>

单行图文混排垂直居中

南瓜小米粥 发表于 前端开发 分类，标签: css script 图文 垂直居中
28 3月 2008
记得“守望幸福for pw6.0 论坛风格”导航中就遇到过这个问题，当时是吧图片高度设为行高然后设置align为absmiddle才解决的。今天又有位同学忽然问我background中的left、right是什么意思。一下把我给问傻了，平时用的稀里糊涂的都没仔细想过。稀里糊涂的还有css script背景位置值的确定，有时真是想不明白为什么会是负值。

阅读全文>>

xhtml书写 - 大处着眼小处着手

南瓜小米粥 发表于 前端开发 分类，标签: css taobaouedteam xhtml 书写顺序 大处着眼小处着手
28 2月 2008
如果你辛辛苦苦写的代码在默认浏览器里BT掉时是什么感受？当然这在一定程度上是浏览器差异造成的，可是更主要的是自己的书写问题，不止是写没写hack。假设我们就单写一个200*200、边框为1px黑色的div，会在陌生浏览器BT吗？    

    写页面其实跟很多东西都有相通的地方，都需要有全局的眼光。整体没有把握好的画是不能看的，目光短浅的人不能做大生意。

阅读全文>>

上下导航写法的补充

南瓜小米粥 发表于 前端开发 分类，标签: css 导航
25 2月 2008
原来的写法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0px;padding:0px;}
ul {list-style:none}
body ,td ,div ,li ,span {font:12px Arial, Helvetica, sans-serif;}  
body {margin: 0px;}
a:link {color:#000;text-decoration:none;}
a:hover {color:#ff3300;text-decoration:none;}
#nav ,#subnav{margin:0 auto;padding-left:15px;width:785px;}
#nav li {display:inline}
#nav li a {display:block;float:left;padding-left:4px;height:25px;line-height:25px;background:url(http://etosun.cn/attachment/200802/1203774693_2367aa94.gif) no-repeat left 0;}
#nav li a span {display:block;padding:8px 12px 3px 6px;background:url(http://etosun.cn/attachment/200802/1203774693_12239dff.gif) right 0;}
#nav li a:hover {background-position: 0 -25px;}
#nav li a:hover span {background-position: right -25px;}
#subnav {position:relative;z-index:-100;margin-top:-1px;height:26px;background:#E2EBF4;border-top:1px solid #BCD2E6}
-->
</style></head>

<body  >
<ul id="nav">
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
</ul>
<div id="subnav">
<a href="http://etosun.cn">点不到我</a>我是选不中的文字
</div>
</body>
</html>[/hcode][separator]
这种写法subnav中的文字不可选择，其中的连接不可用，也不兼容FF。
改动后的写法：
[hcode]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0px;padding:0px;}
ul {list-style:none}
body ,td ,div ,li ,span {font:12px Arial, Helvetica, sans-serif;}  
body {margin: 0px;}
a:link {color:#000;text-decoration:none;}
a:hover {color:#ff3300;text-decoration:none;}
#nav ,#subnav{margin:0 auto;padding-left:15px;width:785px;}
#nav {overflow:hidden;}
#nav li {display:inline}
#nav li a {display:block;float:left;padding-left:4px;height:25x;background:url(http://etosun.cn/attachment/200802/1203774693_2367aa94.gif) no-repeat left 0px;}
#nav li a span {display:block;padding:5px 12px 4px 6px;*padding:7px 12px 4px 6px;background:url(http://etosun.cn/attachment/200802/1203774693_12239dff.gif) no-repeat right 0;}
#nav li a:hover {position:relative;background-position: 0 -25px;}
#nav li a:hover span {position:relative;background-position: right -25px;}
#subnav {clear:both;margin-top:-1px;height:206px;background:#E2EBF4;border-top:1px solid #BCD2E6}
-->
</style></head>
<body  >
<ul id="nav">
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
    <li><a href="#"><span>导航名字</span></a></li>
</ul>
<div id="subnav">
<a href="">点的到我</a>
</div>
</body>
</html>

上下导航的一种写法

南瓜小米粥 发表于 前端开发 分类，标签: css 导航
24 2月 2008

看效果，这种做法鼠标翻转的时候鼠标所在导航下面会没有横线。要点就在对图片的处理和对id为subnav的div的处理上，subnav使用相对定位，以便于设置z-index属性让能被上面的导航遮盖住（设置负值的上边距）[break]
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q...

阅读全文>>

offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式

南瓜小米粥 发表于 前端开发 分类，标签: css
14 1月 2008

假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对...

阅读全文>>