2019年web前端开发技术课件、习题答案和原代码2019年web前端开发技术课件、习题答案和原代码v3_Chap8

1、第8章掌握DIV和SPAN(1个会话)、DIV、CSS、教育目标、DIV标签的基本使用方法、共通属性。 理解DIV的嵌套和积累的意思。 掌握SPAN标签的语法，灵活运用SPAN标签。 掌握DIV标签和SPAN标签的使用差异。 学习使用DIV CSS的简单页面版结构。8.1.1 DIV图层、8.1.1 DIV(division/Section )定义是封摇滾乐级别的元素，前后有换行符，用于定义文档中的节和节。 基本语法子摇滾乐包括层CSS propertion、位置：定位、静态|相关宽度| :高层宽度|层高度left| top:左边距| 上边距border:边框“粗细线的形状线的颜色”z-ind

2、ex:层在位置属性值为“absolute”时，子层始终位于父层上，值越大则越位于父层上。 清除清除器：左/右/无、左、右、右、底和浮点。 浮动：左侧、右侧、无浮动、应用8.1.2 DIV、 div1、 div1后台3360 # 99 ffff； widht:200px； height:300px； # div 2后台3360 # 00cc 00； widht:200px； height:300px； 两者的主要区别在于，class用于元素组，而id标识单独的唯一元素。8.2层的嵌套和级联反应，层包含其他称为层嵌套的层。 为了更准确地控制页面的显示，应该在CSS样式中使用层嵌套。 情况：edu_

3、8_2_1.html、div1div2div3、8.2层的嵌套层叠起来，bodymargin:0； /*margin表示利润，在8.5CSS机箱型号中介绍*/div位置： absolute/*定位方式为绝对定位定位*/width:200px； height:200px； # d 1背景色：黑色； z指数：0； /*此层为最下方*/color:white； # d 2背景色：红色； top:25px； 左：50 px； z指数：1； /*层为中央*/# d3background-color : yellow； top:50px； 左：100 px； z指数：2； /*此层是顶层*/div1 di

4、v2 div3、要求、8.3 div标签和span标签、1.span标签内联元素的基本语法：行内内容2.Div标签和span标签使用CSS进行适当的样式，而不格式化或呈现标签中的内容1 )是否为封摇滾乐标记。 div标签是一个子摇滾乐标签，通常包含很大的区域，在区域前后自动换行。span标签是行内标签，通常范围很小，通常是一行，在该区域之外不换行。 2 )是否可以相互包含。 div标签通常可以包含span标签，但span标签不能包含div标签。 但是，子摇滾乐标签和行标签不是绝对的，可以通过定义CSS的display属性来相互转换。 (案例： edu_8_3_1.html )、附录： CSS的

5、display属性、display :指定要素生成的窗格的类型。 说明：此属性定义元素在创建版结构时生成的窗格类型。 使用display是非常危险的，因为HTML等文档类型可能会违反HTML中定义的显示层次结构。p display :线条；/* block level元素变为内联元素*/div display: none隐藏层*/* 8.4综合案例，在本例中以“苏州百特电器有限公司”主页为参照网站，使用DIV CSS完成页面版式设计，设计效果与原来的网站相似() 。综合实例查询密码、苏州百特电器有限公司网站对外汉语|ENGLISH牛鼻子关键词：掌门人网页为我们产品相关的新闻消息信息人才招聘联络

6、人、综合实例查询密码，本公司正式上线了，欢迎您的光临. 2013-06-06、 综合事例查询密码咨询热线：固定电话：电子邮件：evabetter-着作权所有suzhongbestcleanelectricco .Ltd .苏ICP准备888888888888技术保障：中国万网，本章总结，本章包括DIV和SPAN标签的基本语法和2个通常，div标签是块级标签，span标签是行内标签，div标签可以换行，span标签不能换行div标签可以包含div标签和span标签，但span标签不能包含div标签。 然而，可以通过将display属性的值设置为inline或block来转换这两个标签的外在表示。 div、s