传智播客-韩顺平轻松搞定网页设计-div+css

北京传智播客教育，网络设计的div css，讲师：韩顺平邮件：hanshunpingqq:270760， 内容介绍1.css2.块级别要素和内嵌要素3.css核心内容3.1标准流3.2箱子模型3.3浮动3.4定位4.css综合情况4.1箱子模型古典情况4.2soho主页布局4.3可爱房间主页掌握css的基本使用方法，掌握css的四个选择器的使用方法，使用初始CSSCSS的必要性看看一个问题例子 HtmlPage1.htm 这是列样式不同的页面。 如果想统一设定那些风格的话，怎么办？ 使用初始css-css的必要性，解决之道-改造css情况 HtmlPage1.htm ，使用css统一设定所有栏的样式。 第一个CSSCSS的必要性，请考虑另一个问题。汶川大地震时，所有网站的照片都变成黑白的，这是如何实现的呢？ 情况 HTMLPage2.htm 这里是过滤技术. css的3种选择器，选择器在css中是非常重要的概念. css中有4种不同的选择器类选择器，另外class选择器id选择器html要素选择器通配符css的3种选择器，类选择器，类选择器名属性名：属性值； ，在HtmlPage1.html中使用了类选择器。 以下是三种类型的选择器：示例：HTMLPage.htm和css。 id选择器我们在 HTMLPage.htm 中id选择器的使用方法：图：#id选择器名属性名：属性值； ，css三种选择器html选择器html选择器html选择器的使用方法如果希望：图：页的默认字体为橙色，该如何处理？ html要素名属性名：属性值； ，并且，例如，希望所有超链接(1)的默认样式为黑色，24px，没有下划线的(2)鼠标移动到超链接时，自动出现下划线(3)，超链接变为红色。 怎么实现才好呢呢？ 使用通配符选择器来匹配test.html、css三个选择器和通配符选择器的所有元素。 *margin:0； padding:0默认情况下可以将所有html元素的外边距和内边距设为0，这可能特别有用。css的三种选择器，选择器我先说的非常简单，实际上css的选择器的使用有很多要注意的地方。 请参见不注意就无法控制css父子选择器的图：HTMLPage.htm方案：a.id选择器b.class选择器c .父子选择器、css三种选择器、选择器详细讨论父子选择器类选择器和I 父子选择器可以扩展，css的3种选择器，选择器详细研究看一个要素有id选择器和类选择器的情况：如何实现新闻1和其他新闻风格的差异？ css的3种选择器，选择器详细讨论一个要素可以同时拥有id选择器和类选择器的id选择器和类选择器发生冲突时，id选择器的优先级比类选择器高。 优先级：id选择器类别选择器，例如：id选择器指定字体为红色，类别选择器指定字体和蓝色时，页面上显示红. css三种选择器“选择器对每个元素最大考虑一个id选择器当一个元素限定为多个类选择器时，情况：a.id选择器b .类选择器深刻考虑了在一个元素中存在最多的id选择器，例如以空间分隔的.css这三种选择器。 用一个情况来说明。 css的3种选择器，选择器详细研究要素同时被id选择器、类选择器、html选择器限制时，优先级为：id选择器类选择器html选择器通配符选择器，css的3种选择器，选择器详细研究 情况：my.css/*募集广告*/.ad_stuwidth:136px； height:196px； 后台颜色： # fc7e8c； margin:5px005px； 浮动：左； /*广告2 */. ad _2 background : # 7gf 574； height:196px； width:457px； 浮动：左； margin:5px006px； /*房地产广告*/. ad _ house background 3360 # 7gf 574； height:196px； width:152px； 浮点：左侧； margin:5px006px； 箱子：my.css/*募集广告*/.ad_stuwidth:136px； 后台颜色： # fc7e8c； margin:5px005px； /*广告2 */. ad _2后台： # 7gf 574； width:457px； margin:5px006px； /*房地产广告*/. ad _ house background 3360 # 7gf 574； width:152px； margin:5px006px； .ad_stu， ad_2， ad_househeight:196px； 浮动：左； 、使用css三种选择器，选择器类小练习、选择器练习和适当的css选择器完成下一页。 练习2 .网页上的所有超链接要求此类格式：(1)默认样式为红色、24px，华文新魏字体没有下划线。 (2)鼠标移动到超链接后自动出现下划线，字体大小为40px，字体为宋体. green颜色。 (3)点击后，超链接变为灰色。 另外，块元素和内联元素、块元素和内联元素-概念内联元素、内联元素：内联元素只能容纳文本或其他内联元素，一般的内联元素块元素：块元素可以从新行打开，以容纳文本其他行内元素和其他块元素必须占用整个行，即使内容少于一行. 典型的块元素示例：HTMLPage3.htm、块元素和内联元素、块元素和内联元素-差异内联元素仅占内容的宽度，块元素的内容与内容无关地占所有行。 内联要素只能容纳文本和其他内联要素，块要素可以容纳文本、内联要素和块要素。 某些css属性(与浏览器类的版本和类型相关)对行内元素(如margin、left、right、width、height.)无效。(与浏览器类的版本和类型相关)、块元素和内联元素、块元素和内联元素-互变换：内联元素和块元素互变换display :内联元素(例如div ) display : block 转换为HTMLPage3.htm，如果在css文件的交叉引用a.cssb.cssc.cssa.css中使用b.cssc.css选择器，请使用import命令将importurl (“被引用的css文件”)转换为如果在html或php文件中引用xxx.css，还可以标记importurl(css文件”)，作为css的核心内容的流，标准流/非标准流：在现实生活中是流水，在web设计中是元素(标准流：要素在网页中像流水一样，出现在前面的要素(标签)的内容之前，出现在后面的要素(标签)的内容之后。 当非标准流：上的元素(标签)偏离标准流(例如，相对位置)的排列时，我们统称为非标准流的排列。 在定位一节中介绍了非标准流。 css核心内容-框模型、框模型-概念框模型要想弄清楚，首先要理解内容、填充、边框、馀量这一概念：在网页设计中经常能听到的属性名称。 css盒模型具有这些属性。 让我们来看看css核心内容盒型号，盒型号案例。 让我们来看看框型号：box1.htm，如何实现网页的布局。 css核心内容-箱子模型，箱子模型-理解我们可以将箱子模型转移到我们日常生活中的箱子(箱子)来理解，日常生活中看到的箱子也具有这些属性，所以称为箱子模型。 内容是在箱子里的东西。填充是因为担心箱子里的东西(贵重)的破损而添加的泡沫和其他抗震辅助材料的框是箱子本身。关于边界，在箱子被放置的时候，并没有全部重叠，在保持一定的间隙的同时，容易取出。 与现实生活中的箱子不同的是，现实生活中的东西不能比箱子大。 不那样的话，箱子会坏的。 CSS箱子很有弹性，里面的东西比箱子大，支撑着它。 但是，那个不会坏。 css核心内容箱模型，箱模型请进一步理解，css核心内容箱模型，箱模型类的小练习，css的箱模型页请完成css核心内容箱模型，箱模型进一步理解箱模型例如，看到情况：这个布局在很多大网站上使用，我们将它作为模式应用，调整各自的馀量，达到你希望的布局，非常实用。 但是，要实现这个效果，需要css的另一个中心知识浮动，所以再试一次这种情况。 作为css核心内容的浮子，浮子是css的重要概念，必须掌握。 浮子涉及左浮子、右浮子、清除浮子。请在第：页上放置3个div。 背景为粉红色、宽150px、高100px、框1px、蓝、实线。 myFloat.htm、css核心内容-浮动，使用右浮动来实现以下图形。 使div1向右浮动时，css核心内容-浮动，使用左侧浮动实现如下图形：远离标准流向右移动，直到其右端与包含框的右端接触。 如果将所有三个框向左移动，则框1向左浮动直到包含框，另两个框向左浮动直到与前一个浮动框接触。 css的核心内容浮动，如果我们的div框架多，外侧框架无法容纳水平排列的浮动div元素，其他浮动块就会向下移动，直到有足够的空间为止。、css核心内容-浮动，浮动元素的高度不同，其向下移动时可能会被其他浮动元素“卡住”: css核心内容-浮动，浮动：元素向右/左浮动时，尽量向右/左移动，直到其本身接触到框架或其他浮动元素。 特别强调浮动对块要素和内联要素有效要素在右/左浮起相当于打出自己的左/右，其他要素在其左/右排列。 在这里我们来看另一个案例“myFloat2.htm”。 有助于理解这两个词。 css的核心内容-浮动，浮动-如果其他元素不在元素的左侧或右侧，则清除浮动的方法clear:right； 清除：左； clear:both在这里，您可以看到示例myFloat3.htm，以帮助您理解这两个词。 作为css核心内容的浮动、浮动清除浮动是不能理解的知识点，对此将在后面的项目中详细说明。 css核心内容-定位，定位-基本概念css定位(Positioning )属性允许元素定位。 位置属性值： static (默认值):成功生成元素框。 块级元素生成作为文档流/标准流的一部分的四边形，行内元素创建一个或多个行框，该行框位于父元素中。 relative :元素框仅偏移距离。 元素会保持之前未放置的形状，而原始空间会保持不变。 从这个角度看，元素看起来还在文档流/标准流中。 absolute :元素框从文档流中完全删除，并相对于块位置进行定位。 包含块可以是文档中的另一个元素或第一个包含块。 元素在普通文档流中所占的区域将被关闭，就像元素原本不存在一样。 放置元素后，无论在正常流中生成的框的类型如何，都将生成块级框。 固定：元素框的表示方式类似于将position设置为absolute，但块是由窗口本身组成的。 css核心内容-定位-定位-是大家有：分，还是：htmllpage6.htm，css核心内容-定位-定位-定位-大家有：分，还有一个可以在这里使用绝对定位css的核心内容-定位-定位-absolute在这里特别强调，absolute的定位是对与自己最接近的非标准流盒来说的。 作为一个示例，HTMLPage6.htm说明了css的核心内容，定位-静态定位的默认值为静态，对定位left，right无效。 情况HTMLPa