Dangbao's Blog

Font-Family–CSS中文字体对照

写样式表的时候难免会遇到定义字体的时候,有的时候会因为在GBK和UTF-8之间转换而导致中文字乱码,所以专门看了一下常用中文体的英文名,要全记住不可能,也不可能全部用到,留个标记,方便以后查。

宋体 SimSun
黑体 SimHei
幼圆 SimYou
楷体 SimKai
仿宋 SimFang
隶书 SimLi
微软雅黑 Microsoft YaHei

全文

告别PJ,加入WP!

遥不可及的PJ4,可恶的便宜ASP空间。终于下定决心加入WP阵营了!

更新一下,3月最近

哎…俩月没更新了。那就说说近期的事呗。

媳妇的钱包丢了,身份证没了,银行卡也冻结了……

丈母娘来看我们了,带了一堆家乡的好吃的,还天天给做饭吃,入伏啊。

楼上的俩口子近期吵架闹别扭so比较安静,以至于我家基本能安静入睡。

在做shopex的模板,刚开始感觉很别扭,慢慢就习惯了,谁让你要用半开源产品嘛。

看了3D版爱丽丝梦游仙境,没有豆瓣上一些人说的那么差,效果还是挺棒的,画面非常美。

周末和家人去京味斋大吃一顿啊,那焦溜丸子、炸酱面,爽!以至于中午吃饭到晚上也不怎么饿。。。

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

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

font{background:none!important}

全文

加入收藏的普通版和jQuery版

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

jQuery的加入收藏

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 加入到收藏夹!');
}
});

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

本博2010年开篇日志

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

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

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

Google AdWords的500元免费广告费

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

免费广告费申请地址

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

站在前端看静态网页

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

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

以上的想法纯属是个人愚见,太理想化了,对则勉,错请责:)

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

写了这么长时间的静态页面了,有必要来整理一下网页代码的书写心得,也许会对读者您有所帮助。我按照一般页面构成来说吧。
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的隔行变色条纹效果

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

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

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

$(document).ready(function() {
  var className = {
      0: 'first',
      1: 'second',
      2: 'third'
   };
   $('li').each(function(index) {
    $(this).addClass(className[index % 3]);
   });
});
当然,对应的扩展到4、5、6或更多条的背景颜色,就需要给className添加对应的数字和类,并添加模运算的除数即可。

标签:

android bom border css工具 css布局 display DW ff firefox fireworks fixed flashget html ie6 IETester IE开发人员工具 iis jQuery jq插件 win7 WordPress 分类信息 挂马 无线路由器