`

看css禅意花园记的笔记

 
阅读更多

UTF-8是一种Unicode,Unicode是一种流行的国际编码方案。
好处是,不同字符集的多种语言可以共存于同一张页面中

用户界面 设计基本法则:

  • 了解将浏览页面的用户
  • 在页面和站点中给用户足够的导向
  • 使用被熟知的符号 
  • 保证与功能 相关的特性在页面中足够显眼
  • 保证设计元素的一到处性
  • 了解页面中的关键元素
  • 清楚表达 页面的内容
  • 与布局相关的可用性问题
  • 重要信息放在显眼的位置
  • 在title中给出页面的简单介绍
  • 保证导航链接一致表现。确保页面中包含回到站点首页的链接
  • 提供搜索功能 
  • 用缩进和偏移



position:fixed。其div将永远保留在同一个位置,且页面中的其他 元素定位 在于其下方

z-index设置固定元素的前后位置关系。高的覆盖低的

logo放在页面左上角,浏览者一般首先看这个地方。右上部分重要,底部不是那么重要

应用浮动,清除浮动.<div class="clear"></div>

web页面中常用 图像格式 gif,jpeg,png

无损压缩将保留原图像的所有细节,有损压缩会对细节有所取舍,
以换来更小的文件

色深color depth
指某种图像 格式包含的颜色的多少。8位的色深有256种颜色

gif 8位 支持一位的透明 度,即某个像素要么完全透明,要么完全 不透明
jpeg 24位色深 不支持透明
png 24或8位 24位的文件很大,但完全无损。支持透明。可实现 256级的透明度

gif和jpeg常用 。前用于带有大块相同颜色 区域的图像
jpeg用于照片等色彩,细节丰富的图像
优化jpeg 高品质意味更大的文件


font-weight:normal 正常(400)bold粗(700)weight值
(300)比正常精细显得纤细。范围是最细的100到最粗的900
bolder更粗
lighter比继承值更细
inherit使本段文字的字体 粗细和父元素一致

text-decoration:overline上划线,linethrough删除线,blink时陷时现效果


line-height控制两行文字间的距离
line-height:0.8/0.8em/80%

letter-spacing字符间距 标题,小段文字


background-attachment:fixed/scroll 背景图像 会不会跟随图像而动

padding内边距


绝对定位:一个绝对定位元素会参照 它的定位容器元素来定位。如果没有定位容器元素
则会以html根元素为参照

字体网站
http://www.identifont.com/find?font=arial

css crib sheet
若是不确信的话,就去验证


w3c提供的XHTML CSS验证工具
http://validator.w3.org
http://jigsaw.w3.org/css-validator

创建并测试css,首先在最高级,最先进的浏览器中进行
(firefox,safari,opera中测试,再在IE中调整)

若用浮动实现布局,确保正确的清除了浮动

为元素应用内边距或边框来避免外边距重叠



避免IE6的 无样式内容瞬间 现象


不要依靠min-width,min-height属性。IE不支持

尝试减少百分比值
浏览器的计算中的舍入误差有时会让50%+50%=100.1%



 

分享到:
评论

相关推荐

    css禅意花园代码/css禅意花园代码/css禅意花园代码

    《CSS禅意花园》是一个非常著名的在线资源,它在Web设计领域中有着广泛的影响,尤其在CSS(层叠样式表)的学习和应用上。这个项目始于2003年,由Molly E. Holzschlag、Eric A. Meyer、Dave Shea等人发起,旨在展示...

    css 禅意花园源代码

    《CSS禅意花园》是一个著名的在线项目,旨在展示CSS(层叠样式表)设计的多样性和创新性。这个项目的源代码包含了许多设计师的作品,每个作品都代表了不同的设计风格和技术应用,为学习和理解CSS提供了丰富的实践...

    CSS禅意花园-源代码.rar

    《CSS禅意花园》是一本深受前端开发者喜爱的经典著作,其源代码库包含了大量精美的CSS设计示例,旨在帮助读者深入理解并掌握CSS布局、样式和设计技巧。这个名为"CSS禅意花园-源代码.rar"的压缩包中包含了多个示例...

    CSS禅意花园.pdf

    CSS禅意花园.pdf 个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除!

    CSS禅意花园-源代码

    《CSS禅意花园》是一个著名的在线项目,它展示了CSS(层叠样式表)在网页设计中的强大潜力和艺术性。这个项目鼓励设计师通过编写CSS来创造独特的视觉效果,从而推动了CSS技术的发展。源代码提供了深入理解这些设计...

    css禅意花园 CSS Zen Garden

    **CSS禅意花园:探索与理解CSS设计的艺术** **引言** `CSS禅意花园`(CSS Zen Garden)是一个著名的在线项目,旨在展示CSS(层叠样式表)在网页设计中的强大潜力。该项目由Dave Shea于2003年创建,它的核心理念是...

    CSS禅意花园原版+英文版

    而此时此刻,这样一本讲述“CSS禅意花园”网站的、名为《CSS设计禅机》的书就这样静静躺在你手中!毫不夸张地说,它丝毫没有辜负“禅”这个美名的褒扬,加上“CSS禅意花园”在Web标准领域内无可争议的地位,二者...

    CSS禅意花园源代码

    《CSS禅意花园》是一本深受前端开发者喜爱的经典著作,它深入浅出地探讨了CSS在网页设计中的艺术性与实用性。源代码是书中各章节示例的实现,为学习者提供了直观的参考和实践平台。现在我们来详细剖析这个资源所包含...

    css禅意花园大全(书和源代码)-3zip

    《CSS禅意花园》是一本深受前端开发者喜爱的经典著作,它深入浅出地探讨了CSS(层叠样式表)在网页设计中的应用艺术。这本书不仅仅是一本技术书籍,更是一本启发设计师创新思维的源泉。它通过一系列独特的设计实例,...

    CSS禅意花园-css的超级精典实例

    《CSS禅意花园》是CSS设计领域的一部里程碑式的作品,它不仅是一个网站,更是一个展示CSS技术深度和广度的平台。这个项目由上百位国内外顶尖的CSS设计师参与,他们通过自己的创意和技巧,构建出一系列独特的网页设计...

    《CSS禅意花园》.pdf

    这本书的作者是世界著名的网站设计师,书中的范例来自网站设计领域最著名的网站——CSS Zen Garden(CSS禅意花园)。全书分为两个主要部分。第1章为第一部分,讨论网站“CSS禅意花同”及其最基本的主题,包含正确的...

    CSS禅意花园(源代码)

    CSS禅意花园(源代码) 本书作者是世界著名的网站设计师,书中的范例来自网站设计领域最著名的网站——CSS Zen Garden(CSS禅意花园)。全书分为两个主要部分。第1章为第一部分,讨论网站“CSS禅意花同”及其最基本的...

    CSS 禅意花园 PDF

    ### CSS禅意花园:探索现代Web设计的核心理念与技术 #### 深入理解Web设计的进化历程 《CSS禅意花园》不仅是一本教授CSS技术的书籍,它更是Web设计历史与理念演变的见证。从上世纪90年代末互联网的混沌时代到Web...

    css禅意花园的一些例子(从网站收集,有图,有代码)

    《CSS禅意花园:探索与实践》 CSS禅意花园(CSS Zen Garden)是一个著名的在线项目,它展示了CSS样式表的强大潜力以及如何通过简单的HTML结构实现丰富的网页设计。这个项目鼓励设计师通过改变单一的CSS文件来完全...

    CSS禅意花园1

    CSS禅意花园 CSS禅意花园 CSS禅意花园 CSS禅意花园 CSS禅意花园 CSS禅意花园

Global site tag (gtag.js) - Google Analytics