CSS+DIV布局.

CSS+DIV35%83%60%讲个笑话几种常见选择器CSS基础介绍Id选择器类选择器元素选择器属性选择器后代选择器伪类选择器eg：#a{background-color:red;}divid=“a”/diveg:.a{text-align:left;}divclass=“a”/div选择器含义示例*通用元素选择器，匹配任何元素*{margin:0;padding:0;}E标签选择器，匹配所有使用E标签的元素p{font-size:2em;}.info和E.infoclass选择器，匹配所有class属性中包含info的元素.info{background:#ff0;}p.info{background:#ff0;}#info和E#infoid选择器，匹配所有id属性等于footer的元素#info{background:#ff0;}p#info{background:#ff0;}35%83%60%当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？样式表分为：外部样式表内部样式表（位于head标签内部）内联样式（在HTML元素内部）优先级为：内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。CSS基础35%60%div+css的优势1、符合w3c标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。2、对浏览者和浏览器更具亲和力。由于css富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容。3、使页面载入得更快。页面体积变小，浏览速度变快，由于将大部分页面代码写在了css当中，使得页面体积容量变得更小。4、保持视觉的一致性。使用div+css，将所有页面，或所有区域统一用css文件控制，就避免了不同区域或不同页面体现出的效果偏差。5、修改设计时更有效率。由于使用了div+css制作方法，使内容和结构分离，在修改页面的时候更加容易省时。6、搜索引擎更加友好。相对与传统的table,采用div+css技术的网页，使得网页中代码更加简洁。35%83%60%div标签定义定义和用法div可定义文档中的分区或节（division/section）。div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用id或class来标记div，那么该标签的作用会变得更加有效。注意：span在CSS定义中属于一个行内元素，而div是块级元素，我们可能通俗地理解为div为大容器，35%83%60%div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是div固有的唯一格式表现。可以通过div的class或id应用额外的样式。不必为每一个div都加上类或id，虽然这样做也有一定的好处。可以对同一个div元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。div35%83%60%盒子模型35%83%60%布局的构思制作网页前我们需要对网页整体的结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。如右所示：分析：整个图片分为以下几个部分①顶部：包括logo和一个背景图片②导航栏③内容部分分为侧边栏和主体内容④底部页脚包括一些版权信息Div+css布局35%83%60%实际布局35%83%60%“块级元素”，“行内元素”常见的块级元素有：div,ul,p,h1常见行内元素有：span,strong行内元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰css定位和浮动35%83%60%例子：divabspanc/spandefg/div这里的div为块级元素，span为行内元素。我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。css定位和浮动35%83%60%css定位和浮动CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。CSS的定位和浮动是控制布局的重要方法。通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的减少了代码量，使得页面结构更加清晰，代码更加精简。35%83%60%1，定位div{position:relative;}//相对定位div{position:absolute;}//绝对定位CSS相对定位概念：元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。可以理解为：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。css定位和浮动35%83%60%1，定位例子：#box_relative{position:relative;left:30px;top:20px;}我们看见，框2脱离原来的位置，相对与原占位空间偏移了一定的距离。但是框2原本的占位空间没有消失。所以相对定位不会对布局格式产生影响。（实例演示）css定位和浮动1，定位绝对定位概念：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。可以理解为：绝对定位的元素的位置相对于最近的已设置相对定位的父元素，如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于最初的包含块（body的左上角）。css定位和浮动1，定位绝对定位例子：#box_relative{position:absolute;left:30px;top:20px;}绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。（实例演示）css定位和浮动1，定位绝对定位提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。总结:相对定位的元素不会脱离文档流，占用文档流的空间.绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素.绝对定位的元素以最近的定位祖先元素为参照物。绝对定位应用——容器在浏览器中垂直居中css定位和浮动35%83%60%浮动概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。属性：float：left;float:right;用法：请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：css浮动35%83%60%不管是table布局,还是CSS+DIV布局，设计居中总是必须的。随着显示器尺寸越来越大，不居中的网页也被视为布局的错位。table布局中经常使用align=“center”，而CSS+DIV中一般使用自动空白边的方法让设计居中。为此，只需定义box的宽度，然后将水平空白边设为auto，代码如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN{margin:auto;text-align:right;width:200px;background:#00ff00;}/style/headbodydivid=boxabcde/div/body/html让设计居中THANKYOU