《DIV样式和设置》课件

样式和设置DIV简介DIV灵活布局内容容器可以将页面分割成多个独立的区本身并不显示任何内容，但可以DIV DIV域，方便进行内容的组织和布局包含各种文本、图片、视频等元素样式控制可以应用样式，改变其外观DIV CSS，如大小、颜色、边框等基本特性DIV块级元素通用容器12是块级元素，它在页面中是一个通用容器，可以用DIV DIV独占一行，可以包含其他来组织页面内容，将不同的内元素，比如文本、图片容进行分组，以便于管理和控HTML、表格等制可样式化3元素可以设置各种样式，比如颜色、字体、大小、位置等，从而控DIV制其在页面中的显示效果设置尺寸DIV宽度1使用属性width高度2使用属性height百分比3相对父元素设置尺寸控制内容溢出DIVoverflow:hidden1隐藏溢出内容overflow:scroll2显示滚动条overflow:auto3自动显示滚动条overflow:visible4默认值，内容溢出显示内边距和外边距DIV内边距外边距控制内容与边框之间的距离控制边框与其他元素之间的距离背景设置DIV背景颜色背景图片使用属性使用属性`background-color``background-image`设置背景颜色例如设置背景图片例如`background-color:#f0f0f0;``background-image:urlimage.jpg;`背景重复背景位置使用属性使用属`background-repeat``background-position`控制图片重复方式例如性设置图片在内的位置例DIV如`background-repeat:no-`background-position:repeat;`center;`边框设置DIV边框样式边框宽度边框颜色可以使用属性设置边框样式可以使用属性设置边框宽可以使用属性设置边框颜色border-style border-width border-color，例如（实线），（虚线）度，例如，，等，例如，，等solid dashed1px2px3px redgreen blue，（点线）等dotted对齐方式DIV文本对齐垂直对齐使用属性可以控制使用属性可以控text-align vertical-align内文本的对齐方式，包括左制内文本的垂直对齐方式DIV DIV对齐、右对齐、居中对齐和两端，例如顶部对齐、底部对齐和中对齐间对齐对齐参考点对齐方式通常是相对于父元素进行的，例如，将文本居中对齐于父元素的中心浮动布局DIV脱离文档流浮动元素会脱离标准文档流，不会占据任何空间，可以用来实现图片绕文字的效果左右对齐浮动元素可以控制在容器内部的水平方向上进行对齐，实现左右两侧内容并列显示清除浮动在浮动元素的父容器中添加清除浮动属性，避免浮动元素影响后续布局定位DIV静态定位1默认定位方式，元素保持在文档流中的位置相对定位2基于元素在文档流中的位置进行偏移绝对定位3元素脱离文档流，相对于最近的定位祖先元素进行定位固定定位4元素脱离文档流，相对于浏览器窗口进行定位层级关系DIV层叠顺序属性z-index层叠顺序决定了元素在页面上的显示顺序使用属性来控制层级关系越大，层级越高z-index z-index透明度DIV半透明效果层叠效果通过设置属性，可以使元透明度可以实现层叠效果，例如将一opacity DIV素呈现半透明效果，例如个半透明的覆盖在另一个上，opacity:DIV DIV表示透明度为可以使底层的部分内容可见

0.5;50%DIV视觉效果合理运用透明度可以提升页面设计感，例如将背景图片设置为半透明，可以营造出柔和的视觉效果样式继承DIV父级样式继承规则父级元素的样式会传递给子级元并非所有样式都能继承，例如，素，子级元素会继承父级元素的颜色、字体大小、字体样式、文样式本对齐方式、边框等样式通常可以继承样式覆盖子级元素可以通过设置自己的样式来覆盖继承的样式样式优先级DIV内联样式外部样式表内嵌样式直接在元素标签中定义的样式，优先级最在单独的文件中定义的样式，优先级在文档的CSS HTML高低于内联样式利用进行页面布局DIV结构清晰1是网页结构的基本元素，通过嵌套可以划分页面区域DIV DIV灵活布局2通过设置的尺寸、位置、浮动等属性，可以实现各种布局效果DIV易于维护3基于的布局结构清晰，便于修改和维护代码DIV经典布局实践DIV利用进行布局可以创建多种常见的网站结构，例如DIV两栏布局左侧导航栏，右侧内容区域•三栏布局左侧导航栏，中间内容区域，右侧侧边栏•固定头部和底部，中间可变内容区域•网格布局利用排列成网格，展示商品或图片•DIV响应式布局设计自适应屏幕自动调整网页内容大小，以适应不同尺寸的设备，例如手机、平板电脑和台式电脑优化用户体验确保用户在任何设备上都能舒适地浏览网页，提高用户满意度和参与度多种技术常用的响应式布局技术包括媒体查询、栅格系统和弹性布CSS局利用制作导航菜单DIV创建DIV1使用标签创建菜单容器DIV添加链接2在中添加链接元素，指向不同的页面DIV样式设置3使用设置菜单的样式，如颜色、字体、尺寸等CSS应用案例图文混排DIV-可轻松实现图文混排，将图片和文字组合排列，增强页面视觉效果DIV通过设置的样式，例如浮动属性、定位属性等，可以控制图片和文字的位DIV置关系，实现多样化的布局效果图文混排是网页设计中常见的布局方式，的灵活性使其成为实现图文混排的DIV最佳选择应用案例九宫格布局DIV-九宫格布局在网页设计中非常常见，利用可以轻松实现首先，将页面划分DIV为的网格，每个网格对应一个元素然后，通过设置每个的尺寸和3x3DIV DIV边距，可以调整每个网格的大小和间距最后，根据需要在每个中添加内容DIV，比如图片、文字或其他元素九宫格布局灵活多变，可以用于展示产品、图片、文章等多种内容应用案例鼠标悬停效果DIV-使用的伪类可以实现鼠标悬停效果，例如改变颜色、CSS`hover`大小、透明度等可以使用事件监听器添加更复杂的JavaScript效果，例如显示隐藏内容鼠标悬停改变颜色•鼠标悬停显示隐藏内容•鼠标悬停动画效果•应用案例折叠菜单DIV-折叠菜单是一种常见的交互式菜单设计，通过点击按钮或链接展开或收起菜单内容，节省页面空间使用可以轻松实现折叠菜DIV单的结构和样式控制例如，可以通过设置的默认高度为，并使用的DIV0CSS属性，实现点击按钮后菜单内容平滑展开的效果transition应用案例吸顶导航DIV-网站粘性导航移动端适应当用户滚动页面时，导航菜单会固定在页面顶部，方便用户随时访吸顶导航在移动端同样适用，提供更好的用户体验问应用案例视频遮罩弹窗DIV-使用可以轻松创建视频遮罩弹窗效果，例如在网页上播放视频时，可以用一DIV个层覆盖其他内容，实现视频播放时的全屏遮罩效果DIV当用户点击视频区域时，弹出视频弹窗，用户可以控制视频播放或暂停，关闭弹窗后，视频停止播放应用案例图片轮播DIV-图片轮播是一种常见的网页交互效果，它可以用来展示多个图片，并通过自动或手动切换的方式，循环播放图片使用可以轻松实现图片轮播效果DIV图片轮播的实现步骤包括使用容器包裹所有图片•DIV使用设置图片轮播的样式，包括尺寸、位置、动画效果等•CSS使用控制图片的切换逻辑，例如自动播放、手动切换等•JavaScript应用案例进度条DIV-网站加载进度视频播放进度文件下载进度使用创建进度条，实时展示网页加载进在视频播放器中使用显示进度条，方便利用制作下载进度条，实时更新下载进DIV DIV DIV度，提高用户体验用户掌握播放进度度，让用户了解下载状态应用案例标签页切换DIV-标签页切换是常见的网页交互效果，使用可以轻松实现DIV通过设置多个作为标签页内容，并使用控制显示DIV JavaScript隐藏，即可实现标签页切换效果应用案例分页导航DIV-分页导航是网站中常见的交互元素，用于将大量内容分成多个页面进行展示，方便用户浏览和访问通过元素可以轻松实现分DIV页导航功能，并通过样式进行美化CSS设置容器，用于包含所有分页按钮•DIV使用多个元素分别创建每个分页按钮•DIV使用样式控制按钮的外观、间距和交互效果•CSS通过代码实现分页功能，控制页面内容的显示和隐•JavaScript藏应用案例表单布局DIV-联系表格注册表单登录表单使用创建表单，便于设置样式，并使表使用控制表单布局，使表单结构更清晰使用进行表单布局，方便实现不同表单DIV DIVDIV单更美观的样式总结与练习回顾实践探索本课件深入讲解了样式和设置，从建议您动手练习，尝试将学到的知识运是网页设计的基础，还有很多更深DIVDIV基础特性到高级应用，涵盖了布局用到实际网页制作中，加深理解和掌握入的技巧和应用，期待您持续探索学习DIV的方方面面。