Dangbao's Blog

浏览器优先级实例之--!important

dangyifan@163.com(dangbao) — Mon, 25 Jan 2010 14:54:46 +0800

看到这样的页面效果你是作何感想？我们的编辑为了防止长时间的盯着屏幕而造成对眼睛的伤害，毅然选择将Windows主题外观里的窗口设置为暗色调，以求更小的颜色刺激。可怜的小编们的眼中的网页变了颜色。没有设置背景颜色的body、div、input都成了这种暗色。哈哈，一旦被老板看到后，可怜的csser就要后悔没有给任何一个元素加上背景色了。不说闲话了，祭出重点，更改了系统默认主题后，一些编辑器会自动给textarea里内容加上<font style="background:#ffffff;">这里是内容……</font>，如果我们显示正文内容的页面刚好又不是白色的,我们无辜的页面就出现了文字带白色背景的现象。该怎么办呢？改编辑器，去除默认白背景？写JS代码，遍历所有FONT，删除STYLE？此刻我们想的是页面的行内style应该是最优先的。问了下群内神人，查了查资料，才发现另有优先级高的“大爷”呢！

Code
font{background:none!important}

哈哈，真是没想到，再温习下优先级的概念：

Code
叠重要性指数的次序依次为： 
标记为!important的用户样式 
标记为!important的作者样式 
作者样式 
用户样式 
浏览器/用户代理的默认样式

为了计算规则的优先级，每种类型的选择符都有一个相应的数值，由于每个选择器都由若干选择符组成，所以选择器的优先指数由选择符对应的数值相加而成，数值越高，优先级越高。CSS中的选择符有四类： 
行内样式为：1000 
ID选择符为：0100 
类选择符为：0010 
元素样式为：0001 

平常只顾着兼容浏览器的同志们，看来咱还真该回头认真的学习下理论知识咯！

PS:通过以上的应用，同理我们可以在一些时候限制用户随意更改字体大小而产生的行距不够美观的问题，一行font{font-size:16px!important}解决问题！

加入收藏的普通版和jQuery版

dangyifan@163.com(dangbao) — Mon, 25 Jan 2010 10:05:57 +0800

关于“加入收藏”的代码，很多人都不会重视，一般情况是随便在网上搜一个代码放在页面里得了。前几天群里的一个朋友说要找一个全兼容的收藏代码，说是为了统计加入收藏夹的人数用。这下可是犯了难，都知道google chrome没有这个功能，无奈之下只好祭出弹对话框提示Ctrl+D了。
普通版的加入收藏：

Code

jQuery的加入收藏

Code

JS:
$("h3").click(function() {
        var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL';
        if (document.all){
          window.external.addFavorite('http://www.dangbao.net','Dangbao's Blog');
          }else if (window.sidebar){
         window.sidebar.addPanel('Dangbao's Blog', 'http://www.dangbao.net, "");
       }else {
               alert('您可以尝试通过快捷键' + ctrl + ' + D 加入到收藏夹!');
       }
    });
HTML:<h3>加入收藏</h3>

jQuery版的在HTML里干净的页面代码，把事件处理都交给jQuery来处理了。

本博2010年开篇日志

dangyifan@163.com(dangbao) — Thu, 21 Jan 2010 17:15:24 +0800

时间已经到了2010了，我的博客在此期间“杯具”了。原因自是不用多说，空间商倒闭、域名换解析等一系列问题，使得我都没有信心再开博了。快过年了，很多事就自然想的过完年再说，总要想着法儿的让自己忙碌一年的身心歇息一下。时间现在真的过的好快，快节奏的生活甚至让我对近两年都没有什么深刻的记忆了。纵然是有着奥运记忆的08年，居然也在我脑袋中是清淡的印象。好吧，就套一句深邃的话：“这，就是生活！”

辞旧迎新之际，国人总要总结一下过去，展望一下未来。过去一年，好(鼓掌……)！未来一年，好(鼓掌……)！不想用太多的言语来描述现在的生活状态，是因为一切美好在我心中(此处估计有热烈掌声)！

没有太多说的了，用这段话占用日志的一个ID，有少许罪过感。之前发的那篇FIFA Online的日志就是如此，其实我是用来测试下SEO的效果，可是正赶上博客老是停止访问，所以也没什么效果Orz……。不过想想可以写些文字来说祝福的话就好多了，先不奢求太多，因为过年的时候大家都会收到满满的祝福的。我先希望过年的时候能好好歇歇，陪陪家人，也希望浏览我博客的朋友能度过一个愉快的节日！

Google AdWords的500元免费广告费

dangyifan@163.com(dangbao) — Mon, 28 Dec 2009 16:30:34 +0800

之前收到google的邮件也没在意，后来听群里的人说送广告费是真的。于是后来又不小心看到这个活动，那就申请试试吧。注册了以后没几天，就接到google中国上海总部打来的电话，客服小姐会简单的问问你注册时的基本情况，而后就是等给你开通后登陆。这里要注意的是，第一次登陆的时候需要设置AdWords的帐号是否与你已有的google帐号捆绑。设置成功后就能登陆了。那几天的网速特别慢，登陆后感觉很卡，客服小姐打了好几次电话问我的帐户ID都没成功，后来终于完成登陆才知道了，还根据提示设置了相关的帐户信息、制作广告牌、设置关键字及费用支付等等一系列，而且最重要的是要接受你的客户经理的管理邀请。这样才能让GG给你的帐号打钱，然后广告位才能生效。这里需要说明的是，AdWords的启动资金是需要50元，网络上流传的这50元是需要自己支付是不对的，我的50元就是GG给的，也就是说，除去启动金50元，GG给了我450元的广告费。广告位上价了俩天，点了4次，一共花了2块多。再观察几天看看。值得称赞的是GG的客服很是耐心，即使我这样的免费用户也是不厌其烦的打电话过来辅助客户操作。好了，更多的体会在之后奉上！

免费广告费申请地址

ps:有朋友也申请了，不过说是要预存50元启动金，一头雾水中…………

谈fifa online2妖人和分配能力

dangyifan@163.com(dangbao) — Thu, 10 Dec 2009 10:51:04 +0800

首先声明我不是个狂热的游戏玩家，只是因为喜欢足球才玩上了这游戏。单机的也偶尔玩玩实况足球。fifa online2是因为同事买的杀毒软件送的一张新手礼包才开始接触的，呵，就是工作之余放松下心情。
在fifa online2里，妖人是指能力在1300以下，个人能力特别突出的队员。能力大于1300的话，续约的时候需要花很多的钱，而1300以下则只需要100金币。刚开始玩的时候我不知道，见到能力高的球员就买回来，总想组建一支豪华之师，可是随着明星球员的越来越多，续约的费用也越来越高，到最后实在是养不起了。所以，又不想花RMB又想球队厉害，挑选妖人是相当重要的。
说下至今我用过的妖人吧。前锋里我最喜欢的是黑尔姆斯，换了4支球队了一直带着呢。用着舒服，脚法不错。现在玩巴萨，得的前锋妖人有奎罗，中场妖人D.奥东科尔、迭戈卡佩尔、克鲁萨特、贝莱隆，后卫妖人有：梅策尔德、卡纳瓦罗，门将是卡西利亚斯、迭戈洛佩斯，其它明星门将也用过，都不错。门将一定要选最好的，因为它的续约费用永远是100金币的。
基本上选几个好的门将轮着用，前锋用一个明星球员（1500+）和数个妖人前锋，中场来俩1400+的就足够了。
当然，升级时候分配能力点数也是很重要的。如果是妖人，一定要他妖到底，突出的能力一定要加足。前锋加射门精度和力量、当然这俩项太差的前锋可以适当考虑加盘带和控球，甚至是短传，方便进攻时候俩前锋的配合。边路加速度和加速还有盘带，中场加控球、反应和短传，后卫就加一些防守的数值了，适当时候可以加点身体的力量体能和稳定什么的。哈，这都是我的一点小小的经验，至今我的球队也没有太多的战术，就是通过短传渗透进攻，大多数时候进球都依靠球员个人能力。

如果你是喜欢足球的朋友，如果你又刚好有那么一点点时间，可以考虑玩一下。
http://www.eafifaonline2.com/

站在前端看静态网页

dangyifan@163.com(dangbao) — Wed, 09 Dec 2009 16:29:23 +0800

之所以这么写，是一直想写一个能完全实施和实现自己想法的一个站或者是一套页面。当然这个实现起来对于我来说确实有一定的难度，也需要网站各个职能的人员去集思广议，而且也需要很大的精力去弄。我也只能是站在前端人员的角度谈谈，下面我具体来说说。
1.策划设计。
一个好的策划方案是一个完美网页的根基。这个就不多说了，就按一般网页可体现的内容和形式来吧。先抛开设计的水平和效果不谈，光以写静态的角度来分析。
首先网页的图片要达到个性和共性并存，尽量用少的图片达到整体网页效果变化和统一。呵，这话意思有点模糊，比方说标题条是一个背景，那么所有的标题条背景都可以用这个背景，而变化就可以在标题上做图片装饰变化。
然后是合理利用图片表现文字，大家都知道网页的字体太大就不圆滑了，而想实现圆润绚丽或突出的字必须用图片。以前我们遇到这样的情况就直接切下来图片嵌到页面里去。现在大部分同仁开始重视页面代码的质量，这种情况一般都是把图片用背景来显示，而页面代码里则是图片上的文字，然后做了隐藏，这样在网页上显示是没问题的。所以，网页上显示的字用图片还是字符显示，这是一个值得探讨的话题，这就好象冬天时候女人是要身材还是要温暖，男人是要风度还是温度一样。只能是根据实际情况和策划需求来定。
还有一点就是内容块的间距margin和填充padding。个人认为，在大部分的时候要使用统一的尺寸来定义，这样的好处一是有了统一感，二是省了一些CSS代码，三是修改和维护方便，改一处则全局适用。以上几点做为一个有制作经验的设计师肯定是会考虑到的，这里想引申的就是事先综合的考虑和有效的沟通，避免页面已经设计好又去修改的返工。
2.静态页制作。
这个可谈的就太多了，只能是把一些大的方面拿出来说说，毕竟真正去写一个页面的时候遇到的情况是不一样的。我还是说一点共性的东西。
图片的合理切片。切图的时候注意图片的优化，在质量和文件体积之间找到平衡点。合理使用css spirit。尤其是涉及到垂直和水平重复平铺图片的时候，更应该考虑各个小图的摆放位置及生成的图片大小体积。
标签的合理运用。什么时候该用H1、H2，什么时候该用div和span，都要在充分了解页面内容和标签意义下使用。同时我们也要考虑在页面裸奔（网页没有加载CSS）的情况下的显示情况。而这一切，都需要你有扎实的HTML功底。
结构-行为-表现的分离。虽然我们谈这个话题很久了，虽然我们已经在绝大部分时候已经做到这一点了，但是，我想要的是真正的分离。不要告诉我你页面里有onmouseover和onmouseout就是纯CSS制作。即使禁了JS，页面还是那个样子的页面。而这是我要努力和方向。目前来说，jQuery会帮很大的忙。

广大的WEB团队在开发过程总是会遇到这样那样的不统一和理解错误而造成工作效率低下，而绝大部分中小型团队因为自身水平和其它客观因素，不能制订一套自己的页面规范，只能靠相互的默契或牺牲时间去弥补，导致做出来的东西完全不是自己想的那样，而网站本身就是一个团队配合的事情，如果能够更好的更有效率的完成项目，这真是个课题。希望我们能够在工作和学习中开发出自己心中的完美网页。

以上的想法纯属是个人愚见，太理想化了，对则勉，错请责：）

周六秦皇岛周日北戴河

dangyifan@163.com(dangbao) — Mon, 07 Dec 2009 15:42:48 +0800

因为有事情要办，所以和鹿在周中就预订了周六去秦皇岛和周日返程的车票。去的时候是普通列车，走了3个半小时，回来时候是哈尔滨南下的动车，只要两个小时到京。除去需要办的事情之外，此行我们还有两件事，一是吃当地的小吃，二是去渤海海边。

我们到达的时候已经是将近中午12点了，第一感觉秦皇岛的街道比较宽也很干净，路上车不是很多，人们也怡然自得。我们乘坐34路公车直达燕山大学，肚子饿的厉害，就在小吃摊市场里吃了当地有名的煎焖子和炒面皮。来吃的大都是学生和附近上班的人，天气虽然有点冷也有点风，人们还是在露天的桌子上吃的津津有味。鹿说这里就是这样的特色，小吃就得在摊上吃好吃，看见每个人吃的特香自己也觉得香了。吃完之后在附近宾馆安排住下，而后匆匆去办事，而后回来又在燕大的一个馆子吃了晚餐，消费不高，饭菜味道不错，有一道酥溜鸡片不错。在超市买了两包当地的烟北戴河和钻石，又提了一瓶昌黎的葡萄酒，那酒还是比较醇的，喝完了睡的很香。

第二天起来8点多了，在燕大外面的小吃摊吃的熏肉大饼，味道不错，我们还打包了两个带走。而后是去北戴河了，路过了秦皇岛的奥体中心，附近有个很大的足球雕塑。我们先去石塘路的海鲜市场随便买了点海产品尝尝就又返回在野生动物园下车，走不到200米就是大海了。在车上也曾看见过，但是和走在跟前的感觉完全不一样。海风吹来有点凉，但是很清新。风不是很大，但是我感觉浪很有劲，似乎海下有无数力量在推动着的暗涌。海浪一波波的打过来很是好看，岸边已经结了一层层薄冰了，浪一遍遍的冲了上来，终于体会到了书上说的“海浪亲吻着沙滩”的意思了，哈。我们沿着海边走，回头能看见鸽子窝，前面则是市区的一栋栋高楼，隐约的很好看。冬天海边的人很少，只有过来锻炼和散布的几个人。海上有飞的海鸥，也有在海边散布和休息的。我站在最岸边的时候看潮涌来会有点晕，而后我们又看见了一艘小船驶来，看着不远的样子却游了好长时间才到岸。时间的关系，我们只好离开了。而后又去了市中心的金三角，吃了点小吃看看这片三角形的商业街区，有点意思。转的有点累了，我们坐车到了火车站找地儿坐下，一会儿俩人的脸都红了，而且也感觉烫烫的，呵呵，这是大海馈赠我们的礼物。

css+xhtml页面构建的心得总结

dangyifan@163.com(dangbao) — Fri, 04 Dec 2009 11:49:24 +0800

写了这么长时间的静态页面了，有必要来整理一下网页代码的书写心得，也许会对读者您有所帮助。我按照一般页面构成来说吧。
login:
头部一般会有登陆条。写用户名密码的地方，建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示，有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧，不妨都试试，不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做，不过最好带上浮动float:left，而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥，比如我之前写的一个菜单。.
search:
搜索的输入框和按纽用padding值来控制里面字的显示吧，用height和line-height的效果可能在各个浏览器里不尽相同。按纽如果都用系统默认的样式就别清除默认的border值，如果用图片就必须清除.line-height的值比height大点可能效果会好点，不过要溢出剪切哦。
banner:
这个其实没什么可说的，但是针对一行多个广告条，我还要补充一句，banner既可能是图片也可能是FLASH，写的时候套个DIV写个宽度和溢出剪切没坏处。
list:
列表是出现最多的。控制内容和边框的间距最好给ul用padding,并且加宽度和剪切。至于li就要用height和line-height来控制了,如果回行也要剪，保证标题内容代码的完整而又不破坏页面美观。前面加点那肯定是用背景图片来控制了，默认的项目符号真的不好用。
titleBar:
标题行一般就是单独居左出现，或者右面是more和tags。这个写法也是根据每个人习惯不同而有变化的。我最近试着标题用H3，more或tags用H4来写。以后关注一下效果如何。毕竟这样的话，在没有加载样式的情况下，某块内容的标题会突出显示。当然more和tags用span写也可以，这样看具体显示的内容而定了。
pictureWrap:
图文混排的表现形式比较多，语言描述也太麻烦就不说太多了。想说的就是图片配标题的时候，给标题加个class，定义一下宽高和行高，然后溢出剪切，这样标题太长也不会挤乱页面了。而且写动态程序的时候也不用去数截取多少个字了。毕竟，我们想留给读我们代码的爬虫一个完整的标题。
footer:
这个也没多少可说的，该怎么写就这么写，能用A标签的就不用li了。记得统计代码放在最后，而且最好给他一个dispaly:none的样式。

好了，就写这么多吧，虽然很多代码可能是需要重复敲打好多遍的，可是如何写出既让人又让机器读的舒服的代码，是我们需要逐步总结和研究的，而这更是我们努力的方向。

PS：以上纯粹是本人一个时期内的心得总结，如有不妥之处还请您不吝赐教，共同进步！

jQuery的隔行变色条纹效果

dangyifan@163.com(dangbao) — Wed, 25 Nov 2009 09:31:49 +0800

两种颜色交替的条纹比较常见，用jQuery写比较简单，这也得益于jQuery的两个内置的odd和even的奇偶函数。想想用纯JS要写多少代码，用jQuery才4行而已。

Code
$(document).ready(function() {
  $('li:odd').addClass('odd');
  $('li:even').addClass('even');
});

三色交替条纹：利用索引将3个类指定3个数字，然后求模运算，得出每行的数值和对应的类。

Code
$(document).ready(function() {
  var className = {
      0: 'first',
      1: 'second',
      2: 'third'      
   };
   $('li').each(function(index) {
    $(this).addClass(className[index % 3]);                  
   });
});

当然，对应的扩展到4、5、6或更多条的背景颜色，就需要给className添加对应的数字和类,并添加模运算的除数即可。

dedecms调用代码改动归纳

dangyifan@163.com(dangbao) — Mon, 23 Nov 2009 10:16:30 +0800

使用了一段时间DEDECMS了，对网上朋友们总结出来的修改DEDE功能的方法做个小的归纳。

1.在首页调用最新的分类信息：

Code
{dede:arclistsg row='10' titlelen='50' orderby='pubdate' channelid='-8' typeid='7'}
<li>[field:textlink/]</li>
{/dede:arclistsg}

2.在首页调用分类信息的联动类别，以下代码添加在common.func.php里：

Code
//根据InfoTypeID获取信息类别（求购、求租、出售等……）的名称
//参数说明：第1个参数是从信息表里读取出来的类别ID，第2个参数是联动菜单类别
//这样这个函数就不限于只调用分类信息的信息类别了，还可以用于其它地方
function GetInfoType($tid,$bigt)
{
    global $dsql;
    $typename = '';
    $query = "Select ename From `#@__sys_enum` where evalue=$tid and egroup='$bigt'";
    $dsql->Execute('ename',$query);
    while($row = $dsql->GetArray('ename'))
    {
        $typename .= ($typename=='' ? $row['ename'] : ','.$row['ename']);
    }
    return $typename;
}
//------ End--------

首页添加代码

Code
[field:infotype function=GetInfoType(@me,'infotype') /]

3.问答模块在首页的调用方法。

Code
{dede:ask row='10' qtype='' titlelen='60'}<li>
     <a href='[field:typeurl/]'>[field:tidname/]</a>:<a href="[field:url/]">[field:title/]/a></li>
{/dede:ask}