谈谈网页设计中的字体应用Font Set

2016年07月27日 47 阅读

Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧...

网页设计中的 serif 和 sans-serif字体应用

2016年07月27日 45 阅读

Howdy, 大家好，又是我~ 上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的“通用字体族”。首先是最常用的 serif 和 sans-serif 这两个通用字体族。- serifSerif 在印刷学上指衬线字体。为了理解衬线字体的概念，大家先看几个典型的衬线字体的例子：My Georgia字体 King Times New Roman 字体 汉字 宋体 单词 My 中的字母 “M”上下方突出的...

采用XHTML和CSS设计可重用可换肤的WEB站点的方法第1/4页

2016年07月27日 41 阅读

XHTML 标准的目标是取代 html。按照 W3C 的说法，“XHTML 是 html 的继承者”（http://www.w3.org/MarkUp/）。 XHTML具有两大目标： 在文档结构和表示形式之间创建更明显的分离。 将 html 重新表示为 XML 的应用程序。 使用XHTML标准的好处是：只需设计页面一次，即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如，在按照标准生成以后，页面在Internet Explorer、Mozill...

CSS 浏览器的等宽空格问题解决

2016年07月27日 41 阅读

但是 也不是很可靠，比如空格间距非常大，那么我们必须增加多个占位符，同时页面的体积会变得非常大。同时，注意到 Safari 中的 宽度是已设定字符的空格宽度（Safari 的默认字体为 Times），也就是说一个中文字符需要两个占位符。具体情况如下图所示：其实，这不是 Safari 的问题，而是字体的问题。解决的方式就是使用下面的属性font-family: "宋体";将 Safari 的默认字体设置成“宋体”等中英文等宽的字体，就能解决。Window...

欲练CSS ，必先解决IE的一些细节分析

2016年07月27日 49 阅读

更加坏的事情是，即使你仅仅针对IE设计，不考虑其它浏览器，由于IE模型绝对可以说是一只让人难以捉摸其脾气的怪物，所以你单纯为IE设计也会遇到众多难题，发现很多的效果总是绕来绕去都难以实现。我们都知道，XHTML+CSS的目标就是实现内容与表现分离，理论上对于任何特定一份内容，我们都可以通过CSS实现任何我们想要的表现形式，或者细致地说是布局形式。虽然现实与这个目标有一定差距，但是CSS已经能够满足大多数常见的布局需求，这有CSS Zen Garden为证。...

XHTML标签的自关闭写法的坏处分析

2016年07月27日 44 阅读

如果你熟悉XML相关的开发，可能也就习惯于这种写法，想着XML中任何不含子节点的元素都可以这样写，那么XHTML中没有内容的标签也都可以这样写。XHTML中理论上当然允许任何标签以自关闭的方法来书写，然而浏览器兼容性却带来了新问题，那就是IE无法正确识别某些标签的自关闭写法。请尝试输入以下XHTML代码并在IE中浏览：<p>hello <scripttype="text/javascript" /> world</p>，...

提高网页效率的14条注意事项图文第1/3页

2016年07月27日 43 阅读

网站最基本的东西是什么？ ——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！ 内容再丰富的网站，如果慢到无法访问也是毫无意义的； SEO做的再好的网站，如果搜索蜘蛛抓不到也是白搭； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。 所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢？Steve Souders（Steve Souders的资料http://www.oreillynet.com/pub/au/2951...

提高网页的效率 Use YSlow to know why your web Slow第1/2页

2016年07月27日 46 阅读

所以网页的效率绝对是最值得关注的方面。虽然我们在 《如何提高网页的效率（上篇）——提高网页效率的14条准则》提到了如何提高网页效率的14条准则，但是如何知道我们现在的网页的效率到底如何？到底处于怎样一个级别？又有哪些方面做的不够好，需要改进呢？也许，你会说，问一下用户不就知道了吗？但是相比感性比例占据太大的用户感受而言，理性的工具和数据更具有说服力。本篇就将向你介绍一款评测网页效率的工具——YSlow（why slow，这个名字起的太好了）。 yslow ...

顶级经典常用的CSS属性收集整理

2016年07月27日 43 阅读

文本两端对齐： 复制代码 代码如下:text-align:justify; text-justify:inter-ideograph; 清除浮动： 复制代码 代码如下:.clear{clear:both;line-height:0;height:0;font-size:0;} 清除浮动伪类： 复制代码 代码如下:.clearfix:after{content: ".";display: block;height: 0;clear: both;visibil...

10条影响CSS渲染速度的写法与使用建议第1/3页

2016年07月27日 42 阅读

这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分，暂时总结了10条。 1、*{} #jb51 *{} 尽量避开 由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签； *{margin:0; padding:0} 如果这样写，页面中所有的标签的margi...

CSS 关于网页图片的属性

2016年07月27日 44 阅读

图片外框特征参数: ①dashed：虚线 ②dotted：点虚线 ③solid：实线 ④double：双线 ⑤groove：沟槽状 ⑥ridge：脊状 ⑦inset：内嵌 ⑧outset:外嵌 CSS TP特殊效果风格属性 ①灰/黑：Gray/Xray ②差值：Invert ③水平：Fliph ④垂直：Flipv ⑤羽化：Alpha（Opacity=100,Style=2） ⑥透明度：Alpha（Opacity=33,Style=0） ⑦模糊：Blur（A...

CODEPAGE 列表与asp应用例子第1/2页

2016年07月27日 45 阅读

指定的代码页特性无效。 codepage属性：是指出网页的代码页 如果制作的网页脚本与WEB服务端的默认代码页不同，则必须指明代码页： 代码如下: codepage=936 简体中文GBK codepage=950 繁体中文BIG5 codepage=437 美国/加拿大英语 codepage=932 日文 codepage=949 韩文 codepage=866 俄文 codepage=65001 unicode UFT-8 页面编码的使用: 基于vbs...

html 的 ContentType 小结

2016年07月27日 44 阅读

ContentTypes : "ez","application/andrew-inset" ContentTypes : "hqx","application/mac-binhex40" ContentTypes : "cpt","application/mac-compactpro" ContentTypes : "doc","application/msword" ContentTypes : "bin","application/octet-str...

学习WEB标准总结的一些CSS/XHTML知识小结第1/3页

2016年07月27日 43 阅读

1、很多兼容性问题，是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义 复制代码 代码如下:* { padding：0; margin:0;} 或者 复制代码 代码如下:ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;} 2、关于布局，可以看dreamweave...

CSS文件可维护、可读性提高指南第1/2页

2016年07月27日 48 阅读

所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。 一、CSS样式文件分解 对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。 而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master s...

不要使用CSS Expression的原因分析

2016年07月27日 41 阅读

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。 CSS Expression在其它浏览器中不起作用，因此在跨浏览器的编码中单独针对IE设置时会比较有用。 从IE5开始支持CSS Expression。我们看下面的代码： 复制代码 代码如下:background-color: expression（ （new Date（））.getHours（）%2 ？ "#F00" : "#00F...

css ie6 ie7 ff的CSS hack使用技巧

2016年07月27日 42 阅读

FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器。在IE6和IE7如果要使用HACK必须...

div+CSS网页布局的意义与副作用原因小结第1/2页

2016年07月27日 42 阅读

如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、比较上手；但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法——DIV+CSS。 CSS网页布局的意义体现在如下方面： 一、使页面载入得更快由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载...

iframe自适应高度的多种方法方法小结

2016年07月27日 41 阅读

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 第一种方法：代码简单，兼容性还可以，大家可以先测试下。复制代码 代码如下: function SetWinHeight（obj） { var win=ob...

css display:none使用注意事项小结

2016年07月27日 43 阅读

1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。 2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到...