浏览器优先级实例之--!important
作者:dangbao 日期:2010-01-25
看到这样的页面效果你是作何感想？我们的编辑为了防止长时间的盯着屏幕而造成对眼睛的伤害，毅然选择将Windows主题外观里的窗口设置为暗色调，以求更小的颜色刺激。可怜的小编们的眼中的网页变了颜色。没有设置背景颜色的body、div、input都成了这种暗色。哈哈，一旦被老板看到后，可怜的csser就要后悔没有给任何一个元素加上背景色了。不说闲话了，祭出重点，更改了系统默认主题后，一些编辑器会自动给textarea里内容加上<font style="background:#ffffff;">这里是内容……</font>，如果我们显示正文内容的页面刚好又不是白色的,我们无辜的页面就出现了文字...
Tags: 浏览器
站在前端看静态网页
作者:dangbao 日期:2009-12-09
之所以这么写，是一直想写一个能完全实施和实现自己想法的一个站或者是一套页面。当然这个实现起来对于我来说确实有一定的难度，也需要网站各个职能的人员去集思广议，而且也需要很大的精力去弄。我也只能是站在前端人员的角度谈谈，下面我具体来说说。
1.策划设计。
一个好的策划方案是一个完美网页的根基。这个就不多说了，就按一般网页可体现的内容和形式来吧。先抛开设计的水平和效果不谈，光以写静态的角度来分析。
首先网页的图片要达到个性和共性并存，尽量用少的图片达到整体网页效果变化和统一。呵，这话意思有点模糊，比方说标题条是一个背景，那么所有的标题条背景都可以用这个背景，而变化就可以在标题上做图片装饰变化。
然后是合理利用图片表现文字，大家都知道网页的字体太大就不圆滑了，而想实现圆润绚丽或突出的字必须用图片。以前我们遇到这样的情况就直接切下来图片嵌到页面里去。现在...
1.策划设计。
一个好的策划方案是一个完美网页的根基。这个就不多说了，就按一般网页可体现的内容和形式来吧。先抛开设计的水平和效果不谈，光以写静态的角度来分析。
首先网页的图片要达到个性和共性并存，尽量用少的图片达到整体网页效果变化和统一。呵，这话意思有点模糊，比方说标题条是一个背景，那么所有的标题条背景都可以用这个背景，而变化就可以在标题上做图片装饰变化。
然后是合理利用图片表现文字，大家都知道网页的字体太大就不圆滑了，而想实现圆润绚丽或突出的字必须用图片。以前我们遇到这样的情况就直接切下来图片嵌到页面里去。现在...
css+xhtml页面构建的心得总结
作者:dangbao 日期:2009-12-04
写了这么长时间的静态页面了，有必要来整理一下网页代码的书写心得，也许会对读者您有所帮助。我按照一般页面构成来说吧。
login:
头部一般会有登陆条。写用户名密码的地方，建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示，有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧，不妨都试试，不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做，不过最好带上浮动float:left，而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥，...
login:
头部一般会有登陆条。写用户名密码的地方，建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示，有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧，不妨都试试，不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做，不过最好带上浮动float:left，而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥，...
css控制打印网页
作者:dangbao 日期:2009-11-13
这个话题想谈很长时间了，之前做一个栏目需要让用户打印页面标题和正文的，而正文之外的东西都不需要打印。这个时候就用到了控制打印的样式表了。正因为xhtml和css是分离的，所以我们可以在print.css里自由书写需要打印显示的内容和表现形式。那么这也要求我们在书写xhtml的时候更多考虑到打印显示效果的需求，良好的扩展标记和结构嵌套，使得我们轻松的使用display:none将内容设置为不显示。然后就是去书写print.css内容的时候了，你象设置wor...
Code
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Dangbao的CSS共用代码
作者:dangbao 日期:2009-11-05
写了这么长时间的CSS，总归有一部分共用样式是重复出现机率最高的，花时间总结了一下，方便自己，也方便要学习的同志们，希望对大家有用。
Code
@charset"utf-8";
div,form,input,select,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0;font-size:12px;}
body{font-family:"宋体", Verdana, Arial;margin:0;padding:0;background:#fff;font-size:12px;color:#333;}
li{list-style-type:none;}
/*link*/
a{color:#333;text-decoration:none;}
a:hover{color:#cc0000;text-decoration:underline;}
/*public*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;height:0;overflow:hidden;display:block;}
.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.mt{margin-top:6px;}
.blank{height:6px;display:block;overflow:hidden;}/*空白div*/
.all{color:#cc0000;padding-left:3px;}/*全文*/
.more{float:right;color:#cc0000;padding-right:10px;}/*标题右侧更多*/
.pic{padding:1px;border:1px solid #ccc;}
div,form,input,select,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0;font-size:12px;}
body{font-family:"宋体", Verdana, Arial;margin:0;padding:0;background:#fff;font-size:12px;color:#333;}
li{list-style-type:none;}
/*link*/
a{color:#333;text-decoration:none;}
a:hover{color:#cc0000;text-decoration:underline;}
/*public*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;height:0;overflow:hidden;display:block;}
.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.mt{margin-top:6px;}
.blank{height:6px;display:block;overflow:hidden;}/*空白div*/
.all{color:#cc0000;padding-left:3px;}/*全文*/
.more{float:right;color:#cc0000;padding-right:10px;}/*标题右侧更多*/
.pic{padding:1px;border:1px solid #ccc;}
Tags: public-css
10大排行列表的OL默认项目符号
作者:dangbao 日期:2009-10-14
昨天在写页面的时候碰到了一个排行榜的列表，从1排到10.我看设计是普通样子来显示的，就想起来用OL吧，也不经常用，正好试试。写好以后看了一下还行，我又看了一下设计图，前面的项目符号是粗体的，那我就给ol加了个font-weight:bold,然后给ol li加了font-weight:normal,没想到居然不管用，哈，有点意思，看来项目符号是算在li内的。在群里朋友的提醒下，我改给li加粗体，然后给li a设置正常状态，HOHO，成功了。可唯一郁闷的是，项目符号10.的.居然和li里内容的第一...
Code
.topBar ol li{margin:0 0 0 8px;height:23px;line-height:23px;list-style-type:decimal;list-style-position:inside;display:list-item;}
Tags: ol
谈页面重构的团队协作和后期维护
作者:dangbao 日期:2009-05-27
为什么写这篇文章？因为我看到越来越多的公司重构职位要求注重这方面。一个公司的网站一旦成型以后，就很少去做大的调整和改版。剩下的就是缝缝补补、改改换换。恰恰是这些看似是小问题的问题，前端人员发愁了。在原有结构上替换某一处的内容还可以，但是一旦涉及到新需求必须改变原有页面结构的时候，矛盾出现了。原来的结构是深思熟虑、精心编排的，而如果确定需要改动的话，很可能影响甚至破坏页面其他区域。而且，这个时候的页面的静态动态已经成型，更改只能是页面和程序一起来协作进行，使得工作效率变的很低，测试也有点麻烦。改的时间也不一定是你刚写完就改，也许是放下好几个月后又来，又怕写的样式和别的地方冲突，又担心写的东西不兼容，结果可能是越改越乱，虽然页面表现上没什么问题，但是从代码上讲，已经打破了原来那么规整严谨的书写。对于一个专业的页面重构人员，这么情况实在是很难受啊。那么，如何尽量避免后期维护出现的不利因素呢？现在我就来谈谈我自己的感受…
系统自带网页字体分析和效果
作者:dangbao 日期:2009-04-08
网页字体显示一直是中文的硬伤，默认的中文字体只有少的可怜的几种。而且字体太大了会有明显的锯齿，严重影响了网页整体效果。正式网页中我们能用的也就是宋体和黑体两种。而且黑体的使用一般也只用在标题或者导航中。所以一直以来，我们想要绚丽的中文字体，只能通过图片来表现。当然也可以用@font-face来显示我们需要的字体，但是对于网络及带宽来讲，字体的体积也太庞大了。如果连英文操作系统的中文显示效果也考虑到，那么我们还是乖乖的用默认的字体吧。定制字体语法：
既然中文字体很难做文章，那么就让我们来看看英文字体的变换吧。下面是本博整理的系统英文字体实际效果对比。
Code
@font-face{font-family:Mistral;src:url(字体文件地址);}
Html
CSS Sprites之宽度自适应菜单
作者:dangbao 日期:2009-03-16
JavaScript中的CSS属性及命名规范
作者:dangbao 日期:2009-03-12
许多CSS样式属性的名字中都有连字符，在JavaScript中，连字符被解释为减号，因此，CSS2Properties对象的属性名和真正的CSS属性名有点不同。如果一个CSS属性名含有一个或多个连字符，在JS中则需要删除了连字符，并且原来紧接在连字符后的字母改为大写。要注意的是float是JS的关键字，所以在JS中float被写作cssFloat与或floatStyle。下面是CSS自身属性与JavaScript中CSS编码对照表:
盒子标签和属性对照:
盒子标签和属性对照:
Code
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
Tags: JavaScript
