网站颜色搭配表,建设一个旅游平台网站需要多少资金,第一推是谁做的网站,备案时填写 网站内容目录 一、字体 二、背景图片 三、显示方式 四、类型转换 五、相对定位 六、绝对定位 七、固定定位 八、Index 九、粘性定位 十、内边距 十一、外边距 十二、边框 十三、盒子尺寸计算问题 十四、清楚默认样式 十五、内容溢出 十六、外边距的尺寸与坍塌 十七、行…目录 一、字体 二、背景图片 三、显示方式 四、类型转换 五、相对定位 六、绝对定位 七、固定定位 八、Index 九、粘性定位 十、内边距 十一、外边距 十二、边框 十三、盒子尺寸计算问题 十四、清楚默认样式 十五、内容溢出 十六、外边距的尺寸与坍塌 十七、行内元素的内外边距 十八、块级元素水平居中 十九、边框弧度 二十、盒子阴影 二一、文字阴影 二二、Resize 二三、浮动 二四、浮动的问题 二五、Flex布局 二六、主轴的对齐方式 二七、侧轴的对齐方式 二八、修改主轴方向 二九、弹性伸缩比 三十、换行 三一、Grid 三二、透明度 三三、元素的显示与隐藏 三四、光标的样式 三五、轮廓样式 三六、过渡 三七、字体 三八、平移 三九、旋转 四十、改变原点 四一、多重转换 四二、缩放 四三、倾斜 四四、空间转换 四五、动画 四六、相邻边框合并 四七、字体图标引入方式1 四八、字体图标引入方式2 四九、Iconfont 五十、解决图片底部空白 五一、JS当中的结束符 五二、输入输出语法 五三、变量 五四、LetVar区别 五五、数据类型 五六、隐式转换 五七、求和 五八、剩余参数 五九、Var-展开运算符 六十、对象 六一、垃圾回收机制 六二、闭包 六三、Math 六四、Date 六五、获取元素对象 六六、元素内容 六七、改属性 六八、改Style样式 六九、补充 七十、查找节点 七一、事件监听 七二、Index 一、字体 stylep {font-size: 18px;font-weight: 700;/* 字体样式倾斜 */font-style: italic;color: red;/* 水平间距相对于包含区块级元素内容框的左侧或右侧对于从右到左的布局边缘的距离。 */text-indent: 2em;/* 高度 */line-height: 20px;/* 居中 */text-align: center;/* 上划线 */text-decoration: overline;}/style /head bodypHello Word/p /body 二、背景图片 stylediv {width: 800px;height: 1500px;background-color: aqua;background-image: url(E:\\代码\\素材\\屏幕截图 2024-04-07 225349.png);/* 背景图平铺方式 */background-repeat: repeat-x;/* background-repeat: repeat-y; *//* 背景图片不平铺 */background-repeat: no-repeat;/* 背景图片的位置 *//* 给方向名词 中间使用空格隔开 */background-position: top left;/* background-position: right bottom; *//* 给坐标 水平方向正数向右 负数向左 *//* background-position: 100px 0; *//* 垂直方向正数向下 */background-position: 0 50px;/* background-position: 0 -150px; *//* background-position: 50px bottom; *//* 背景图片的缩放 等比例缩放背景图直到将盒子容器铺满覆盖*//* background-size: cover; */background-size: contain;/* %根据外边盒子的尺寸进行计算 */background-size: 100% 100%;/* 数字单位px */background-size: 500px 500px;}body {height: 1000px;/* 背景颜色的 */background-color: rgba(0, 0, 0, .6);/* background-image: url(/素材/02.png); */background-repeat: no-repeat;/* 背景图片固定 *//* background-attachment: fixed; */}/style /head bodydiv/div /body 三、显示方式 style.father {width: 1200px;height: 300px;background-color: aqua;}.son {background-color: black;height: 50px;}span {width: 300px;height: 50px;background-color: aqua;}a {width: 300px;height: 300px;background-color: bisque;}.aaa {width: 1200px;height: 200px;}img {width: 100px;height: 100px;}/style /head bodydiv classfatherdiv classson/div/divspanhi/spanspanhi/spanspanhi/spanspandiv classaaahezi /divhi/spana href#链接/aa href#链接/aa href#链接/aa href#链接/abrimg srcE:\\代码\\素材\\屏幕截图 2024-04-07 225349.pngimg srcE:\\代码\\素材\\屏幕截图 2024-04-07 225349.pngimg srcE:\\代码\\素材\\屏幕截图 2024-04-07 225349.pngimg srcE:\\代码\\素材\\屏幕截图 2024-04-07 225349.png /body 四、类型转换 stylea {/* 将元素转换为行内块元素 *//* display: inline-block; *//* display: block; */width: 200px;height: 100px;background-color: pink;}div {display: inline;background-color: aquamarine;}/style /head bodya href#链接/aa href#链接/aa href#链接/aa href#链接/adivhi/divdivhi/divdivhi/divdivhi/div 五、相对定位 stylediv {/* 相对定位 相对与自身原本的位置发生偏移 */position: relative;/* 方位 */top: 100px;left: 100px;right: 20px;width: 300px;height: 300px;background-color: pink;}/style /head bodydiv111111111/div 六、绝对定位 style.father {/* margin-top: 200px; */width: 400px;height: 400px;background-color: aqua;}.grandfather {position: relative;width: 800px;height: 800px;background-color: greenyellow;}.son {/* 子绝父相 不再保留原来的位置*/position: absolute;bottom: 20px;left: 100px;width: 100px;height: 100px;background-color: blue;}.son1 {width: 300px;height: 300px;background-color: red;}/style /head bodydiv classgrandfatherdiv classfatherdiv classson/divdiv classson1/div 七、固定定位 body {height: 2000px;background-color: rgb(223, 13, 48);}div {/* 固定定位相对于浏览器可视窗口进行定位不会随着页面的滚动而滚动 */position: fixed;/* right: 40px; */right: 50%;/* bottom: 20px; */bottom: 50%;width: 50px;height: 200px;background-color: pink;}/style /head bodydiv/divp23333333333/p 八、Index .father {position: relative;width: 800px;height: 800px;background-color: pink;}.son2 {width: 300px;height: 300px;}.son1 {position: absolute;top: 30px;left: 50px;background-color: aqua;/* 默认情况下z-index是0数值越大越优先显示 *//* z-index: 1; */}.son2 {position: absolute;top: 60px;left: 70px;background-color: blueviolet;/* z-index: -1; */}/style /head bodydiv classfatherdiv classson1/divdiv classson2/div 九、粘性定位 p {background-color: aquamarine;position: sticky;top: 20px;}/style /head bodyLorem ipsum dolorpveniam perferendis deserunt distinctio eum, asperiores fugit delectus/pQuaerat itaque, 十、内边距 div {width: 200px;height: 200px;background-color: aqua;/* padding给一个值默认上下左右内边距全部为10px *//* padding: 10px; *//* padding-top: 20px;padding-left: 20px;/* padding-bottom: 40px; *//* padding-right: 40px; *//* 两个值上下 左右 *//* padding: 10px 30px; *//* 三个值上、左右、下 */padding: 10px 20px 30px;/* 四个值 上 右 下 左 */padding: 10px 20px 30px 40px;}/style /head bodydivLorem ipsum dolor sit amet consectetur adipisicing /div 十一、外边距 div {display: inline-block;width: 100px;height: 100px;background-color: pink;/* margin-bottom: 20px;margin-left: 20px;margin-right: 40px;margin-top: 40px; *//* 上下左右 */margin: 10px;/* 上下 左右 */margin: 20px 40px;/* 上 左右 下 */margin: 10px 20px 30px;/* 上 右 下 左 */margin: 10px 20px 30px 40px;}/style /head bodydiv1111/divdiv2222/divdiv3333/divdiv4444/div 十二、边框 div {width: 300px;height: 300px;background-color: pink;/* border: 10px solid black; */border-top: 3px solid red;border-bottom: 3px solid rgb(25, 8, 8);}/style /head bodydiv/div 十三、盒子尺寸计算问题 div {width: 300px;height: 300px;background-color: pink;padding-left: 20px;box-sizing: border-box;border: 3px solid red;}/style /head bodydiv111111111111/div 十四、清楚默认样式 * {padding: 0;margin: 0;box-sizing: border-box;}/style /head body1111ullixiaoli/li 十五、内容溢出 div {width: 400px;height: 405px;background-color: pink;overflow: hidden;}/style /head bodydivLorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit.Lorem ipsum dolor sit amet consectetur adipisicing elit./div 十六、外边距的尺寸与坍塌 .father {width: 600px;height: 600px;background-color: aqua;border-top: 1px solid pink;/* overflow: hidden; */}.son1 {width: 100px;height: 100px;background-color: pink;}.box2 {margin-top: 20px;margin-bottom: 20px;}.box1 {margin-bottom: 40px;margin-top: 40px;}/style /head bodydiv classfatherdiv classson1 box1111/divdiv classson1 box2222/divdiv classson1 box3333/div 十七、行内元素的内外边距 span {background-color: aqua;/* 对于行内元素垂直方向的内外边距是无效的 */margin: 30px 60px;}/style /head bodyspan1111111/spanspan222222222/span 十八、块级元素水平居中 div {width: 1200px;height: 60px;background-color: aqua;margin: 0 auto;}/style /head bodydiv/div 十九、边框弧度 div {width: 300px;height: 50px;background-color: aqua;/* border-radius: 20px; *//* 左上 右上左下 右下 *//* border-radius: 10px 20px 30px 40px; *//* 胶囊形状盒子高度的一半 */border-radius: 25px;border-top-right-radius: 70px;}/style /head bodydiv/div 二十、盒子阴影 div {width: 100px;height: 100px;background-color: pink;/* x轴的偏移量 y轴的偏移量必须写 *//* x轴的偏移量 y轴的偏移量 模糊的半径 扩散的半径 颜色 */box-shadow: 5px 2px 10px 10px black inset;}/style /head bodydiv/div 二一、文字阴影 p {text-shadow: 5px 5px 3px pink;}/style /head bodyp233333333 二二、Resize textarea {width: 500px;height: 60px;resize: none;}/style /head bodytextarea name id cols30 rows10/textarea 二三、浮动 .box1 {width: 200px;height: 200px;background-color: aqua;float: left;}/* 顶部是对齐的脱离标准流*/.out {width: 800px;height: 400px;background-color: brown;}.box2 {width: 300px;height: 300px;background-color: pink;float: right;}/style /head bodydiv classoutdiv classbox11111111/divdiv classbox22222/div 二四、浮动的问题 .father {width: 700px;/* 1.给父盒子高度 *//* height: 400px; *//* float: left; */background-color: aqua;}.left {width: 300px;height: 300px;background-color: blue;float: left;}/* p {/* 清除浮动的影响 *//* clear: both; *//* } *//* p::before {display: block;content: ;clear: both;} */.father::after {content: ;display: block;clear: both;}/style /head bodydiv classfatherdiv classleft/div/divp233333333333333333333/p 二五、Flex布局 * {padding: 0;margin: 0;}ul {/* 此时ul就会变成一个弹性容器 li就是弹性盒子 。子项会默认在一行排列主轴默认在水平方向测轴默认在垂直方向子元素可以自动挤压和延伸*/display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;}li {list-style: none;width: 100px;height: 200px;background-color: aquamarine;}/style /head bodyulli111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/li 二六、主轴的对齐方式 * {margin: 0;padding: 0;}ul {display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;/*改变主轴对齐方式 */justify-content: flex-end;/* 两边贴边其余平分 */justify-content: space-between;justify-content: space-around;justify-content: space-evenly;justify-content: center;}li {list-style: none;width: 100px;height: 200px;background-color: aquamarine;}/style /head bodyulli111/lili222/lili333/lili333/li 二七、侧轴的对齐方式 * {margin: 0;padding: 0;}ul {display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;/* 测轴 */align-items: center;align-items: end;align-items: start;}ul li:nth-child(3) {align-self: center;}li {list-style: none;width: 100px;height: 200px;background-color: aquamarine;}/style /head bodyulli111/lili222/lili333/lili333/li 二八、修改主轴方向 * {margin: 0;padding: 0;}ul {display: flex;width: 600px;height: 300px;background-color: aqua;margin: 0 auto;/* 主轴方向改为垂直方向从上到下 */flex-direction: column;flex-direction: row-reverse;flex-direction: column-reverse;}li {list-style: none;width: 100px;height: 200px;background-color: aquamarine;}/style /head bodyulli111/lili222/lili333/lili333/li二九、弹性伸缩比 * {margin: 0;padding: 0;}ul {display: flex;width: 700px;height: 400px;background-color: rgb(51, 59, 59);}li {list-style: none;height: 40px;background-color: aqua;}ul li:first-child {flex: 1;/* 整数占用父级剩余尺寸的分数 */}ul li:nth-child(2) {flex: 1;}ul li:last-child {flex: 1;}/style /head bodyulli111/lili2/lili3/li 三十、换行 * {margin: 0;padding: 0;}ul {display: flex;width: 800px;height: 400px;background-color: aqua;flex-wrap: wrap;justify-content: space-between;align-content: space-evenly;}li {list-style: none;width: 170px;height: 100px;background-color: pink;}/style /head bodyulli111/lili111/lili111/lili111/lili111/lili111/lili111/lili111/li 三一、Grid .box {display: grid;width: 500px;height: 900px;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: repeat(4, 100px);/* 单元格之间的间距 */grid-gap: 20px;}.box div {border: 1px solid pink;}.test {grid-column-start: 1;grid-column-end: 3;/* grid-row-start: 2;grid-row-end: 4; */grid-row: 2/5;}/style /head bodydiv classboxdiv1/divdiv2/divdiv3/divdiv classtest4/divdiv5/divdiv6/divdiv7/divdiv8/div 三二、透明度 div {width: 300px;height: 300px;background-color: black;/* 0-1 越靠近0越透明 */opacity: 0.5;}/style /head bodydiv/div233333333333333 三三、元素的显示与隐藏 div {/* opacity 在页面中仍然保留位置 *//* opacity: 0; *//* display: none;在页面中不再占有位置 *//* display: none;display: inline-block; *//* visibility: hidden; 在页面中仍然占有位置 */visibility: hidden;visibility: visible;width: 300px;height: 300px;background-color: pink;}/style /head bodydiv/div 三四、光标的样式 a {cursor: text;cursor: pointer;}p {cursor: pointer;cursor: move;cursor: default;cursor: copy;}/style /head bodya href#Hello Word/ap点我/p 三五、轮廓样式 input {outline-width: 100px;outline-color: pink;outline-style: solids;outline: 10px solid red;/* outline: none; */}/* 标签获取焦点的状态 */input:focus {outline: 1px solid blue;}/style /head bodyform action#input typetext name id 三六、过渡 div {/* transition: 过渡的属性 花费的时间; *//* transition: width 2s, height 3s, background-color 4s; *//* 给元素本身进行设置 */transition: all 2s;width: 100px;height: 100px;background-color: pink;}div:hover {width: 1200px;height: 50px;background-color: green;}/style /head bodydiv/div 三七、字体 font-face {font-family: myFont;src: url(./1635742999642155.otf);}p {font-family: myFont;font-size: 30px;}/style /head bodypHello Word/p 三八、平移 div {width: 300px;height: 300px;}.father {position: relative;border: 1px solid black;margin: 100px auto;}.son {transition: all 2s;position: absolute;top: 0;left: 0;background-color: pink;/* 百分比参照的是盒子自身的尺寸正数---x方向正数负数都可以*//* transform: translateX(-100px);transform: translateY(100px); *//* transform: translate(x轴的移动,y轴的移动); *//* transform: translate(200px, 400px); */}.father:hover .son {transform: translateX(200px) translateY(400px);}/style /head bodydiv classfatherdiv classson/div 三九、旋转 div {width: 300px;height: 300px;}.father {margin: 100px auto;position: relative;border: 1px solid black;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}.father:hover .son {/* 旋转的单位是deg度 */transform: rotateZ(360deg);/* transform: rotateX(-45deg); *//* transform: rotateY(45deg); */transform: rotateX(-70deg) rotateY(40deg);}/style /head bodydiv classfatherdiv classson/div 四十、改变原点 div {width: 300px;height: 300px;}.father {margin: 100px auto;position: relative;border: 1px solid black;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}.father:hover .son {transform: rotateZ(45deg);/* *//* transform-origin: 水平方向原点的位置 垂直方向远点的位置;*//* 方向名词*/transform-origin: bottom right;transform-origin: 100px 300px;transform-origin: bottom;}/style /head bodydiv classfatherdiv classson/div 四一、多重转换 div {width: 300px;height: 300px;}.father {position: relative;border: 1px solid black;margin: 100px auto;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}/* x 100px y 100px 45deg *//* 先平移再旋转 */.father:hover .son {transform: translate(100px, 100px) rotateX(45deg);}/style /head bodydiv classfatherdiv classson/div 四二、缩放 div {width: 300px;height: 300px;}.father {position: relative;border: 1px solid black;margin: 100px auto;overflow: hidden;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}.father:hover .son {/* transform: scale(x轴的缩放倍数 y轴的缩放倍数); */transform: scale(1.5, 2);/* 大于1表示放大的倍数小于1表示缩小 */transform: scale(0.5);}/style /head bodydiv classfatherdiv classson111/div 四三、倾斜 div {width: 300px;height: 300px;}.father {margin: 100px auto;position: relative;border: 1px solid black;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}.father:hover .son {transform: skewX(45deg);transform: skewY(45deg);transform: skew(45deg, 45deg);}/style /head bodydiv classfatherdiv classson/div 四四、空间转换 div {width: 300px;height: 300px;}.father {position: relative;border: 1px solid black;margin: 100px auto;/* 视距 父元素添加*/perspective: 1000px;/* 父元素添加 */transform-style: preserve-3d;}.son {position: absolute;top: 0;left: 0;transition: all 2s;background-color: pink;}.father:hover .son {transform: translateZ(100px);transform: translate3d(100px, 100px, 200px);transform: scale3d(1.2, 1.3, 1.5);}/style /head bodydiv classfatherdiv classson111/div 四五、动画 /* 定义动画 */keyframes myMove {from {width: 0;height: 0;background-color: aliceblue;}to {width: 200px;height: 300px;background-color: pink;}}keyframes myMove2 {0% {width: 0;height: 0;background-color: aliceblue;}25% {width: 100px;height: 100px;background-color: red;}50% {width: 300px;height: 300px;background-color: green;}80% {width: 800px;height: 30px;background-color: pink;}100% {width: 100px;height: 100px;background-color: yellow;}}keyframes zhuan {from {transform: translate(0px);}to {transform: translateX(100px) rotate(45deg) scale(2);}}div {/* animation 复合属性 动画名称 动画花费时间 *//* animation: myMove2 3s; *//* animation-name: myMove2;animation-duration: 3s; *//* 动画延迟 *//* animation-delay: 3s; *//* 执行完毕时的状态 默认是backwards*//* animation-fill-mode: forwards; *//* 速度曲线 *//* animation-timing-function: steps(40); *//*重复次数 infinite无限循环*//* animation-iteration-count: infinite; */animation: myMove 3s, zhuan 2s;}/* div:hover {暂停动画animation-play-state: paused;} *//style /head bodydiv/div 四六、相邻边框合并 table {width: 200px;height: 60px;border: 2px solid pink;/* 合并相邻的边框 */border-collapse: collapse;/* border-collapse: separate; */}td {border: 5px solid black;}/style /head bodytable cellspacing0trtd111/tdtd222/td 四七、字体图标引入方式1 font-face {font-family: iconfont;src: url(../download/font_4353511_ww6fyqvhvs8/iconfont.woff2) format(woff2),url(../download/font_4353511_ww6fyqvhvs8/iconfont.woff) format(woff),url(../download/font_4353511_ww6fyqvhvs8/iconfont.ttf) format(truetype);}.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 130px;color: aquamarine;}/style /head bodydiv classiconfont#xe752;/divdiv classiconfont#xe639;/div 四八、字体图标引入方式2 font-face {font-family: iconfont; /* Project id 4353511 */src: url(iconfont.woff2?t1711763893587) format(woff2),url(iconfont.woff?t1711763893587) format(woff),url(iconfont.ttf?t1711763893587) format(truetype); } .iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; } .icon-sousuo1:before {content: \e752; } .icon-hanbao:before {content: \e639; } .icon-xiaoxiangji:before {content: \e64f; } link relstylesheet href../download/font_4353511_ww6fyqvhvs8/iconfont.css /head bodyspan classiconfont icon-xiaoxiangji/span 四九、Iconfont window._iconfont_svg_string_4353511svgsymbol idicon-sousuo1 viewBox0 0 1024 1024path dM953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973 95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809 0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119 415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607 23.221905-26.318159 15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768 20.813707-94.951789 31.478582-145.695952 31.478582-194.031917 0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087 351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0 91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709 0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099 1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214 10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146 941.433227 965.515202 921.135562 953.474215 908.234504z fill#575B66 /path/symbolsymbol idicon-hanbao viewBox0 0 1024 1024path dM128 449.536l769.024 0 0 130.048-23.552 0q-20.48 0-26.624-10.752t-10.24-24.064-12.8-24.576-33.28-13.312q-24.576-1.024-44.544 8.704t-38.4 22.016-36.352 23.04-38.4 10.752-30.72-9.216-18.944-19.968-19.968-19.968-32.768-9.216-43.008 7.168-41.984 15.872-40.96 15.872-39.936 7.168q-20.48 0-34.816-5.12t-29.184-11.776-31.744-12.8-42.496-8.192q-28.672-2.048-54.272 7.68t-44.032 22.016l0-101.376zM128 770.048l769.024 0 0 128-769.024 0 0-128zM783.36 579.584q17.408-1.024 26.624 7.168t17.92 19.456 18.944 20.48 28.672 9.216l21.504 0 0 69.632-769.024 0 0-79.872q13.312-12.288 37.376-26.112t54.784-13.824q22.528 0 35.84 7.168t25.6 15.872 28.16 15.872 44.544 7.168 51.712-6.656 43.008-15.36 36.864-15.36 32.256-6.656q24.576 0 33.792 8.192t16.896 17.408 18.944 17.408 38.912 8.192 49.152-8.704 39.424-19.456 34.304-19.968 33.792-11.264zM897.024 385.024l-769.024 0 0-64.512q8.192-43.008 41.984-78.848t86.016-61.952 118.272-40.448 138.752-14.336q73.728 0 139.776 14.336t117.248 40.448 84.992 61.952 41.984 78.848l0 64.512zM347.136 256q13.312 0 22.528-9.216t9.216-22.528-9.216-22.528-22.528-9.216-22.528 9.216-9.216 22.528 9.216 22.528 22.528 9.216zM538.624 192.512q14.336 0 23.04-9.216t8.704-22.528-8.704-22.528-23.04-9.216q-13.312 0-22.016 9.216t-8.704 22.528 8.704 22.528 22.016 9.216zM667.648 256q13.312 0 22.528-9.216t9.216-22.528-9.216-22.528-22.528-9.216-22.528 9.216-9.216 22.528 9.216 22.528 22.528 9.216z fill#272636 /path/symbolsymbol idicon-xiaoxiangji viewBox0 0 1208 1024path dM1056.493579 220.12549c-81.849172-3.975015-120.876592-39.208102-144.546-113.287928-25.837597-81.307125-65.949112-105.51858-152.134664-106.060627-103.892437-0.903412-207.784875 1.264777-311.677313-0.72273-74.983237-1.44546-129.549352 28.9092-149.785792 100.640152-22.765995 80.765077-67.21389 115.817482-153.399443 120.153863-105.879945 5.420475-144.726682 57.276352-144.907365 165.143805-0.180682 160.265377 0.180682 320.711437 1.626143 480.976814 1.084095 112.74588 44.267212 156.10968 155.748315 156.651728 149.063062 0.72273 298.126125 0.180682 447.189187 0.180682 146.71419 0 293.609062 0.361365 440.323252-0.180682 119.792497-0.361365 161.530155-42.460387 162.252885-163.879028 1.264777-155.928997 1.626142-311.677312 1.626143-467.425627 0.180682-114.91407-39.388785-166.769947-152.315348-172.190422z m-251.510039-84.378728c19.333027 0 34.871722 15.538695 34.871722 34.871723 0 19.333027-15.538695 35.052405-34.871722 35.052405s-35.052405-15.719377-35.052405-35.052405c0-19.333027 15.719377-34.871722 35.052405-34.871723z m-200.557575 681.53439c-139.125525 0-251.871405-112.74588-251.871405-251.871405s112.74588-251.871405 251.871405-251.871405c139.125525 0 251.871405 112.74588 251.871405 251.871405s-112.74588 251.871405-251.871405 251.871405z /path/symbol/svg,function(n){var t(tdocument.getElementsByTagName(script))[t.length-1],et.getAttribute(data-injectcss),tt.getAttribute(data-disable-injectsvg);if(!t){var o,i,c,s,l,dfunction(t,e){e.parentNode.insertBefore(t,e)};if(e!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__!0;try{document.write(style.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}/style)}catch(t){consoleconsole.log(t)}}ofunction(){var t,edocument.createElement(div);e.innerHTMLn._iconfont_svg_string_4353511,(ee.getElementsByTagName(svg)[0])(e.setAttribute(aria-hidden,true),e.style.positionabsolute,e.style.width0,e.style.height0,e.style.overflowhidden,ee,(tdocument.body).firstChild?d(e,t.firstChild):t.appendChild(e))},document.addEventListener?~[complete,loaded,interactive].indexOf(document.readyState)?setTimeout(o,0):(ifunction(){document.removeEventListener(DOMContentLoaded,i,!1),o()},document.addEventListener(DOMContentLoaded,i,!1)):document.attachEvent(co,sn.document,l!1,r(),s.onreadystatechangefunction(){completes.readyState(s.onreadystatechangenull,a())})}function a(){l||(l!0,c())}function r(){try{s.documentElement.doScroll(left)}catch(t){return void setTimeout(r,50)}a()}}(window); .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}/stylescript src../download/font_4353511_ww6fyqvhvs8/iconfont.js/script /head bodysvg classicon aria-hiddentrueuse xlink:href#icon-hanbao/use 五十、解决图片底部空白 img {border-radius: 50%;}div img {vertical-align: middle;/* vertical-align: top;vertical-align: bottom; */}/style /head bodydivimg srchttps://t7.baidu.com/it/u993577982,1027868784fm193fGIF alt width40px height40px欢迎登录思密达~ 五一、JS当中的结束符 script// 表示语句的结束alert(444); alert(333);/script 五二、输入输出语法 script// 输入// prompt(提示语)// 输出语法// 向body中输出内容,能够识别标签解析成为网页元素document.write(h1要输出的内容/h1)// 警示语法----弹出警告框alert(要输入的内容)// 控制台输出程序员进行调试时使用的console.log(控制台打印) 五三、变量 scriptlet passwdpasswd 123456console.log(passwd)// prompt(请输入您的密码)// 变量的初始化let uname zhangsanpasswd lisiconsole.log(passwd)// let uname let age1 21, age2 22console.log(age1, age2) 五四、LetVar区别 scriptvar num1 zhangsanconsole.log(num1)var num1 22console.log(num1) 五五、数据类型 script// 数字类型let num1 3 //整型let num2 3.14 //浮点let num3 -3.14 //负数// 字符串类型 let str1 zhang\nsanlet str2 zhangsanlet str3 i\am zhangsanlet str4 zhangsan// document.write(你是 zhangsan)// document.write(该用户的账户名是 str2 密码是 str1 家庭住址是 str3)document.write(用户的用户名是${str1},密码是${str2},家庭住址是${str3})let ageconsole.log(age)console.log(num1)console.log(str1)let arr1 null 五六、隐式转换 console.log(typeof Number(1122))console.log(Number(1122px))console.log(parseInt(11223.141pxcdcdcdc))console.log(parseFloat(1122.333pxcdcdcdc))console.log(typeof String(true))let num1 111111 五七、求和 let num1 prompt(请输入一个数字)let num2 prompt(请输入一个数字)document.write(num1 num2) 五八、剩余参数 function test(a, b, ...arr) {console.log(a b)console.log(arguments)return 1}let a test(1, 2, 3, 4)console.log(a)/script 五九、Var-展开运算符 let arr1 [1, 2, 3]// let a arr1[0]// let b arr1[1]// let c arr1[2]// 展开运算符 ... console.log(...arr1)console.log(Math.max(...arr1)) 六十、对象 scriptlet obj1 {uname: zhangsan,age: 21,sing: function () {console.log(sing~~~)}}console.log(obj1.uname)console.log(obj1[age])for (let i in obj1) {console.log(obj1[i])} 六一、垃圾回收机制 bodyscript//内存中的生命周期// 1、内存分配// 2、内存使用// 3、内存回收使用完毕之后垃圾回收器完成// 内存泄漏该回收的由于某些未知因素未释放叫做内存泄漏// 栈// 堆// js:引用计数法 标记清除法// 引用计数法 如果一个对象已经没有指向他的引用了那么就认为不在需要// 内存消耗、循环引用的内存无法被释放// 1、记录引用次数// 2、 --// 3、引用次数为0时释放内存// let arr [1, 2, 3, 4]let obj1 {uname: zhanggsan}let a obj1a null// 标记清除 从根部查找内存中的对象凡是能找到的都是我要进行使用的let obj2 {a: obj3}let obj3 {b: obj2}obj2 null 六二、闭包 script// 内层函数外层函数的变量 。内层函数使用了外层函数的变量// function outer() {// let i 10// function inner() {// console.log(i)// }// return inner// }// let a outer()// a()// a()// 闭包外部访问函数内部的变量// let num 0// function test1() {// num// console.log(这是函数调用的第${num}次)// }// test1()// test1()// num 300// test1()function outer() {let num 0function inner() {numconsole.log(这是函数调用的第${num}次)}return inner}let a outer()a()a()a()num 21a() 六三、Math scriptconsole.log(Math.E)console.log(Math.PI)let a 4.999let b 3.11// 向下进行取整console.log(Math.floor(a))// 向上取整console.log(Math.ceil(b))console.log(Math.abs(-111))// 最大值最小值console.log(Math.max(1, 21, 32, 12, 21))console.log(Math.min(1, 21, 32, 12, 21))// 随机数 只能取[0,1)console.log(Math.floor(Math.random() * ((20 - 10) 1)) 10)// // function get_random(n, m) {// return Math.floor(Math.random() * ((m - n) 1)) n// }// console.log(get_random(100, 200))// 四舍五入console.log(Math.round(3.51))// 开平方根console.log(Math.sqrt(9))// 幂次方console.log(Math.pow(2, 3)) 六四、Date script// 实例化时间对象let date new Date(2024-05-01 00:00:00)console.log(date)// 年let year date.getFullYear()console.log(year)// 月 0-11let m date.getMonth() 1console.log(m)// 日let day date.getDate()console.log(day)// 时分秒let hh date.getHours()let mm date.getMinutes()let ss date.getSeconds()console.log(hh)console.log(mm)console.log(ss)// 星期let w date.getDay()console.log(w)// 获取毫秒数// let mins date.getMilliseconds()// console.log(mins)// 时间戳 此刻距离19700101 00:00:00 的毫秒数let timechuo date.getTime()console.log(timechuo)function get_time() {let date new Date()let year date.getFullYear()let m date.getMonth() 1let day date.getDate()let hh date.getHours()let mm date.getMinutes() 10 ? 0 date.getMinutes() : date.getMinutes()let ss date.getSeconds()let w date.getDay()return ${year}-${m}-${day} ${hh}:${mm}:${ss} 今天星期${w}}let a get_time()console.log(a) 六五、获取元素对象 div classbox1盒子/divulli1111/lili2222/lili3333/lili idli44444/li/ulscript// 1、通过css选择器获取// document.querySelector(css选择器)let div1 document.querySelector(.box1)console.dir(div1)// document.querySelectorAll(ul li) 拿到的是伪数组直接考虑for循环let lis document.querySelectorAll(ul li)console.log(lis)for (let i in lis) {console.log(lis[i])}// 其他console.log(document.getElementById(li4)) 六六、元素内容 diva href#点我/ap你好/p/divscript// 1、获取元素对象const box1 document.querySelector(div)// console.log(box1)// innerText 不识别标签// console.log(box1.innerText)console.log(box1.innerHTML)box1.innerHTML h1你好/h1box1.textContent h15555/h1let arr [张三, 李四, 赵五] 六七、改属性 form actioninput typetext name id/formscriptconst ipt document.querySelector(input)// 对象.属性 值ipt.type password 六八、改Style样式 .box1 {width: 300px;height: 300px;background-color: aqua;border: 1px solid rgb(187, 14, 43);border-radius: 30px;}/* */.box_style {background-color: rgb(11, 179, 78);border: 10px solid rgba(12, 29, 126, 0.027);border-radius: 50%;}/style /head bodydiv classbox1/divscript// 1、获取元素const box document.querySelector(div)// 更改style样式// 1、对象.style.样式 // box.style.width 100px// box.style.height 100px// 碰见带-的符合属性采用小驼峰的方式规避使用-// box.style.backgroundColor pink// className 不保留原来的类名// box.className box_style// classList// box.classList.add()追加新的类名到元素对象上box.classList.add(box_style)// box.classList.remove(box1) 移除元素对象的类名// box.classList.remove(box1)//如果类名存在则移除如果不存在则添加box.classList.toggle(box1) 六九、补充 bodyform actioninput typecheckbox checked namesex valuenan 男input typecheckbox namesex valuenv女script// 像是checked这样的属性名属性值的属性js再进行赋值时通过true/false去控制属性值document.querySelector(input[valuenv]).checked trueconsole.log(document.querySelector(input[valuenv]).checked) 七十、查找节点 bodydiv classfatherfatherdiv classsonson/div/divdiv classbrotherbrother/divscriptconsole.log(document.querySelector(.son).parentNode)console.log(document.querySelector(.father).children)console.log(document.querySelector(.father).childNodes)// 查找兄弟jiedianconsole.log(document.querySelector(.father).nextElementSibling)console.log(document.querySelector(.father).previousElementSibling)// console.log(document.querySelector(.father).nextSibling) 七一、事件监听 bodybutton点击/buttondiv/divscript// 事件:事件源 事件类型 处理函数// l0 on事件类型const button document.querySelector(button)const box document.querySelector(div)// 事件源.on事件类型function(){} // 同一个事件源后面注册的事件会对前面注册的事件进行覆盖// button.onclick function () {// box.style.display none// }// button.onclick null// button.onclick function () {// console.log(666)// }function text() {alert(666)box.style.display none}// l1 事件监听 不会覆盖button.addEventListener(click, text, true)button.removeEventListener(click, text, true) 七二、Index * {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer;border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;display: none;width: 1000px;height: 480px;}.products .main:nth-child(1) {background-color: pink;}.products .main:nth-child(2) {background-color: rgb(236, 5, 44);}.products .main:nth-child(3) {background-color: rgb(59, 13, 228);}.products .main:nth-child(4) {background-color: rgb(49, 216, 7);}.products .main.active {display: block;}.tab li.active {border-color: red;border-bottom: 0;}/style /head bodydiv classwrapperul classtabli classtab-item active国际大牌span◆/span/lili classtab-item国妆名牌span◆/span/lili classtab-item清洁用品span◆/span/lili classtab-item男士精品/li/uldiv classproductsdiv classmain active/divdiv classmain/divdiv classmain/divdiv classmain/div/div/divscript// 获取元素对象let lis document.querySelectorAll(.tab .tab-item)let divs document.querySelectorAll(.products .main)// console.log(divs)// console.log(lis)for (let i 0; i lis.length; i) {// li添加事件监听lis[i].addEventListener(click, function () {// console.log(111)document.querySelector(.tab .active).classList.remove(active)lis[i].classList.add(active)document.querySelector(.products .active).classList.remove(active)divs[i].classList.add(active)})}/script