div+css布局教程课件_第1页
div+css布局教程课件_第2页
div+css布局教程课件_第3页
div+css布局教程课件_第4页
div+css布局教程课件_第5页
已阅读5页，还剩73页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

div+css布局教程

TheTutorialofcss+div

div+css布局教程TheTudiv+css布局教程目录：1.CSS基础知识2.网页布局常用属性3.网页布局实例4.Web标准化思想与网页重构

div+css布局教程一、CSS基础知识

1.css简介2.css语法3.选择器4.实用小技巧div+css布局教程div+css布局教程div+css布局教程CSS指层叠样式表(CascadingStyleSheets)

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行样式通常存储在样式表中

外部样式表通常存储在CSS文件中外部样式表可以极大提高工作效率

div+css布局教程CSS指层叠样式表(Cascadidiv+css布局教程CSS语法由三部分构成：选择器、属性和值：P{color:#ff0000;background:#000000;}其中“p”,我们称为选择器，指明我们要给“p”定义样式；样式声明写在一对大括号“{}”中；Color和background称为“属性”，不通属性之间用“；”分隔“#ff0000”和“#000000”是属性的值div+css布局教程div+css布局教程几点值得注意的地方：1、选择器的分组可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）例子：h1{color:green;}h2{color:green;}h3{color:green;}我们可以这样写：h1,h2,h3{color:green;}样式太臃肿了，该减肥了!div+css布局教程样式太臃肿了，该减肥了!div+css布局教程几点值得注意的地方：2、继承及其问题根据CSS，子元素从父元素继承属性。

例子：body{font-family:Verdana,sans-serif;}根据上面这条规则，站点的body元素将使用Verdana字体通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。我们可以这样写：p{font-family:Times,"TimesNewRoman",serif;}

div+css布局教程div+css布局教程几点值得注意的地方：3、层叠次序当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？样式表分为：浏览器缺省设置外部样式表内部样式表（位于<head>标签内部）内联样式（在HTML元素内部）

优先级为：内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。div+css布局教程div+css布局教程几点值得注意的地方：4、高效的CSS（1）使用外联样式代替内联样式和内部样式表不推荐使用：<pstyle=“color:red”></p>或者是：<styletype=“text/css”>p{color:red;}</style>(2)使用组选择器h1,h2,h3{color:green;}(3)使用继承不推荐使用：td{font-size:12px;}p{font-size:12px;}li{font-size:12px;}…应该这样写body{font-size:12px;}div+css布局教程div+css布局教程几点值得注意的地方：（4）使用简记属性不推荐使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;应该这样写margin:1px3px4px2px;div+css布局教程div+css布局教程1、CSS派生选择器

ulli{font-weight:bold;}定义ul内li标签的样式Pspana{font-weight:bold;}定义段落下a标签的样式可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格表示。div+css布局教程1、CSS派生选择器div+css布局教程2、id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#”来定义。例子：#red{color:red;}#green{color:green;}注意：id属性只能在每个HTML文档中出现一次。

div+css布局教程2、id选择器div+css布局教程2、类选择器在CSS中，类选择器以一个点号显示：例子：.center{text-align:center}

注意：类名的第一个字符不能使用数字

div+css布局教程2、类选择器div+css布局教程1、桥接样式表方法在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效的管理这些样式。div+css布局教程1、桥接样式表方法div+css布局教程书写方式为：@importurl(color.css);@imporpurl(type.css);引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的效果.div+css布局教程书写方式为：div+css布局教程2、关于ID和Class命名的规范总体思想：语义化的命名div+css布局教程2、关于ID和Class命名的规范div+css布局教程个人推荐在开发过程中逐渐形成自己的命名规范，如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-”如site-nav/quick-menu/secondaryContent/。

但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考虑中，div+css布局教程个人推荐在开发过程中逐渐形成自己的命名二、网页布局常用属性

1.css盒子模型2.css定位和浮动div+css布局教程div+css布局教程div+css布局教程div+css布局教程div+css布局教程在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素#box{width:70px;margin:10px;padding:5px;}div+css布局教程在CSS中，width和heidiv+css布局教程CSS盒子模型是在网页布局中必须用到的，其中常用的属性有：Margin（外边距）,padding

(内边距)分别有上下左右四个属性，topbottomleftright例子：h1{margin:10px0px15px5px;}顺序为上、右、下、左顺时针旋转

Padding属性的写法与margin一样。div+css布局教程CSS盒子模型是在网页布局中必须用到的div+css布局教程需要注意的地方：CSS外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。div+css布局教程需要注意的地方：CSS外边距合并div+css布局教程当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：div+css布局教程当一个元素包含在另一个元素中时（假设没div+css布局教程CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。CSS的定位和浮动是控制布局的重要方法。通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的减少了代码量，使得页面结构更加清晰，代码更加精简。div+css布局教程CSS为定位和浮动提供了一些属性，利div+css布局教程我们首先必须了解一个概念：“块级元素”，“行内元素”常见的块级元素有：div,ul,p,h1常见行内元素有：span,strong行内元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）

在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰div+css布局教程我们首先必须了解一个概念：“块级元素”div+css布局教程例子：<div>ab<span>c</span>defg</div>这里的div为块级元素，span为行内元素。我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。div+css布局教程例子：<div>ab<span>c</div+css布局教程1，定位div{position:relative;}//相对定位div{position:absolute;}//绝对定位CSS相对定位

概念：元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。可以理解为：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。div+css布局教程1，定位div+css布局教程1，定位例子：#box_relative{position:relative;left:30px;top:20px;}我们看见，框2脱离原来的位置，相对与原占位空间偏移了一定的距离。但是框2原本的占位空间没有消失。所以相对定位不会对布局格式产生影响。（实例演示）div+css布局教程1，定位我们看见，框2脱离原来的位置，div+css布局教程1，定位绝对定位概念：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。可以理解为：绝对定位的元素的位置相对于最近的已设置相对定位的父元素，如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于最初的包含块（body的左上角）。div+css布局教程1，定位div+css布局教程1，定位绝对定位例子：#box_relative{position:absolute;left:30px;top:20px;}

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。（实例演示）div+css布局教程1，定位绝对定位使元素的位置与文档流无div+css布局教程1，定位绝对定位提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。总结:相对定位的元素不会脱离文档流，占用文档流的空间.绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素.绝对定位的元素以最近的定位祖先元素为参照物。

绝对定位应用——容器在浏览器中垂直居中div+css布局教程1，定位div+css布局教程2，浮动概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。属性：float：left;float:right;用法：请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

div+css布局教程2，浮动div+css布局教程2，浮动网页布局中的应用：在网页布局中，浮动是必须使用到的方法。我们常常利用浮动使指定的块移动到我们需要的地方。比如两列，或者三列的布局。比如横向的菜单等等……实例：如何让三列横向排列。div+css布局教程2，浮动div+css布局教程2，浮动浮动的兄弟：清理浮动属性：clear;clear属性的值可以是left、right、both或none，它表示框的哪些边不应该挨着浮动框。

为什么要用到清理浮动，我们来看一个例子。div+css布局教程2，浮动三、网页布局实例

div+css布局教程QQformac页面分析div+css布局教程QQformac四、web标准化思想与网页重构

所谓web标准化，有两层含义。一、就是W3C系列规范，html4.0，xhtml1.0，css2.1，ECMAScript，DOM,XML等等，作为一个页面工程师，要学会熟读标准，认识和了解标准。W3C标准就是让页面在不同的终端都可以运行，让使用各种终端的用户都能浏览你的页面，也就是跨越平台，获得更大众化的用户的使用。

div+css布局教程div+css布局教程四、web标准化思想与网页重构

二、结构，表现，行为三者的分离。结构是严格的语义化HTML文档编写，CSS是HTML页面的视觉处理，行为是通过用户行为的触发去动态改变页面，内容修改，功能的完成等等。分离不是简单的文件的分离，而是严格的分工的分离，不要用table去布局，那是css的事情，不要用hx去调整字体大小，那也是CSS的事情。结构=内容+语义化的解释内容。表现=页面内容的呈现效果。行为=用户触发去改变内容和HTML和CSS。

div+css布局教程div+css布局教程四、web标准化思想与网页重构

网页重构，从语义化标签开始！！所谓语义化标签，就是让页面中每一个标签都有存在的意义。各尽其用，比如h1定义标题，p用来定义段落，ul为无序列表,table的存在就是为了标记列表的数据。

所以并非在布局中无论什么情况都用div，html语言在设计的时候并不只有div一个标签，我们之所以喜欢使用div布局，是因为div的属性有助于方便的控制布局。

div+css布局教程div+css布局教程四、web标准化思想与网页重构

所以网页重构不等于div+css

重构小提示：1、减少使用div标签;2、应该用div定义页面的主要框架结构，比如头部、内容、边栏和底部等结构;3、内容应该使用语义化的html标签，而不是div标签;

div+css布局教程div+css布局教程div+css布局教程

TheTutorialofcss+div

div+css布局教程TheTudiv+css布局教程目录：1.CSS基础知识2.网页布局常用属性3.网页布局实例4.Web标准化思想与网页重构

div+css布局教程一、CSS基础知识

1.css简介2.css语法3.选择器4.实用小技巧div+css布局教程div+css布局教程div+css布局教程CSS指层叠样式表(CascadingStyleSheets)

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行样式通常存储在样式表中

外部样式表通常存储在CSS文件中外部样式表可以极大提高工作效率

div+css布局教程CSS指层叠样式表(Cascadidiv+css布局教程CSS语法由三部分构成：选择器、属性和值：P{color:#ff0000;background:#000000;}其中“p”,我们称为选择器，指明我们要给“p”定义样式；样式声明写在一对大括号“{}”中；Color和background称为“属性”，不通属性之间用“；”分隔“#ff0000”和“#000000”是属性的值div+css布局教程div+css布局教程几点值得注意的地方：1、选择器的分组可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）例子：h1{color:green;}h2{color:green;}h3{color:green;}我们可以这样写：h1,h2,h3{color:green;}样式太臃肿了，该减肥了!div+css布局教程样式太臃肿了，该减肥了!div+css布局教程几点值得注意的地方：2、继承及其问题根据CSS，子元素从父元素继承属性。

例子：body{font-family:Verdana,sans-serif;}根据上面这条规则，站点的body元素将使用Verdana字体通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p,td,ul,ol,ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是Times。我们可以这样写：p{font-family:Times,"TimesNewRoman",serif;}

div+css布局教程div+css布局教程几点值得注意的地方：3、层叠次序当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？样式表分为：浏览器缺省设置外部样式表内部样式表（位于<head>标签内部）内联样式（在HTML元素内部）

优先级为：内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。div+css布局教程div+css布局教程几点值得注意的地方：4、高效的CSS（1）使用外联样式代替内联样式和内部样式表不推荐使用：<pstyle=“color:red”></p>或者是：<styletype=“text/css”>p{color:red;}</style>(2)使用组选择器h1,h2,h3{color:green;}(3)使用继承不推荐使用：td{font-size:12px;}p{font-size:12px;}li{font-size:12px;}…应该这样写body{font-size:12px;}div+css布局教程div+css布局教程几点值得注意的地方：（4）使用简记属性不推荐使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;应该这样写margin:1px3px4px2px;div+css布局教程div+css布局教程1、CSS派生选择器

ulli{font-weight:bold;}定义ul内li标签的样式Pspana{font-weight:bold;}定义段落下a标签的样式可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格表示。div+css布局教程1、CSS派生选择器div+css布局教程2、id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以“#”来定义。例子：#red{color:red;}#green{color:green;}注意：id属性只能在每个HTML文档中出现一次。

div+css布局教程2、id选择器div+css布局教程2、类选择器在CSS中，类选择器以一个点号显示：例子：.center{text-align:center}

注意：类名的第一个字符不能使用数字

div+css布局教程2、类选择器div+css布局教程1、桥接样式表方法在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效的管理这些样式。div+css布局教程1、桥接样式表方法div+css布局教程书写方式为：@importurl(color.css);@imporpurl(type.css);引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的效果.div+css布局教程书写方式为：div+css布局教程2、关于ID和Class命名的规范总体思想：语义化的命名div+css布局教程2、关于ID和Class命名的规范div+css布局教程个人推荐在开发过程中逐渐形成自己的命名规范，如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-”如site-nav/quick-menu/secondaryContent/。

但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考虑中，div+css布局教程个人推荐在开发过程中逐渐形成自己的命名二、网页布局常用属性

1.css盒子模型2.css定位和浮动div+css布局教程div+css布局教程div+css布局教程div+css布局教程div+css布局教程在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素#box{width:70px;margin:10px;padding:5px;}div+css布局教程在CSS中，width和heidiv+css布局教程CSS盒子模型是在网页布局中必须用到的，其中常用的属性有：Margin（外边距）,padding

(内边距)分别有上下左右四个属性，topbottomleftright例子：h1{margin:10px0px15px5px;}顺序为上、右、下、左顺时针旋转

Padding属性的写法与margin一样。div+css布局教程CSS盒子模型是在网页布局中必须用到的div+css布局教程需要注意的地方：CSS外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。div+css布局教程需要注意的地方：CSS外边距合并div+css布局教程当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：div+css布局教程当一个元素包含在另一个元素中时（假设没div+css布局教程CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。CSS的定位和浮动是控制布局的重要方法。通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的减少了代码量，使得页面结构更加清晰，代码更加精简。div+css布局教程CSS为定位和浮动提供了一些属性，利div+css布局教程我们首先必须了解一个概念：“块级元素”，“行内元素”常见的块级元素有：div,ul,p,h1常见行内元素有：span,strong行内元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）

在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰div+css布局教程我们首先必须了解一个概念：“块级元素”div+css布局教程例子：<div>ab<span>c</span>defg</div>这里的div为块级元素，span为行内元素。我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。div+css布局教程例子：<div>ab<span>c</div+css布局教程1，定位div{position:relative;}//相对定位div{position:absolute;}//绝对定位CSS相对定位

概念：元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。可以理解为：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。div+css布局教程1，定位div+css布局教程1，定位例子：#box_relative{position:relative;left:30px;top:20px;}我们看见，框2脱离原来的位置，相对与原占位空间偏移了一定的距离。但是框2原本的占位空间没有消失。所以相对定位不会对布局格式产生影响。（实例演示）div+css布局教程1，定位我们看见，框2脱离原来的位置，div+css布局教程1，定位绝对定位概念：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。可以理解为：绝对定位的元素的位置相对于最近的已设置相对定位的父元素，如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于最初的包含块（body的左上角）。div+css布局教程1，定位div+css布局教程1，定位绝对定位例子：#box_relative{position:absolute;left:30px;top:20px;}

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。（实例演示）div+css布局教程1，定位绝对定位使元素的位置与文档流无div+css布局教程1，定位绝对定位提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。总结:相对定位的元素不会脱离文档流，占用文档流的空间.绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素.绝对定位的元素以最近的定位祖先元素为参照物。

绝对定位应用——容器在浏览器中垂直居中div+css布局教程1，定位div+css布局教程2，浮动概念：浮动的框可以向左或

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论