《HTML+CSS基础教程》课件.pptVIP

**************************元素定位1静态定位position:static;默认定位，元素位于文档流中。2相对定位position:relative;相对于元素在文档流中的位置进行定位。3绝对定位position:absolute;相对于最近的已定位祖先元素进行定位。4固定定位position:fixed;相对于浏览器窗口进行定位。浮动与清除1浮动float:left;或float:right;使元素脱离文档流，并向左或向右浮动。2清除clear:left;或clear:right;用于清除浮动元素对其他元素的影响。3应用场景常用于创建多列布局，使元素并排显示。层叠与优先级1层叠顺序当多个样式规则作用于同一个元素时，浏览器会根据层叠顺序来决定最终的样式。2优先级样式规则的优先级由选择器的特异性决定，越特异的选择器，优先级越高。3重要性声明!important可以用来覆盖其他样式规则，但应谨慎使用。伪类与伪元素伪类用于根据元素状态来改变样式，例如：:hover表示鼠标悬停在元素上时。伪元素用于创建一些新的元素，例如：::before表示在元素内容之前添加一个新元素。CSS单位像素px，最常用的单位，表示像素。百分比%，相对于父元素的尺寸。emem，相对于当前元素的字体大小。remrem，相对于根元素的字体大小。CSS颜色表示十六进制颜色#FF0000RGB颜色rgb(255,0,0)颜色名称redCSS长度单位像素pxemem百分比%响应式布局1自适应布局根据屏幕尺寸自动调整网页布局，以适应不同的设备。2媒体查询@media(max-width:768px){...}3栅格系统使用栅格系统来划分页面布局，以适应不同屏幕尺寸。Media查询语法@media(max-width:768px){...}查询条件可以根据屏幕尺寸、方向、分辨率等条件进行查询。样式规则在媒体查询中定义的样式规则只在满足查询条件时生效。栅格系统1列划分将页面分成多个等宽的列。2行划分将页面分成多个行。3响应式调整根据屏幕尺寸调整列的宽度，以适应不同设备。Flex布局1弹性盒子模型Flexbox是一种新的布局模型，它可以更轻松地创建灵活和响应式的布局。2容器属性display:flex;3项目属性flex-grow,flex-shrink,flex-basis,orderGrid布局1网格布局Gridlayout是一种强大的布局模型，可以创建更复杂的二维布局。2网格容器display:grid;3网格项目grid-column,grid-row,grid-area导航菜单设计水平菜单将菜单项水平排列，适合宽度较大的网页。垂直菜单将菜单项垂直排列，适合宽度较小的网页。下拉菜单当鼠标悬停在菜单项上时，显示子菜单。表单样式设计输入框设置输入框的边框、颜色、大小等样式。按钮设置按钮的背景颜色、字体颜色、边框等样式。错误提示当用户输入错误时，显示错误提示信息。页脚设计版权信息显示网站的版权信息，例如：?2024公司名称。联系方式显示网站的联系方式，例如：邮箱地址、电话号码等。社交链接显示网站的社交媒体链接，例如：Facebook、Twitter等。网站favicon网站图标favicon是网站的图标，显示在浏览器标签页和书签栏中。链接使用link标签将favicon文件链接到HTML页面。图标格式favicon通常使用.ico格式。背景图片处理1背景图像background-image:url(image.jpg);2背景重复background-repeat:no-repeat;3背景尺寸background-size:cover;CSS动画动画属性animation-name,animation-duration,animation-timing-function,animation-iteration-count动画关键帧@keyframesanimation-name{...}应用场景创建元素的动态效果，例如：淡入淡出、旋转、移动等。Hover特效1鼠标悬停:hover伪类用于创建鼠标悬停在元素上的效果。2颜色变化改变元素的背景颜色或文字颜