CSS布局教程

结合对于背景控制的探讨，可以尝试继续完成我们前面所制作的导航系统，并在此基础上对于导航进行改进。基于背景的基本控制并结合我们上一章上的布局方法。首先可以简单实现导航后的黑色图案背景。根据布局设计方法，将导航ul标签放入了id为header的div中。实现其包含式结构”css代码.
对于项部区区域定义了了div id为header，基础背景设定。对于包含在header中的#Dav，我们根据CSS布局方法将其放置在header的右下角。实现了项部区域的布局，在最初我们实现的使用图片背景制作的交互式导航中，对于每一个导航项中的标准状态当前状态鼠标交互状态3个状态中，均使用了三张图片，通过CSS中的a:hover进行切，换来实现实际效果。大家应该还记得，在背景定位一节中，我们讨论了实现一张背景在一个标签中采用top及left的距离来实现绝对定位，而我们的标签式导航三张图片是不是也可在通栏用一张图片，而使用绝对定位来实现呢？不妨尝试一下实际编码，先把三张图片合为一张。天津网站建设，天津网站制作，天津做网站，天津网站优化
...

        对于CSS布局学习者而言，除了对id与class选择符的使用中会存在一定的问题之外，还有一个经常使大家感到混淆的概念就是XHTML标签中的iv与span对象。对于XTML二段落，strong表示加粗等，而span与div似乎从语义上无法理解其真正用途，而且在使用上span及div几乎所有相同的属性，div与span到底在xTML中该如何使用呢?、在w3c对diV及span的简要描述中，我们看到了同样的说明—用于定义样式的容器虽然w3c在对div及span的描述中都说明了相同的用法，而且非常准确，用于定义样式的器，但实际上div在使用方式上有很大的差别，在这一点上我们通过实际显主示的div与span的效果上就能看出，我们看一段XHTML及CSS代码：从预览效果我们可以看到，在相同CSS样式的情况下，两个div对象之间出现了换系，而两个对象则是同行左右关系。对于都是用于样式容器的div与span对手象而言，是由于这样的关系，—使它们之间存在着使用上的差别，div与span元素在显示上的不同，源于其默认显示模式(display)的不同。在前面我曾了解过display属性的用法，用于改变元素的显示模式。对于XHTML中的每一个对象而言，都拥有自己默认的显示模式，div对象的默认显盖示模式是display:block；因为这样的默认模式，从而使div成为一个块状容器，其默矢认状态就占据一整行的空间，而span对象的默认显示模式为display:inline;因此span将作为一个行内联对象显示时以行内连接的方式进行显示。正是由于两个对象不同的显示模式，因此在实际使用过程定了两个对象的不同用途。div：又：对象的任务是呈现一个块状内容，如一大段文本，一个导航区域，一个页脚区域等显示为块状的内容进行结构编码并进行样式设计。天津做网站，天津网站优化而拓为肉联对象时；span，用途是对行内元素进行结构编码以方方便样式设计，span默认状态下就不会破坏行中元素的显示顺序，例如在一大段文本中，我们需要变其中一段文本的颜色，可以将这一小部分文本使用span对象，并进行样式设计，这将不会改变这一整段文本的显示方式。span对象只是众多inline内联对象中的一种，而且是专门用于设计样式的一种内联对象像strong对象也是一种内联对象，使用之后将对某段文本进行加粗显示，是一种自带属性的内联对象，而span对象在默认使用情况下均不改变任何其中文本的属性，这是XHTML留给设计者昔的个空属性的内联对象，专门用于行内内容样式的自定义。div所赋于的使命要比span重要许多，默认为块状显示模式的div对象在实际应用中担负页面大块布局及版式的所有工作，需要大量使用div进行组合或嵌套来实现我们版式布局。天津网站建设，天津网站制作

    对于表单设计而言，除了XHTML及CSS能够帮助我们做到视觉设计及交互上的简单提升，更多表单可用性的设计有待于我们对用户的完整思考。在这里根据以往的经验就表单设计提出一些设计建议与方法，希望能有助于我们的网站设计。
    明确的输入域标识，作为表单上的每一个可输入区域，视觉设计上一定要合理方便用户使用，不能够一味追求美观而使可输入区域变得模糊不清，如果没有好想法，不妨使用默认样式，可是用户理解得最简单。而对于表单中必选和可选区域，无论是通过改变边框或背景颜色也好，增加记号标记也好，也一定要明确，使得访问者在使用表单的同时能够迅速理解表单元素规则。
...

    CSS的id与class选择符为设计提供了便利，但也会使得CSS样式变得多和复杂，如理这些CSS样式便是摆在我们面前的一个问题，然而软件开发的经验为我们提供了一个可学习模仿的例子，软件开发中对于过程／函数／变量的命命名经过多年的实践与研究已经有了一套自己的方法，借助于这些方法，我们可以根据CSS的特设计自己的样式命名规则，帮助我们更好的编写样式，在了解CSS选择符命名之前，我们先简要了解一下CSS对于命名的基础使用规则。
    值得注意的是，xhTML不区分大小写，允许使用大写或小写或任意组合进行编码，CSS的样式属性也是如此，我们可以使用大小写的CSS样式属性，CSS对于对象选择符如body、td、div也是不分区大小写。但是CSS对于id及class选择符名称是区分大小写的。对于id及class选择符来说class=”CONTENT”不等于同CSS中的.content或.Content。因此在设及class以及编写CSS样式的时候使用统一的规范来编写自己的样式。天津网站建设，天津网站制作
...

问题起因
    断头台问题(IE/Win Guillotine Bug)是国外的CSS设计者给这个问题起的一个非常的名称，就如同断头台一样，对象被无情的切断了一部分，不过与此相反的是，断头台问题中的对象切断的不是对象的头部，而是对象的底部。
    这段XHTML代码结构由三部分组成，一个是主对象#layout，主框架中有#1eft为左浮动对象，孑右侧为普通的链接文字，类似于左右分栏的二栏式的布局。CSS代码部分，我们主要设置了链接的背景色，#left的左浮动，及用于我们观察的粗边框效果，我们还是通过浏览器来查看问题是如何发生的，这里列出了网页效果的两个状态，当网页被打开时，页面显示正常，与CSS编码中所指定的样式完全一致，而当鼠标指向对象右侧的“链接3”及“链接4”时，问题出现了，主#layout下面被切掉了，而剩下的高度刚好正是4个链接的高度。与此同时，当鼠标再次回到链接1时候，#layout对象的高度又恢复了正常。这便是本节中的断头台问题。天津网站建设，天津网站制作，天津做网站，天津网站优化
...

     早期在使用表格式布局的网站设计时期，设计师或多或少都使用了CSS技术对网站中的内容样式进行优化；在那个时期CSS也有部分应用，而且设计师也习惯对页面中的元素class的定义，早期的样式表中几乎全都是是class选择符。大多数设计师从转到Web标准布局之后，都会发现一个现象，就是在使用Web标准的CSS布局之后，CSS中所用到的id似乎有增无减在不断增加。
     如下提供的二张图片所示，目前国内知名门户sina的首页CSS，sina目前依然延用着传统表格式布局及代码设计方法，几乎都是class选择符，而另一个msn.com首页的CSS之中，id选择符占的比例要多一些。
...

    通过上文的介绍，我们已经初步了解为什么W3C要建-XML。标准，为什么各大厂商都意支持xml。也了解到为了向xml标准过渡，我们目前阶段需要学习和掌握的Web标准有那些，接下来就是具体应用了。但我们发现应用也并不如想像中那样顺利，依然有一堆的困难摆在我们面前：
有99%采用HTML 4.0或更老规范建立的网页需要转换到xhtml,每天依然有大量的新的页面采用不符合Web标准的技术在发布；缺乏易用的、强大的支持Web标准的页面开发软件；主流浏览器IE对Web标准的支持不完善；大批设计师需要了解Web标准，转变观念；
...

    首先要明确一一个概念。我们本书讲的Web标准，不是指XML，而是指为了实现大量HTML息向xmL标准的过渡，W3C和ECMq，制定的一系列的技术规范，目前主要包括XHTMLl.0、CSS 2.0、DOMl.0和ECMA JavaScrit。Web标准不仅仅是一个规范，而是一系列规范的总称。按这些规范制作的网页，符合Ⅺ4L格式规范，内容与表现相分离，将使你的页面数据在以后可以被分享、交换和重用。下面，让我们一起了解一些重要的基础知识。如果你已经掌握，可以跳过直接阅读后面“Web标准的优势”。
...

    这里，我所说的“排版”并非Layout而是Typography，可以认为这指的是网页中文本处理的技巧。传统的印刷排版给我们留下了许多可以借鉴的技巧，然而到了Web这里，实际上能够应用的已经不多，而西方排版给我们留下的许多技巧，到了中文这里，实际上能够应用的也所剩无几——我猜这是令人高兴的，因为刚刚开始学习Web设计的朋友就不必费神记住那么多的条条框框。不过，就如往常一样，这篇文章的目的不仅为了解释我们该怎么做，更是为了解释这么做的原因为何排版是重要的？因为我们关心的不仅是布局——给页面划定好几个盒子和它们的位置—一还应该是那些盒子里装的是什么，而盒子里最重要的部分便是文本，在只有一台320X 200分辨率，16色的终端时，讨论行间距究竟应该是11像素还是12像素当然不现实，可是现在，计算机已经能够利用像素颜色的微妙变化来消除字体的锯齿，对单词的间距进行细小的调整使其更加自然，我们的显示器在改进，我们的操作系统在改进，我们的浏览器在进，CSS也在改进，在这种情况下，如果能够通过些许的调整使页面的内容更加美观，毫无疑问是值得的。天津网站建设，天津网站制作，天津做网站，天津网站优化
...

   3px问题不是经常被人们发现，因为他的影响只是产生3px位移，往往在大块的设计之间不易发现，但是如果在设计时使用精确到像素的设计方法的话，3px也许就会困惑到你的设计。为了便于测试，我们准备了4个对象，content是引发我们bug的一个浮动出DIV，段落A孤立的文本，；在#content的旁边，段落B与段落C是使用p和div进行嵌套的两个文本，同样也放置在0co咀恤t的旁边，为了引发3px问题，我们需要5对抛ontent进行float:left;的设置。加上用于检查bug用的对象的边框线条。
...