杰拉斯的博客

标签:前端

网页设计中的安全字体

杰拉斯 杰拉斯 | 时间:2012-05-31, Thu | 8,657 views
前端开发 

转载内容(来自互联网)整理如下:

点评:在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。

但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用。

(阅读全文…)

方便、简洁:Flash AS3实现多浏览器兼容复制按钮

杰拉斯 杰拉斯 | 时间:2012-05-06, Sun | 31,067 views
前端开发 

众所周知,在网页中若想实现点击按钮自动复制到剪贴板中可以用以下代码实现:

if(window.clipboardData) {
    window.clipboardData.clearData();
    window.clipboardData.setData("text", "这是复制的文字");
}

但可惜的是,这种方式只支持IE内核浏览器。

而对于浏览器来说,Flash不存在兼容性问题,因此我们可以通过ActionScript来实现复制:

System.setClipboard("你要复制的内容");

(阅读全文…)

关于Web语义化

杰拉斯 杰拉斯 | 时间:2012-02-16, Thu | 6,374 views
前端开发 
“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,
每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,
例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;
针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。
这是一种恶性循环,是一种巨大的浪费。”

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用,很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。 其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

(阅读全文…)

网页建设规范

杰拉斯 杰拉斯 | 时间:2011-11-13, Sun | 10,485 views
前端开发 

一、命名规范

文件命名的原则:以最少的字母达到最容易理解的意义。

1.一般文件及目录命名规范:

每一个目录中应该包含一个缺省的html 文件,文件名统一用index.htm 文件名称统一用小写的英文字母、数字和下划线的组合尽量按单词的英语翻译为名称。例如:feedback(信息反馈),aboutus(关于我们) 。

多个同类型文件使用英文字母加数字命名,字母和数字之间用_分隔。例如:news_01.htm。注意,数字位数与文件个数成正比,不够的用0补齐。例如共有200条新闻,其中第18条命名为news_018.htm

(阅读全文…)

[前端]CSS3命名规范

杰拉斯 杰拉斯 | 时间:2011-09-12, Mon | 5,913 views
前端开发 
  • 头部:header
  • 内容:container
  • 尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体布局宽度:wrapper wrap
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:link
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签页:tab
  • 文章列表:list
  • 提示信息:msg
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guild
  • 服务:service
  • 注册:regsiter
  • 投票:vote
  • 合作伙伴:partner
  • 摘要:summary
  • 按钮:btn
  • 标签页:tab
  • 当前的:current
  • 小技巧:tips
  • 图标:icon
  • 注释:note