《css网站布局实录》(李超)——读书札记

1.web表现层技术

2.HTML链接设计思想

3.对信息进行合理的分析、分类与处理来创造商业价值。

4.头部描述浏览器所需信息,主体包含所需要展现的具体内容。

5.HTML(XHTML)XML

6.良好的css代码设计可以使代码之间产生继承及重载关系,能够达到最大限度地代码重用,从而降低代码量及维护成本。

7.由于不同品牌浏览器及不同版本之间的渲染方式不同,各自解析css也存在一些差异。

8.css hack可以简单地翻译为css黑客程序,它是一个被设计者们习惯使用的名称。它表现一种类似于欺骗浏览器的编码手段,由于存在浏览器兼容性问题,A浏览器不支持某些标签而B浏览器支持,因此使用这种欺骗方法,可以编写一段样式只被B浏览器解析,而A浏览器则会忽略,反之亦然。

9.随着硬件水平提高,未来的界面设计必将丰富多彩。

10.选择符优先权:id>class

11.两行相同类型的css,一般执行后者,如

div{background:#666;
      background:#fff;}

12.div的最终目的是合理的标识出我们的内容区域。

13.在适当情况下应该尽可能减少嵌套的使用,以保证浏览器不用过分的消耗资源来对嵌套关系进行解析,简单的嵌套结构更有利于我们对版式的理解与控制。

14.选择符合需求的其他XHTML标签,合理的替代div。

第三章 css网页布局与定位

1.浮动是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序。这样做的好处是,使得内容的排版变得简单,具有良好的伸缩性。

2.左栏固定(设置宽度)右栏自适应(不设置宽度)。

3.绝对定位:它将从本质上与其他对象分离出来,它的定位模式不会影响其他对象,也不会被其他对象的浮动定位所影响。从某种意义上来讲,使用绝对定位之后,对象就像一个图层一样漂浮在网页之上。

3.三列浮动中间列宽度自适应:

#left{width:100px;height:300px;
position:absolute;
top:0px;left:0px;}
#right{width:100px;height:300px;
position:absolute;
top:0px;right:0px;}
#center{height:300px;
margin-left:104px;
margin-right:104px;}//margin-left和margin-right用于让出两侧列的宽度

4.使用浮动对齐排列的核心技术在于对于宽度的合理控制。

5.上下margin叠加(空白边叠加规则):当两个对象为上下关系时,而且都具备margin属性时,此时以较大的边距为主。注意:一旦把某个元素设定了float属性,那么它们将不再进行空白边叠加。

6.IE6左右边距加倍问题:当我们的盒对象为浮动时,在IE6之中,盒对象的左右margin会加倍。这是IE6的CSS解析问题,我们可以通过设置对象的display:inline;来解决。

7.css网页布局只能以两种方式存在:一种是浮动式布局,另一种则是定位布局。这两种定位方式的核心都为脱离于文档流的控制。

8.文档流:对于一个XHTML网页,body元素下的任意元素,根据其前后顺序,组成一个个上下关系,这便是文档流。浏览器根据这些元素的顺序去显示它们在网页之中的位置。文档流是浏览器的默认显示规则。

9.浮动的清理:

10.当网站有较强的对分辨率及内容大小的适应能力的时候,就需要采用浮动定位。

11.一些看似固定布局的网站,如果需要采用margin来控制对象占位,由于空白边距叠加规则,需要使用浮动来定位。

补:float更适合对象的布局模式,而不是信息的组织(信息的组织可用display:inline)。

12.相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与原始位置相对,并不破坏其原始位置的信息。

13.b嵌套c,b相对定位,c绝对定位或相对定位时:c的相对定位是相对与b而言,并且在b元素之中仍然保留着c的占位信息。

14.不占位的相对定位:父级相对定位,宽高明确,不设top和left,子级绝对定位,如:

<div id="divGroup">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</div>
#divGroup{
margin:50px 0 0 50px;
position:relative;
border:1px solid #000;
width:400px;
height:200px;
}
#a,#b,#c{
border:1px solid #000;
width:100px;
height:100px;
margin:2px 2px 2px 0;
float:left;
}
#b{
position:absolute;
left:10px;
top:30px;
}

15.绝对定位用于网页位置固定,而且不希望采用margin,padding,border等属性控制。

(1)不规则网页设计

由于设计需要,有些网页设计不会走分栏或块状布局的路线,而是随机地布置位置。在这种情况下,它们往往采用绝对定位或相对定位的各种组合方式来进行布局。

(2)在画面上的设计

如果需要一个元素覆盖在整个画面之上,但不希望破坏原有的结构,这时可以采用绝对定位或相对定位,使得某个或者某些对象覆盖在画面之上。

(3)交互式设计

下拉菜单是一种交互式设计,由于其菜单子项只有在鼠标移上时才出现,因此是一种需要覆盖在画面上方的设计。

当子菜单需要根据父级的鼠标位置而发生改变,所以需要根据父级的鼠标位置行进定位。

(以上两种情况的原则就是当子菜单出现时,不破坏其他元素的布局结构,所以需要它们浮于画面之上,这时便可以采用绝对或者相对定位)

第4章 CSS网站元素设计

1.div应当重点放在大面积块状区域,对于简单的只有文字的导航来说,ul更为轻巧灵活。

2.当文字缩进text-indent为负值时,有必要将放文字的容器的内边距设置大于等于缩进的绝对值,以免文字显示在区域外。

时间: 2024-10-22 11:19:52

《css网站布局实录》(李超)——读书札记的相关文章

《CSS网站布局实录》读书笔记

CSS入门与基础不二之选,内容十分全面,实体书已不印刷,只能下载电子版 书的背景: 国内第一本web标准的CSS布局书,2006年9月第一版,作者李超. 环境背景: 当时主流浏览器IE6与Firefox,兼容浏览器IE5/4/Opera/Mozilla,web2.0标准是XHTML1.0,为XML过渡而生,页面编码格式gb2312,使用工具Dreamweaver可视化开发. 基础篇之XHTML: HTML结构包括头部(head)主体(body)两大部分.头部描述浏览器所需信息如<title>无

《CSS网站布局实录》学习笔记(三)

第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3.1.1 div是什么 div是XHTML中制定的.专门用于布局设计的容器对象.在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table.如今,接触另一种布局方式--CSS布局.div正是这种布局方式的核心对象.仅从div的使用上说,做一个简单的布局只需要依赖两样东西:di

《CSS网站布局实录》学习笔记(四)

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布

《CSS网站布局实录》学习笔记(五)

第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 分栏排版 CSS2技术对普通段落文字不能够直接实现分栏排版,如果需要实现类似报纸那样的双栏或者三栏排版,则必须借助于二列布局那样的两个div浮动定位而形成二列控件,然后再将文字分别填充此二列之中.XHTML代码如下: 1 <div id="layout"> 2 <div

《CSS网站布局实录》学习笔记(六)

第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核心属性.class的主要功能是用来对对象的样式设置,而id除了可以定义样式外,还能够成为服务网站交互行为一个特殊标识.每一个被定义了id名称的对象,其id名字在每个页面有且仅能出现一次. 6.1.2 如何使用id 在不考虑使用JavaScript脚本,而是XHTML代码及CSS样式应用的情况下,应当

[div+css]网站布局实例二

重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; 然后思考"以什么标签来组织所需表现的内容". ** 分析页面的基本构成,主要分成5区域: 上部LOGO; 导航菜单; 左侧边栏; 右侧内容; 底部版权区. ** 布局规划: 上部LOGO + 导航菜单 => 头部元素 =>置于header层; 左侧边栏sidebar+右侧边栏

网站实战 从效果图开始CSS+DIV\布局华为网站

经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. 主要分为以下6部分来做: 相信参看如下视频地址: 01   建立华为站点:               http://www.tudou.com/programs/view/Vbo8EffWPQw/ 02   华为站开始:                   http://www.tudou.com

【读书札记】《JavaScript DOM编程指南》

对于Javascript的认识是来自于2011年夏天去实训基地做的一个网页项目,当时认为JavaScript是不是Java的一个派别语言什么的,老师那时候教我们调用了一些Javascript的方法.当时对这个语言的最初的印象就是会调用方法大致能懂就行了,没有深究.直到今年年初去面试几家企业,问我会不会使用Javascript,我说就调调几个方法就好了~   当时瞬间就直到无地自容了.于是将这本JavaScript的电子书看了下,写下相关的读书札记,也希望能让和我有着对Javascript误解的人

《大型网站技术架构》读书笔记三:大型网站核心架构要素

一.性能—响应时间决定用户 (1)浏览器端: ①浏览器缓存: ②使用页面压缩: PS:Gzip压缩效率非常高,通常可以达到70%的压缩率,也就是说,如果你的网页有30K,压缩之后就变成了9K左右.想要启用Gzip压缩,提高浏览速度,可以浏览这篇文章:http://www.chinaz.com/web/2012/1017/278682.shtml ③合理布局页面: CSS:把样式表置于顶部:避免使用CSS表达式(expression_r):使用外部JavaScript和CSS:削减JavaScri