CSS+DIV布局..pptxVIP

CSS+DIV讲个笑话35%83%60%CSS基础介绍几种常见选择器eg：#a{ background-color:red;}div id=“a”/div选择器含义示例*通用元素选择器，匹配任何元素* { margin:0; padding:0; }E标签选择器，匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器，匹配所有class属性中包含info的元素.info { background:#ff0; } { background:#ff0; }#info和E#infoid选择器，匹配所有id属性等于footer的元素#info { background:#ff0; }p#info { background:#ff0; }Id选择器类选择器元素选择器属性选择器后代选择器伪类选择器eg:.a{ text-align:left;}div class=“a”/divCSS基础当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？样式表分为：外部样式表 内部样式表（位于 head 标签内部） 内联样式（在 HTML 元素内部） 优先级为： 内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。35%83%60%div+css 的优势 1、符合w3c标准。这保证您的网站不会因为将来网络应用的升级而 被淘汰。 2、对浏览者和浏览器更具亲和力。由于css富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容。 3、使页面载入得更快。页面体积变小，浏览速度变快，由于将大部 分页面代码写在了css当中，使得页面体积容量变得更小。4、保持视觉的一致性。使用div+css，将所有页面，或所有区域统一用css文件控制，就避免了不同区域 或不同页面体现出的效果偏差。 5、修改设计时更有效率。由于使用了div+css制作方法，使内容和结构分离，在修改页面的时候更加容易省时。6、搜索引擎更加友好。相对与传统的table, 采用div+css技术的网页，使得网页中代码更加简洁。?35%60%div 标签定义定义和用法div 可定义文档中的分区或节（division/section）。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。注意：span在CSS定义中属于一个行内元素，而div是块级元素，我们可能通俗地理解为div为大容器， 35%83%60%div div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。不必为每一个 div 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。35%83%60%盒子模型35%83%60%Div+css布局 布局的构思 制作网页前我们需要对网页整体的结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。如右所示：35%83%60% 分析：整个图片分为以下几个部分 ① 顶部：包括logo和一个背景图片 ② 导航栏 ③ 内容部分分为侧边栏和主体内容 ④ 底部页脚包括一些版权信息实际布局35%83%60%css定位和浮动“块级元素”，“行内元素”常见的块级元素有：div ,ul,p,h1常见行内元素有：span,strong行内元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰35%83%60%css定位和浮动例子：divabspanc/spandefg/div这里的div为块级元素，span为行内元素。我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。35%83%60%css定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，