05 2022 档案
摘要：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/reset.css"> <style type="text/css"> /* 为body设置背景
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .w{ width: 1000px; margin:aut
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <!-- 表格用来表示一些格式化的数据 在网页中，使用table来创建表格 --> <table border="1px" al
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景</title> <style type="text/css"> .box{ width: 200px; height: 200px; padding: 10px; /* ba
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式2</title> <style> p{ width: 300px; background-color: #bfa; /* white-space: 如
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <style> p{ width: 500px; background-color: #bfa; font-size: 50px; /
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>字体</title> <style type="text/css"> div{ border: 1px red solid; font-size: 30px; line-heigh
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行高</title> <style> /* 文本在网页中显示时，CSS会为每一个文本行都设置一个文本框，以容纳这些文字 */ div{ height: 100px; border:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>em和rem</title> <style> .box { color: red; font-size: 100px; font-family: 华文彩云, 微软雅黑; /* em
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿里图标字体</title> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/> <styl
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>粘滞定位</title> <style> ul { height: 200px; width: 200px; background-color: #bfa; o
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定定位</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>绝对定位</title> <style> .box1{ width: 200px; height: 200px; background-color: #bfa; position:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位/相对定位</title> <style type="text/css"> /* 定位 通过定位可以将元素摆放到页面中的任意位置 使用position属性来设置元素的定位 可选
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度塌陷和外边距折叠的完美解决代码</title> <style> .box1{ border: 1px red solid; } .box2{ width: 200px; hei
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>clear</title> <style> .box1{ width: 100px; height: 100px; background-color: #bfa; float: l
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度塌陷</title> <style type="text/css"> .box { border: 1px solid red; /* BFC无法直接开启，需要通过一些属性来开
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮廓和阴影</title> <style type="text/css"> .box{ width: 100px; height: 100px; background-color:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆角</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #8
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>二级标题练习</title> <style type="text/css"> .inner{ display: none; } .outer > li:hover .inner{
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>块和行内</title> </head> <body> <!-- 块元素（block） 块元素用于页面布局 行内元素（inline） 行内元素主要用于页面中选中文字 一般情况下只会
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>visibility</title> <style type="text/css"> /* visibility可以设置元素的显示状态 可选值 visible默认值，元素正常显示
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display</title> <style type="text/css"> /* display 指定元素所产生的框的类型 可选值 inline行内元素 block块元素 in
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档流</title> </head> <body> <!-- 文档流（标准流、常规流） 文档流是网页中的一个位置，默认情况页面中的所有元素都在文档流中排列 块元素在文档流中的特点
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外边距的折叠</title> <style type="text/css"> /* 垂直方向相邻的外边距，会发生外边距折叠现象，兄弟元素间的相邻外边距，会取两个 外边距间最大值（正
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>垂直方向布局</title> <style type="text/css"> /* 垂直方向布局 如果不为父元素指定高度，则父元素会自动适应子元素的高度，确保能容纳所有子元素 如果
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>box-sizing</title> <style> .box{ width: 100px; height: 100px; border: 2px solid red; backg
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平方向布局</title> <style> /* 如果left和right都设置为auto，则会两侧外边距设置的是相等的值，从而导致子元素在父元素中水平居中 */ .box{ w
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型（框模型）——外边距</title> <style type="text/css"> /* 外边距 当前盒子和其他盒子之间的距离称为外边框，外边框不会影响盒子的可见框大小
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型（框模型）——内边距</title> <style type="text/css"> /* 内边距 盒子的可见框大小由内容区，内边距共同决定 边框和内容区之间的边距叫做内边
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型（框模型）——边框</title> <style type="text/css"> /* 边框（border） 不指定宽度，边框也会有一个默认宽度，一般是3px 不指定颜色
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子模型</title> <style type="text/css"> .box{ width: 100px; height: 100px; /* 边框，是盒子的边界，出了边框就
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器的权重</title> <style> /* 当我们使用不同的选择器选择了相同的元素，又为其同一个样式设置了不同的值， 此时就发生了样式的冲突 发生样式冲突时，显示那个样式，
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪元素</title> <style> /* 伪元素主要表示一些特殊元素 ::before表示元素开头的位置 ::after表示元素结束的位置 ::first-letter表示首字
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a的伪类</title> <style type="text/css"> /* a的伪类 :link 正常的超链接（带有href的a标签） 主要用来设置没有访问过的超链接样式 :v
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style type="text/css"> /* 属性选择器 根据元素的属性来选中元素 [属性名]获取含有指定属性的元素 */ [title]{ w
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>伪类选择器</title> <style> /* 伪类选择器 :first-child表示第一个子元素（在所有子元素中查找） :first-of-type同类型中的第一个子元素 :
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>兄弟选择器</title> <style> p + span{ background-color: #00FFFF; } p ~ span{ background-color: #
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子元素选择器</title> <style> /* 子元素选择器 作用：选中父元素的指定元素 语法：父元素 > 子元素 */ div > p{ background-color:g
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后代元素选择器</title> <style> /* 后代元素选择器 作用：选中指定元素的指定子元素 语法：祖先 后代{} */ div p{ font-size: 20px; }
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素间的关系</title> </head> <body> <!-- 元素间的关系 父元素 直接包含子元素的元素 子元素 直接被父元素所包含的元素 祖先元素 直接或间接包含后代元素
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>交集选择器</title> <style> /* 交集选择器 作用：选中同时符合多个选择器的元素 语法：选择器1选择器2....选择器N 列子：div.box{} */ div.b
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通配选择器</title> <style> /* 通配选择器 作用：选中页面中所有的元素 语法：* */ *{ background-color: #BBFFAA; } </sty
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>类选择器</title> <style type="text/css"> /* 类选择器 作用：根据元素的class属性选中元素 语法：.p1{} .p2{} */ .p3{ ba
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选择器分组</title> <style> /* 选择器分组 作用：可以同时为多个选择器设置相同的样式 语法：选择器1，选择器2，选择器3。。。。，选择器N 列子：#bootom，
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>id选择器</title> <style> /* id选择器 作用：根据元素的id属性值，选中一个元素 语法：#id 列子：#bootom */ #bootom{ font-siz
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素选择器</title> <!-- 元素选择器 作用：根据标签名来选中指定元素 语法：标签名 列子：p{} b{} --> <style> p{ background-color
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 列表（list） 列表主要用来表示多个并列关系额内容 有序列表 使用ol标签来创建一个有序列表 使用li标签来表示列表中的
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- a标签(超链接) 通过超链接可以从一个页面跳转到另外的页面 属性: href指定要跳转的目标的路径 可以指定一个外部页面的
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <video autoplay controls> 当前浏览器不支持 video直接播放 <source src="voide/fl
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 使用audio标签来引入一个外部的音频 一般情况下,音频都是使用mp3 默认情况下音频会在页面中显示和播放 control
阅读全文
摘要：<!DOCTYPE html> <html> <head> <!-- meta标签用来设置网页中的元数据，它里面的内容不被用户查看， 一般用来告诉浏览器如何解析网页，或者告诉搜索引擎网页的主要内容 可选属性： name： 要设置的属性的名字 content： 要设置属性的内容 --> <!-- de
阅读全文
