超越CSS:Web设计艺术精髓 笔记

  1. w3c创建web标准、css和css禅意花园推动css、IE7浏览器存在市场份额的时代,因为IE7对标准还不是很理想,当前网络环境,IE6和windows xp已经被微软官方停止,IE8大体支持web标准的情况下,web开发人员还需要兼容IE7的情况下,该书提供一系列解决思路.

1.在IE不支持web标准消失之前,我们都需要针对浏览器实现分级支持,同时我们不能使用浏览器Hacks
2.w3c的web标准和禅意花园的出现推动css标准发展,css2-css3
3.javascript和DOM补css不足
4.跨浏览器支持:x浏览器,包括分辨率和辅助设计(转为残疾人的设计)
        
    1.2超越css原则介绍
        1.2.2运用所有有效的css选择符
            属性选择符img[title="css"]{}
            子孙选择符div > a{}
            相邻选择符h2 + p{}
            伪类和伪对象
        1.2.3 CSS3:web的未来
        1.2.4运用javascript和DOM弥补css之不足
        1.2.5避免使用Hacks:浏览器BUG修复后hacks就不起作用了,改用IE条件注释<!--[if IE]-->
        1.2.6使用富含语义的命名规范和微型格式:命名规范有益css重用,自定义class和ID实现微型控制
        1.2.7分享与协作
    
    1.3.2浏览器分级支持:逐步增强css设计(先实现IE设计基础班,再设计其他浏览器):放弃将IE7作为兼容标准的设计
    1.3.3发现、灵感、超越
    
    1.4突出内容的设计:拒绝table布局技术,注重文档内容的顺序,保证没有css情况下依然可以识别网页内容
    1.5语义就是含义:标签代表内容的含义
    1.6标记这个世界:列表标签ul ol li dl dd dt
2.过程
    2.1寻找最佳流程
    2.2搜集内容
    2.3使用框架图工作
    2.4使用灰盒改进
    2.5静态设计
    2.6使用交互原型
    2.8过程实践
3.灵感
    3.1引入基于网格的设计
    3.2当今web设计中的网格
    3.3寻找web之外的网格
    3.4为web设计带来新的网格
    3.5在意想不到的地方发现灵感
    3.6精美的艺术活动
    3.7web设计的美术
4.卓越
    4.1卓越的css
    4.2 css3
    4.3高级布局

时间: 2024-10-12 21:38:18

超越CSS:Web设计艺术精髓 笔记的相关文章

CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 3.在一个非浮动元素<div>中存在一个浮动元素,当浮动元素高于元素本身的时候,内容就会溢出<div>中,解决方案如下: A:在</div>介绍之前添加一个换行,并且添加一个类<br class=”clear”/>,之后创建一个样式br.class{clear

《响应式Web设计实践》学习笔记

原书: 响应式Web设计实践 第2章 流动布局 1. 布局选项 传统的固定布局中存在很多问题, 随着屏幕大小的越来越多元化, 固定布局已经不能适用了. 在流动布局中, 度量的单位不再是像素, 而是变成了百分比. 弹性布局与流动布局类似, 但是通常情况下, 弹性布局中会以em来作为单位. 带来一个好处是随着用户增大或减小字体, 适用弹性布局的元素的宽度也会等比例地变化. 但是其也可能出现水平滚动条 混合布局 媒体查询: 媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

&lt;&lt;操作系统精髓与设计原理&gt;&gt;读书笔记(一) 并发性:互斥与同步(1)

<<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步 并发问题是所有问题的基础,也是操作系统设计的基础.并发包括很多设计问题,其中有进程间通信,资源共享与竞争,多个进程活动的同步以及分配给进程的处理器时间的. 和并发相关的关键术语:原子操作: 一个或多个指令的序列,对外是不可分的:即没有其他进程可以看到其中间状态或者中断此操作. 并发中,为了确保并发下的数据完整性,我们有一系列的同步方法,其实这些就是为了实现互斥性!对临界区程序的互斥性.有三种方法: 1.软件方法,但是

规模化微服务——《微服务设计》读书笔记

    系列文章目录:     <微服务设计>读书笔记大纲 改变思维的角度:故障无处不在 当微服务规模化后,故障是无可避免的,以往我们总是想尽力避免故障的发生,而当故障实际发生时,我们往往束手无策.我们花了很多时间在流程设计和应用设计的层面上来阻止故障的发生,但实际上很少花费时间思考如何第一时间从故障中恢复过来. 一些公司喜欢组织活动,活动当天系统会被关掉以模拟故障发生,然后不同团队演练如何应对这种情况.这些项目中最著名的是混乱猴子(Chaos Monkey),在一天的特定时间随机停掉服务器,

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

Web设计思想——渐进增强

最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览网页的时候会碰到哪些问题? 3. 用什么方法来解决这些问题? 4. 这些方法具体的实施步骤有哪些? 一.契机 1)内容 内容是Web页面的核心,也是用户浏览页面的目的.内容可以是某些信息或某个功能,用户浏览网页就是为了获得它们.接下来所做的一切都是为了让内容脱颖而出,向用户传达更清晰明确的意义,传递更准确.更

响应式web设计与CSS3媒体查询

在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习. 如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况下,固定宽度的设计方案将会显得越发不合理.页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行

css014 响应式web设计

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加