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禅意花园记的笔记相关推荐

  1. 《CSS 禅意花园》读书笔记1

    最近有点忙..但有的事情开始写博客就不能停下来. <<CSS 禅意花园>>读书笔记1(基础篇---------上) 在假期中买一本<<CSS 禅意花园>> ...

  2. 读书笔记:CSS禅意花园-图像

    图像文件格式:图像文件格式分为很多种,但是可以在Web可以流程运行的自由GIF.PNG.JPEG,现在详细介绍一下三种格式: GIF:使用一种LZW压缩方式进行无损压缩,支持8位色深,支持1位的透明度 ...

  3. 读书笔记:CSS禅意花园-布局法则

     设计的目标:      好的作品是能够唤起某种气氛和情感,引起欣赏者的共鸣,而 正如CSS禅意花园的名字所言,应该把握它的四点设计精髓- 视觉.CSS.禅.花园 ,真正优秀的设计应该给人平静.放松如 ...

  4. CSS禅意花园 —— 设计

    毕业对于论文困难群众来说真是太困难了,目测大家的平均字数都在2.5万左右.昨天"去中财的课程杠杆"花了我一天时间,今天,居然还发了生产实习报告的通知,我真吐了口血.真是,前有狼,后 ...

  5. 读《CSS禅意花园》中学习到的

    昨晚看完了网上名气很大的<CSS禅意花园>,其实整本书的内容都只是从web设计人员的角度出发,这本书对于网页制作人员而言,可以这么形容它的价值:饭后小甜点.     这是一本小品式的书.一 ...

  6. CSS大道至简--读《CSS禅意花园》

    CSS大道至简 只承认一个个确实存在的东西,凡干扰这一具体存在的空洞的普遍性概念都是无用的累赘和废话,应当一律取消.如无必要,勿增实体. ---奥卡姆剃刀 周末找了两个主题研究了一下:CSS 正则表达 ...

  7. 读《CSS禅意花园》 有感

    读<CSS禅意花园> 有感 1.图片用<img>标签添加到页面中,会增加页面的大小,导致页面加载需要更长的时间.可以用css background 引用图片. 1.1.若图像属 ...

  8. 《CSS禅意花园》明日上市

    感谢各位支持,终于要上市了-- China-pub链接:http://www.china-pub.com/computers/common/info.asp?id=33191 我的相关文章: 最近的几 ...

  9. CSS禅意花园——CSS设计的绝美境界

    CSS禅意花园,早有耳闻,一直没太注意,原来,这是个世界上都非常著名的网站,这个网站,主页只有一个,样式表却有成百上千个,选择不同的样式表,装载到这个页面,就会为我们呈现成百.上千种不同的视觉效果. ...

最新文章

  1. collection_check_boxes的应用
  2. [转]C#导出到EXCEL
  3. 【模型训练】如何选择最适合你的学习率变更策略
  4. 复旦大学肖仰华教授:知识图谱落地的基本原则与最佳实践
  5. spring storedProcedure 使用
  6. 计算机常用的数制及编码
  7. 关于F5 排错的简单介绍之一
  8. Python编程从入门到实践~函数
  9. 【转载保存】B+树索引原理以及应用案例
  10. Linux清除cache的几种方式
  11. 【计蒜客习题】蒜头君运送宝藏
  12. premiere小tips(参考于干的教程)
  13. 74hc595数码管C语言,74HC595 数码管程序
  14. 在 i.MX8QXP 的 MEK 板上进行简单的 CAN(FD)测试
  15. socket本地通信
  16. CTDC 2017 首席技术官领袖峰会 | 技术、探索、创新
  17. (一)微信小程序云开发之上传图片(全流程讲解)
  18. 微信公众号文章中的图片处理有哪些技巧?看这篇就够了。
  19. 【王道训练营 C/C++方向基础 60 题(1-10)】
  20. 【社区图书馆】《普林斯顿微积分读本》

热门文章

  1. Vue 使用iconfont
  2. 如何取消共享计算机管理员权限设置密码,Win7旗舰版系统共享文件夹设置密码如何设置...
  3. 利用python计算圆球的体积_点云到体积
  4. Java数据库项目之满汉楼
  5. hbs helper分享
  6. C++PrimerPlus 第五章 循环和关系表达式 - 5.5 循环和文本输入
  7. 关于如何定制开发Android第三方ROM,最全开发教程、原理阐述
  8. 优测云服务平台告诉你软件测试的工作内容主要有哪些?
  9. 基于java的公链,第一个基于Java的BFT区块链 – Alienchain外星链号称以太坊Java版
  10. linux esc 命令,如何将ESC/POS命令发送到Linux中的热敏打印机