Blog Titlehttps://vingnirwu.github.io/tech-shrimp.github.ioBlog descriptionBlog Titlehttp://www.rssboard.org/rss-specificationpython-feedgenhttps://github.githubassets.com/favicons/favicon.svgavatarhttps://vingnirwu.github.io/tech-shrimp.github.ioSun, 05 Apr 2026 12:14:16 +0000Blog Title60Blog Title多列布局文件https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-lie-bu-ju-wen-jian.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 多列布局 */ .box { /* 写法： */ /* 分成4列 */ column-count: 4; /* 每一列之间的间距 */ column-gap: 20px; /* 在列中加一条线 */ column-rule: 1px solid #000; max-width: 1200px; margin: 30px auto; border: 1px solid #000; } .box .item { /* 强制不切割换行 */ break-inside: avoid-column; background-color: pink; height: 160px; width: 160px; margin-bottom: 20px; } .box .item:nth-child(2n+3) { height: 200px; } </style> </head> <body> <div class='box'> <div class='item'>1</div> <div class='item'>2</div> <div class='item'>3</div> <div class='item'>4</div> <div class='item'>5</div> <div class='item'>6</div> <div class='item'>7</div> <div class='item'>8</div> <div class='item'>9</div> <div class='item'>10</div> <div class='item'>11</div> <div class='item'>12</div> <div class='item'>13</div> </div> </body> </html> ``` 下载链接： [多列布局.html](https://github.com/user-attachments/files/26488157/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-lie-bu-ju-wen-jian.htmlSun, 05 Apr 2026 12:13:51 +0000多列布局https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-lie-bu-ju.html# 多列布局 <img width='1483' height='625' alt='Image' src='https://github.com/user-attachments/assets/33ce2589-e768-44b7-b387-8372a3ff0d91' /> <img width='1388' height='226' alt='Image' src='https://github.com/user-attachments/assets/247466a8-e4f3-405a-a7d1-ed0d845ac624' /> ### 强制不切割 <img width='1302' height='557' alt='Image' src='https://github.com/user-attachments/assets/dc4b6be1-6ccf-4115-a56e-52eccf57f1b2' /> ### 加线 <img width='505' height='300' alt='Image' src='https://github.com/user-attachments/assets/ea2d35f6-f93e-4c36-8886-37c551ab30e1' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-lie-bu-ju.htmlSun, 05 Apr 2026 08:39:22 +0000网格布局文件https://vingnirwu.github.io/tech-shrimp.github.io/post/wang-ge-bu-ju-wen-jian.html```'http' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 网格布局 */ /* 创建网格 */ .box { /* 网格布局 */ display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: 100px 100px 100px; width: 320px; height: 320px; border: 1px solid #9d2626; margin: 20px; } .box div { background-color: pink; border: 1px solid #000000; } /* 对齐方式 */ .box1 { /* 对齐方式 */ /* 1. flex-start：左对齐 ABC---- 2. flex-end：右对齐 ----ABC 3. center：居中对齐 --ABC-- 4. space-between：项目之间等间距对齐 A--B--C--D 5. space-around：项目之间等间距对齐，项目与边框距离相等 -A--B--C- 6. space-evenly：项目等间距对齐，项目与边框距离相等 --A--B--C--*/ justify-content: space-between; align-content: center; } /* 如果想做延申的盒子 */ /* 1.不要设置行轨道数量 */ /* 2.给子盒子设置高度 */ .content { display: grid; grid-template-columns: repeat(5, 160px); width: 1000px; margin: 0 auto; border: 1px solid #9d2626; justify-content: space-between; } .content div { height: 100px; background-color: pink; margin-bottom: 20px; } /* fr单位 */ .box2 { /* fr网格布局 */ /* 1fr表示占一份 */ display: grid; /* repeat写法 */ /* repeat(3, 1fr); */ grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; width: 320px; height: 320px; border: 1px solid #9d2626; margin: 20px; } .box2 div { background-color: pink; border: 1px solid #000000; border-radius: 10px; } /* gap函数 */ .box2 { /* gap函数 */ /* gap: 20px; 上下左右间距为20px */ /* gap: 20px 40px; 上下间距为20px，左右间距为40px */ gap: 20px; } /* 响应式写法 */ .box3 { display: grid; /* 响应式写法 */ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 属性：auto-fit，自动适应，如果内容不足网格大小会填满整行； auto-fill，不会自动填充，根据内容自适应列数 */ width: 80%; margin: 20px auto; border: 1px solid #9d2626; height: 300px; } .box3 div { background-color: pink; height: 120px; } /* 网格线 */ /* 语法1：grid-columns: 1/3; */ /* 语法2：grid-columns: 1/span 2; */ .box4 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; border: 1px solid #9d2626; } .box4 div { background-color: pink; height: 120px; } .box4 .item:first-child { /* 第一个项目占满两列两行 */ grid-column: 1/3; grid-row: 1/span 2; /* 注意：原本盒子有高度，无法填满 第一个项目需要设置自适应高度 */ height: auto; } /* 网格填充方式 */ .box5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 500px; border: 1px solid #9d2626; grid-auto-flow: column; } .box5 div { background-color: pink; height: 120px; } .box5 div:first-child { grid-row: 1/span 2; height: auto; } .box5 div:nth-child(3) { grid-row: 2/3; grid-column: 2/span 2; } /* object-fit */ .box6 div img { /* 属性：object-fit */ /* 1. cover：图片等比例缩放，填充父盒子，可能会被裁剪 */ /* 2. contain：图片保持长宽比等比例缩放，不会被裁剪，可能会有空白区域 */ /* 3. fill：默认值，图片拉伸，不保持长宽比，会形变 */ object-fit: cover; /* 属性：object-position */ /* 用于配合object-fit属性使用 */ /* 1. center：居中对齐 */ /* 2. top：顶部对齐 */ /* 3. bottom：底部对齐 */ /* 4. left：左侧对齐 */ /* 5. right：右侧对齐 */ object-position: top left; width: 100%; height: 100%; } .box6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 60%; border: 1px solid #9d2626; grid-auto-flow: column; } .box6 div { background-color: pink; height: 120px; } .box6 div:first-child { grid-row: 1/span 2; height: auto; } .box6 div:nth-child(3) { grid-row: 2/3; grid-column: 2/span 2; } /* 项目对齐方式 */ /* 控制单元格里的子元素对齐 */ /* justify-items: stretch; align-items-items: stretch; 默认值，拉伸填满整个网格单元格 */ /* 属性： */ /* 1. center：居中对齐 */ /* 2. start：左侧对齐 */ /* 3. end：右侧对齐 */ /* 4. stretch：默认值，拉伸 */ .box7 { /* 项目对齐方式 */ justify-items: center; align-items: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 350px; height: 350px; border: 1px solid #9d2626; margin: 20px; } .box7 div { background-color: pink; height: 60px; width: 60px; } </style> </head> <body> <div class='box box1'> <div class='item1'>1</div> <div class='item2'>2</div> <div class='item3'>3</div> <div class='item4'>4</div> <div class='item5'>5</div> <div class='item6'>6</div> <div class='item7'>7</div> <div class='item8'>8</div> <div class='item9'>9</div> </div> <br> <div class='content'> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> </div> <br> <div class='box2'> <div class='item1'>1</div> <div class='item2'>2</div> <div class='item3'>3</div> <div class='item4'>4</div> <div class='item5'>5</div> <div class='item6'>6</div> <div class='item7'>7</div> <div class='item8'>8</div> <div class='item9'>9</div> </div> <br> <div class='box3'> <div class='item1'>1</div> <div class='item2'>2</div> <div class='item3'>3</div> <div class='item4'>4</div> <div class='item5'>5</div> <div class='item6'>6</div> <div class='item7'>7</div> <div class='item8'>8</div> <div class='item9'>9</div> </div> <br> <div class='box4'> <div class='item'>1</div> <div class='item'>2</div> <div class='item'>3</div> <div class='item'>4</div> <div class='item'>5</div> <div class='item'>6</div> <div class='item'>7</div> <div class='item'>8</div> <div class='item'>9</div> <div class='item'>10</div> <div class='item'>11</div> <div class='item'>12</div> </div> <br> <div class='box5'> <div class='item'>1</div> <div class='item'>2</div> <div class='item'>3</div> <div class='item'>4</div> </div> <br> <div class='box6'> <div class='item'><img src='./上箭头.jpg' alt=''></div> <div class='item'><img src='./背景.png' alt=''></div> <div class='item'><img src='./下箭头.jpg' alt=''></div> <div class='item'><img src='./背景.png' alt=''></div> </div> <br> <div class='box7'> <div class='item'>1</div> <div class='item'>2</div> <div class='item'>3</div> <div class='item'>4</div> <div class='item'>5</div> <div class='item'>6</div> <div class='item'>7</div> <div class='item'>8</div> <div class='item'>9</div> </div> </body> </html> ``` 下载链接： [网格布局.html](https://github.com/user-attachments/files/26486964/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/wang-ge-bu-ju-wen-jian.htmlSun, 05 Apr 2026 08:05:20 +0000网格布局https://vingnirwu.github.io/tech-shrimp.github.io/post/wang-ge-bu-ju.html# 网格布局 <img width='1398' height='661' alt='Image' src='https://github.com/user-attachments/assets/35c66387-d248-4599-bf79-8f8a1ad44c14' /> ### 基本概念 <img width='1348' height='812' alt='Image' src='https://github.com/user-attachments/assets/39169f54-fbd6-4d38-a21a-ea8a689899f1' /> <img width='1469' height='856' alt='Image' src='https://github.com/user-attachments/assets/e5175375-0022-4501-8816-789caee6c5a8' /> ### 网格容器 <img width='1439' height='645' alt='Image' src='https://github.com/user-attachments/assets/f3998401-bb76-4c79-bbf3-b3ae98d417e0' /> <img width='1381' height='716' alt='Image' src='https://github.com/user-attachments/assets/9c5d9695-e0c7-42f6-b13f-a4fefc8b15c2' /> ### 对齐方式 <img width='1331' height='778' alt='Image' src='https://github.com/user-attachments/assets/51d37cb0-25d9-424c-9044-58ed90b2cd66' /> ### 自动延长 <img width='709' height='613' alt='Image' src='https://github.com/user-attachments/assets/3c6ef9b3-92bb-459e-b0f1-fc9e9859de78' /> ### fr单位 <img width='1475' height='890' alt='Image' src='https://github.com/user-attachments/assets/e53b9a40-050e-42c4-a435-5b3ac6969b49' /> ### gap函数 <img width='1576' height='800' alt='Image' src='https://github.com/user-attachments/assets/758780f1-6996-4c67-a5df-5dd7b98e12af' /> ### repeat写法 <img width='933' height='570' alt='Image' src='https://github.com/user-attachments/assets/08ec5d14-382b-49ab-9831-a0ba314b6983' /> ### 自动填充完成响应式写法 <img width='1360' height='692' alt='Image' src='https://github.com/user-attachments/assets/9629334b-cfb7-4daf-b978-a7860d3a5224' /> ### 网格线 <img width='1417' height='739' alt='Image' src='https://github.com/user-attachments/assets/edf162eb-d8af-4116-97ff-39c64e6bacba' /> 语法1 <img width='1374' height='719' alt='Image' src='https://github.com/user-attachments/assets/0b3a4595-947e-4deb-9b24-e097ebc41793' /> 语法2 <img width='1418' height='769' alt='Image' src='https://github.com/user-attachments/assets/7e299c7b-8292-4249-8fcf-752f01bf0217' /> ### 网格布局 <img width='1562' height='926' alt='Image' src='https://github.com/user-attachments/assets/cc9f7435-eea6-4012-a967-8f61072c90a8' /> ### object-fit <img width='1520' height='741' alt='Image' src='https://github.com/user-attachments/assets/2543bb39-f851-4878-9862-d2727982f650' /> ### 网格项目对齐方式 <img width='1352' height='801' alt='Image' src='https://github.com/user-attachments/assets/9e31f506-affd-48a1-ada6-6bd500ee6dd2' /> <img width='1437' height='839' alt='Image' src='https://github.com/user-attachments/assets/e0cbce40-815b-4e37-81ec-cdcc823bcf10' /> ### 总结 <img width='1426' height='768' alt='Image' src='https://github.com/user-attachments/assets/7b4cbd9b-71e5-4ff1-8071-67523aae53e5' /> <img width='1452' height='791' alt='Image' src='https://github.com/user-attachments/assets/430504a2-5af8-4dac-b385-78a6146100e4' /> <img width='1403' height='758' alt='Image' src='https://github.com/user-attachments/assets/c7385b52-c0ef-412a-a3ad-a2ea17827177' /> <img width='1445' height='842' alt='Image' src='https://github.com/user-attachments/assets/2a001b1e-855b-4328-831b-2f7188713558' /> <img width='1249' height='786' alt='Image' src='https://github.com/user-attachments/assets/01818448-ee30-4e19-a412-9b9b600fbcfc' /> <img width='1466' height='772' alt='Image' src='https://github.com/user-attachments/assets/1f9945e4-37f3-4e48-bae8-6eeb77f73304' /> 。https://vingnirwu.github.io/tech-shrimp.github.io/post/wang-ge-bu-ju.htmlSat, 04 Apr 2026 09:28:34 +0000定位布局文档https://vingnirwu.github.io/tech-shrimp.github.io/post/ding-wei-bu-ju-wen-dang.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 相对定位 */ .box1 { /* 给元素设定相对定位 */ position: relative; /* 给元素设定定位 */ /* 相对于原来位置移动 */ /* 用top、left、bottom、right四个属性来定位元素 */ /* top与bottom同时被设置，优先执行top */ /* left与right同时被设置，优先执行left */ /* 不脱离正常流 原本的位置仍保留 */ top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2 { width: 200px; height: 200px; background-color: aquamarine; } /* 绝对定位 */ /* 如果父亲有定位，则绝对定位是相对与父亲 */ /* 如果父亲没有定位，则绝对定位是相对与视口 */ .son1 { /* 给元素设定绝对定位 */ position: absolute; /* 给元素设定定位 */ /* 相对于最近的有定位的父元素 */ /* 脱离标准流 */ top: 100px; left: 100px; /* 子绝父相 */ width: 200px; height: 200px; background-color: pink; } .son2 { width: 200px; height: 500px; background-color: rgb(62, 32, 99); } .father { width: 400px; height: 600px; background-color: rgb(201, 108, 108); position: relative; } /* 固定定位 */ .gd { /* 给元素设定固定定位 */ /* 脱离标准流 */ /* 固定定位是相对于视口定位 */ position: fixed; /* 水平居中：先定位到50%，再往回走自己的一半 */ left: 50%; margin-left: -800px; bottom: 30px; width: 1600px; height: 120px; background-color: rgba(81, 0, 255, 0.5); border-radius: 15px; z-index: 100; } /* 粘性定位 */ /* 是一种混合定位模式，结合了相对定位和固定定位 */ /* 与固定定位不同，粘性定位是相对与父盒子，而不是视口 */ /* 只会在父盒子范围固定 */ .nx { /* 给元素设定粘性定位 */ position: sticky; /* top: x px; 当顶部距离父盒子还有x像素时，粘性定位生效，此时元素会固定在设定的位置 */ top: 0px; left: 20px; /* 注意：粘性定位的父盒子，overflow: visible; 才能生效 当父盒子overflow属性为hidden时，粘性定位不会生效 */ background-color: rgb(6, 124, 65); width: 200px; height: 200px; } .box4 { width: 500px; height: 2000px; background-color: rgb(156, 201, 108); margin-bottom: 100px; } /* 定位布局-层叠顺序 */ /* 层叠顺序：z-index */ /* 层叠顺序的值越大，越靠前 */ /* 层叠顺序的值相同，先写在后面，越靠前 */ /* 层叠顺序z-index默认值为auto，后面的元素压住前面的元素 */ .box5 { width: 500px; height: 500px; background-color: rgb(201, 108, 108); position: relative; overflow: visible; } .box6 { width: 200px; height: 200px; background-color: rgb(6, 124, 65); z-index: 5; position: absolute; /* 需要注意：z-index只对定位元素（position属性值为absolute、relative、fixed或sticky）生效，对静态定位（static）无效无效 */ } .box7 { width: 200px; height: 200px; background-color: rgb(255, 128, 0); position: absolute; top: 100px; left: 100px; z-index: 2; } </style> </head> <body> <div class='box1'></div> <div class='box2'></div> <br><br><br> <div class='father'> <div class='son1'></div> <div class='son2'></div> </div> <div class='gd'></div> <div class='box4'> <div class='nx'></div> </div> <div class='box4'></div> <br><br> <div class='box5'> <div class='box6'></div> <div class='box7'></div> <div class='box8'></div> </div> </body> </html> ``` 下载： [定位布局.html](https://github.com/user-attachments/files/26479594/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/ding-wei-bu-ju-wen-dang.htmlSat, 04 Apr 2026 09:28:13 +0000定位布局https://vingnirwu.github.io/tech-shrimp.github.io/post/ding-wei-bu-ju.html#定位布局 <img width='1527' height='759' alt='Image' src='https://github.com/user-attachments/assets/7d95f8f2-6019-4be1-8686-6f5e3873245f' /> 四种 <img width='630' height='186' alt='Image' src='https://github.com/user-attachments/assets/d7e4f23d-907e-4f37-ad30-38c251b583a6' /> ### 相对定位 <img width='1498' height='768' alt='Image' src='https://github.com/user-attachments/assets/538f85d3-5c22-4de8-8417-4896814095f0' /> ### 绝对定位 <img width='1523' height='767' alt='Image' src='https://github.com/user-attachments/assets/7b40ef13-7d9a-41e9-a301-811b705324cf' /> 子绝父相 <img width='1489' height='782' alt='Image' src='https://github.com/user-attachments/assets/e7416ab7-7241-4b56-bb25-7762fdb6ee89' /> ### 固定定位 <img width='1527' height='777' alt='Image' src='https://github.com/user-attachments/assets/7f2798d4-c75e-4af6-aefb-ec6fc6cc3cfe' /> ### 粘性定位 <img width='1456' height='811' alt='Image' src='https://github.com/user-attachments/assets/4774f42b-12bb-48b3-b294-dea56df698ff' /> ### 定位布局-层叠顺序 需注意生效条件 <img width='1441' height='790' alt='Image' src='https://github.com/user-attachments/assets/887de52a-1da5-4e91-9b51-b349f25c922f' /> ### 总结 <img width='1524' height='863' alt='Image' src='https://github.com/user-attachments/assets/aab7bd55-c0c6-4a27-bc0a-469774541a56' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/ding-wei-bu-ju.htmlFri, 03 Apr 2026 13:52:02 +0000多行伸缩布局https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-xing-shen-suo-bu-ju.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 淘宝： */ .n { margin: 20px auto; width: 80%; } .box { display: flex; flex-wrap: wrap; border: 5px solid black; margin-left: -8px; margin-right: -8px; } .box .item { flex: 0 0 16.66666666%; height: 120px; background-color: rgb(255, 192, 225); margin-bottom: 8px; padding: 0 8px; } .box .item .content { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.607); } .w { width: 80%; height: 120px; background-color: rgb(6, 5, 5); margin: 0 auto; } /* 京东 */ .box2 { display: flex; flex-wrap: wrap; border: 3px solid rgb(105, 23, 23); width: 80%; margin: 0 auto; } .box2 .item { flex: 1; width: 80px; height: 120px; background-color: rgb(255, 192, 225); /* min-width: 16.666666%; max-height: 16.666666%; */ /* calc(16.666666% - 16px) calc函数里前后项需要空格隔开 */ /* 最大最小宽度减去16px左右间距 */ min-width: calc(16.666667% - 16px); max-height: calc(16.666667% - 16px); margin: 0 8px 16px; } </style> </head> <body> 淘宝 <div class='n'> <div class='box'> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> </div> </div> <div class='w'></div> <br><br><br><br> 京东 <div class='box2'> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> <div class='item'> <div class='content'></div> </div> </div> </body> </html> ``` 下载链接： [多行伸缩布局.html](https://github.com/user-attachments/files/26329830/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/duo-xing-shen-suo-bu-ju.htmlSun, 29 Mar 2026 09:49:14 +0000弹性盒https://vingnirwu.github.io/tech-shrimp.github.io/post/dan-xing-he.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <link rel='stylesheet' href='./iconfont/iconfont.css'> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { width: 600px; height: 800px; background-color: rgb(0, 110, 255); /* 设置弹性盒子 */ /* 弹性盒子的子元素按主轴排列 */ display: flex; /* 容器（父盒子）设置 display: flex; 可以让子盒子按照主轴方式排列。https://vingnirwu.github.io/tech-shrimp.github.io/post/dan-xing-he.htmlSun, 29 Mar 2026 09:48:15 +0000字体图标https://vingnirwu.github.io/tech-shrimp.github.io/post/zi-ti-tu-biao.html# 字体图标 <img width='1557' height='970' alt='Image' src='https://github.com/user-attachments/assets/2184c7e5-3c52-4830-a9b9-30886b770efe' /> <img width='1402' height='663' alt='Image' src='https://github.com/user-attachments/assets/452dae34-6671-4ccc-adcb-d23c5431ed6c' /> 网站链接：https://www.iconfont.cn/ <img width='1041' height='494' alt='Image' src='https://github.com/user-attachments/assets/104ac0c1-ca1b-4ae5-ac72-60d38f825904' /> 打开查看有哪些 <img width='663' height='238' alt='Image' src='https://github.com/user-attachments/assets/688405a7-53b1-4bce-9ec0-a10e0265f347' /> 使用 <img width='1136' height='280' alt='Image' src='https://github.com/user-attachments/assets/39b46513-07d6-42e5-89cd-ee0987a27522' /> 注意是调用fontclass <img width='435' height='306' alt='Image' src='https://github.com/user-attachments/assets/53424ce5-ed3e-4dad-b413-22f29162f480' /> <img width='750' height='34' alt='Image' src='https://github.com/user-attachments/assets/8f7c9c3d-e141-443f-990c-9381a0db874e' /> 。https://vingnirwu.github.io/tech-shrimp.github.io/post/zi-ti-tu-biao.htmlSun, 29 Mar 2026 08:09:54 +0000弹性盒https://vingnirwu.github.io/tech-shrimp.github.io/post/dan-xing-he.html# 弹性盒子 <img width='1516' height='915' alt='Image' src='https://github.com/user-attachments/assets/eab68f80-2b50-4bda-9454-330a677eae8a' /> <img width='1259' height='592' alt='Image' src='https://github.com/user-attachments/assets/99abbf9b-9476-4c7a-8152-da2f4418e579' /> <img width='720' height='122' alt='Image' src='https://github.com/user-attachments/assets/e0a34695-5f46-4dd8-8ade-278f33366d3b' /> <img width='549' height='34' alt='Image' src='https://github.com/user-attachments/assets/79f18d4f-bc01-4ad8-9fa9-f9abf5febcc7' /> 注意： 1.父控制子 2.主轴与交叉轴 ### 主轴与交叉轴对齐 <img width='1578' height='968' alt='Image' src='https://github.com/user-attachments/assets/fa67cb62-4ab9-4523-92dd-79f437f7c576' /> <img width='1522' height='832' alt='Image' src='https://github.com/user-attachments/assets/2e04b445-2a1d-4069-86e9-7f1b44930b24' /> ### 改变主轴方向 <img width='1407' height='740' alt='Image' src='https://github.com/user-attachments/assets/d1b85f3e-7a0d-4f94-b3bd-0d141df5e46e' /> 需要注意： 注意：1.必须给父元素设置 2.对齐也需要注意：主轴改变了，交叉轴也改变了 ### 是否换行 <img width='783' height='338' alt='Image' src='https://github.com/user-attachments/assets/32491b48-a2fb-4302-8365-422df1dcab6a' /> ### 多行对齐 <img width='1579' height='896' alt='Image' src='https://github.com/user-attachments/assets/18743592-52d3-4911-9e9b-8df50bd6a59b' /> ### 子项目flex伸缩与gap间隙 flex <img width='448' height='280' alt='Image' src='https://github.com/user-attachments/assets/d5f38d06-c08e-4e2a-9951-05c6db6b14d2' /> <img width='1370' height='731' alt='Image' src='https://github.com/user-attachments/assets/1356cd1c-50ee-4b20-9fb3-3dd08bbf0cdd' /> 间隙 <img width='1575' height='895' alt='Image' src='https://github.com/user-attachments/assets/224e8c7d-2076-4b06-9825-1824107e1144' /> ### 多行伸缩布局 1.设置百分比 <img width='517' height='238' alt='Image' src='https://github.com/user-attachments/assets/7d896a3a-693d-4d1e-96b7-ab3489e9fa32' /> 2.设置最大最小百分比 <img width='822' height='424' alt='Image' src='https://github.com/user-attachments/assets/5f3cc09d-7a52-4fc0-b0c6-c3b6a9ff0a5d' /> 。https://vingnirwu.github.io/tech-shrimp.github.io/post/dan-xing-he.htmlSun, 29 Mar 2026 07:03:37 +0000浮动代码https://vingnirwu.github.io/tech-shrimp.github.io/post/fu-dong-dai-ma.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 浮动的特性： 1.脱标 脱离标准流控制浮动显示 2.行排列顶部对齐 3.具有行内块元素特性 不管什么元素，添加浮动后，都有行内块元素特性 */ /* 注意： 1.浮动和标准流搭配 先用标准流父元素排列上下位置，之后子元素采取左右排列 2.一个元素浮动，理论上其余的兄弟元素也要浮动 浮动的盒子只会影响后面的标准流，不会影响前面的 */ .fst { width: 200px; height: 400px; background: red; float: left; } .sec { width: 400px; height: 600px; background: rgb(0, 242, 255); float: left; } .tir { width: 600px; height: 600px; background: rgb(34, 255, 0); } /* 清除浮动 */ /* 1.额外标签法 */ .clear { clear: both; } .clflt { background-color: pink; width: 150px; height: 150px; float: left; margin-right: 5px; } .box { border: 5px solid black; width: 400px; margin-top: 20px; } .next { background-color: rgb(192, 255, 225); width: 150px; height: 50px; margin-top: 5px; } /* 2.为父级添加overflow */ .clflt { background-color: pink; width: 150px; height: 150px; float: left; margin-right: 5px; } .box { overflow: hidden; border: 5px solid black; width: 400px; margin-top: 20px; } .next { background-color: rgb(192, 255, 225); width: 150px; height: 50px; margin-top: 5px; } /* 3.after伪元素法 */ /* 给父元素添加clearfix */ .clearfix::after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } /* 照顾低版本浏览器 */ .clearfix { *zoom: 1; } /* 4.双伪元素清除 */ .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } </style> </head> <body> <div class='fst'>注意</div> <div class='sec'>注意</div> <div class='tir'>注意</div> <br><br><br> <div class='box clearfix'> <div class='clflt'> 1</div> <div class='clflt'> 2</div> <div class='clflt'> 3</div> <div class='clflt'> 4</div> <div class='clflt'> 5</div> <div class='clear'></div> </div> <div class='next'></div> </body> </html> ``` 下载链接： [浮动.html](https://github.com/user-attachments/files/26328615/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/fu-dong-dai-ma.htmlSun, 29 Mar 2026 05:43:54 +0000浮动https://vingnirwu.github.io/tech-shrimp.github.io/post/fu-dong.html# 浮动 ### 网页布局的三种方式 三种方式：浮动、固定、标准流 <img width='943' height='613' alt='Image' src='https://github.com/user-attachments/assets/376c8113-0753-4a25-b97d-946f6db4d523' /> ### 为什么需要浮动 <img width='946' height='341' alt='Image' src='https://github.com/user-attachments/assets/c76a35fb-24c8-4050-8358-7d9d54eed04a' /> ### 浮动 <img width='881' height='424' alt='Image' src='https://github.com/user-attachments/assets/1d429f8b-73dc-411e-8244-5649c40b7309' /> ### 浮动的特性 浮动的特性： 1.脱标 脱离标准流控制浮动显示 2.行排列顶部对齐 3.具有行内块元素特性 不管什么元素，添加浮动后，都有行内块元素特性 <img width='490' height='251' alt='Image' src='https://github.com/user-attachments/assets/dde195be-1f53-4321-94f8-817ddf579110' /> #### 最重要 <img width='654' height='151' alt='Image' src='https://github.com/user-attachments/assets/0c59cada-a553-4df6-942a-42bb5698e59f' /> <img width='1019' height='426' alt='Image' src='https://github.com/user-attachments/assets/24e2e453-831d-4851-be6a-3ae04dbe45bb' /> <img width='903' height='311' alt='Image' src='https://github.com/user-attachments/assets/b3199c8c-4a22-4167-8c20-13479615ce9a' /> ### 浮动经常搭配父盒子使用 <img width='1032' height='544' alt='Image' src='https://github.com/user-attachments/assets/d3f0a40f-6422-4e47-baa6-0a7d2c78c6a4' /> 如这种没有间隙的盒子 <img width='893' height='335' alt='Image' src='https://github.com/user-attachments/assets/a93546a5-4904-4930-9ddc-8ba5346dd469' /> 或是利用行间距做成这样 <img width='1183' height='277' alt='Image' src='https://github.com/user-attachments/assets/100651e7-484d-46c7-ba4c-dc43a8912ef3' /> ### 注意事项 <img width='1182' height='548' alt='Image' src='https://github.com/user-attachments/assets/430b1b26-1100-48e6-a6c0-67f1b5ca51bb' /> ### 清除浮动 <img width='619' height='160' alt='Image' src='https://github.com/user-attachments/assets/efbabbda-3e8d-4565-8fdb-0ab67685df4c' /> <img width='632' height='322' alt='Image' src='https://github.com/user-attachments/assets/d846ada0-01f3-4793-b75e-74413a2c41f6' /> <img width='521' height='176' alt='Image' src='https://github.com/user-attachments/assets/cee76c92-9aa7-4931-9248-d4a1087ffac7' /> #### 1.额外标签法 <img width='590' height='137' alt='Image' src='https://github.com/user-attachments/assets/8a1b46ef-6950-4b47-b9b2-ba709530cab5' /> <img width='529' height='349' alt='Image' src='https://github.com/user-attachments/assets/fc067286-6cf2-45fb-b717-316e75982c9b' /> #### 2.父级添加overflow <img width='494' height='164' alt='Image' src='https://github.com/user-attachments/assets/e2529f23-f470-4a77-bebe-bacb7da8cb3f' /> #### 3.after伪元素法 <img width='685' height='382' alt='Image' src='https://github.com/user-attachments/assets/59e618ba-2e0d-4c12-a893-30d6aeecaba2' /> #### 4.双伪元素清除 <img width='658' height='390' alt='Image' src='https://github.com/user-attachments/assets/dfac77d4-1c00-4217-b227-869cdce6cf01' /> ### 总结 <img width='1210' height='652' alt='Image' src='https://github.com/user-attachments/assets/36980bb4-a9f1-43b6-89ac-f560f5713dae' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/fu-dong.htmlSun, 29 Mar 2026 04:02:19 +0000盒子模型2https://vingnirwu.github.io/tech-shrimp.github.io/post/he-zi-mo-xing-2.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 圆角 */ .yuanjiao { width: 200px; height: 200px; background: pink; /* 圆角边框 */ /* border-radius: 圆角半径; */ border-radius: 10px; /* 四个角-一个值 */ /* border-radius: 左上 右上 右下 左下; 四个值 border-radius: 左上+右下 右上+左下; 两个值 border-radius: 左上 右上+左下 右下; 三个值 */ } /* 特殊做法 */ /* 1.圆形的做法 */ /* 高和宽相等，圆角半径等于一半 */ .circle { width: 200px; height: 200px; background-color: pink; /* border-radius: 100px; 或者*/ border-radius: 50%; } /* 2.圆角矩形的做法 */ .circlesquare { width: 400px; height: 200px; background-color: pink; border-radius: 100px; /* 或者 border-radius: 50%; */ } /* 3.可以设置不同的角 */ /* 左上角 */ .btl { width: 400px; height: 200px; background-color: pink; border-top-left-radius: 20px; } /* 盒子阴影 */ .shadow { width: 200px; height: 200px; background-color: pink; /* 盒子阴影 */ /* box-shadow: 影子在水平轴上距离（正右负左） 垂直 模糊程度 尺寸 颜色 内部阴影; 水平与垂直距离是必须元素，其余不是 当为内部阴影时加上inset，但外部不能写outset */ box-shadow: 0 0 20px 15px rgba(0, 0, 0, .3); } /* 鼠标经过有阴影 */ div:hover { box-shadow: 0 0 20px 15px rgba(0, 0, 0, .3); } /* 文字阴影 */ .textshadow { font-size: 120px; font-weight: 800; /* text-shadow: 水平 垂直 模糊程度 颜色; */ text-shadow: 0px 0px 25px red; } </style> </head> <body> <div class='yuanjiao'></div> 1.圆形的做法 <div class='circle'></div> 2.圆角矩形的做法 <div class='circlesquare'></div> 3.设置单独角 <div class='btl'></div> <br> 盒子阴影 <div class='shadow'></div> <br> 文字阴影 <p class='textshadow'>文字阴影</p> </body> </html> ```。https://vingnirwu.github.io/tech-shrimp.github.io/post/he-zi-mo-xing-2.htmlSun, 29 Mar 2026 02:59:57 +0000盒子模型1https://vingnirwu.github.io/tech-shrimp.github.io/post/he-zi-mo-xing-1.html# 盒子模型 ### 组成部分 <img width='1455' height='824' alt='Image' src='https://github.com/user-attachments/assets/81cdb9eb-6e48-4f5c-80eb-f453e9d64e77' /> ```'HTML' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 边框 */ .body div { width: 300px; height: 300px; /* 边框粗细 */ /* border-width: 5px; 边框的粗细 */ border-width: 5px; /* 边框样式 */ /* border-style: dotted; 边框的样式 */ /* solid-实线 dashed-虚线 dotted-点线 其余查手册*/ border-style: dotted; /* 边框颜色 */ /* border-color: bisque; 边框的颜色 */ border-color: bisque; /* 复合写法 */ /* 一般格式：粗细、样式、颜色 */ bottom: 5px solid pink; /* 单独设置边框 */ bottom-top: 5px solid pink; /* top、bottom、left、right */ /* 注意： 覆盖性——先写大的，再写小的 bottom: 5px solid pink; bottom-top: 55px solid blue; 上边框为蓝，其余为粉 若顺序反了则全为粉 */ /* 注意： 边框会影响盒子的实际大小 */ /* 实际大小 = 盒子大小 + 边框大小 */ } /* 表格细线边框 */ table, td, th { border: red 1px solid; font-style: 14px; text-align: center; /* 边框合并 */ /* 由于相邻边框重叠，实际宽度不修改会为两倍 */ border-collapse: collapse; } /* 盒子内边距padding */ .padding { width: 200px; height: 300px; background-color: red; /* 内边距设置 */ padding-left: 5px; padding-top: 30px; padding-bottom: 5px; padding-right: 5px; /* 复合写法 */ /* padding: 5px; 上下左右有5px */ /* padding: 5px 7px; 上下有5px 左右为7px */ /* padding: 5px 7px 9px; 上为5px，左右为7px，下为9px */ /* padding: 5px 6px 7px 8px; 上为5px，右为6px，下为7px，左为8px */ /* 注意： padding会影响盒子的实际大小 */ /* 实际大小 = 盒子大小 + padding大小 */ /* 可以用此特性完成设计，不用宽度用内边距设定大小 */ } /* padding不会撑开盒子的情况 */ h1 { /* 不给宽度就不会撑开 */ /* 两种情况： 1.默认宽度 2.继承来的大小 */ height: 500px; background-color: pink; padding: 30px; /* 此时会多加30px */ /* width: 100%; height: 500px; background-color: pink; padding: 30px; */ } /* 盒子外边距margin */ .margin { width: 200px; height: 300px; background-color: rgb(0, 255, 89); /* 外边距设置 */ /* 和padding规则相同 */ margin-top: 50px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; /* 复合写法 */ /* margin: 5px; */ /* 让盒子水平居中对齐 */ /* 有以下写法： margin-left: auto; margin-right: auto; margin: 0 auto; 上下为0，左右为auto */ } /* 行内元素或者行内块元素居中对齐 */ .hnk { /* 方法：给父元素添加text-align: center;即可 */ width: 900px; height: 400px; background-color: pink; text-align: center; margin: auto; } /* 外边距合并-套嵌块元素塌陷 */ /* 塌陷案例 */ .father { width: 400px; height: 400px; background-color: red; margin-top: 50px; } .son { width: 40px; height: 200px; background-color: pink; margin-top: 100px; /* 谁大谁会塌陷，父元素和子元素无论谁大会把另一个也拖下来 */ } /* 解决方法 */ /* 1.为父元素加上边框 border 如：border：1px solid transparent； 2.为父元素定义内边距 3.为父元素添加overflow: hidden */ .father2 { width: 400px; height: 400px; background-color: red; margin-top: 50px; overflow: hidden; /* padding: 10px; */ } .son2 { width: 20px; height: 100px; background-color: pink; margin-top: 100px; } /* 清除浏览器内外边距 */ /* * { margin: 0; padding: 0; } */ /* 这是我们CSS的第一行代码 */ /* 行内元素为了照顾兼容性，一般只设置左右内外边距，不设置上下边距 */ </style> </head> <body> <table align='center' cellspacing='0' width='500px' height='400px'> <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近qitian</th> <th>相关链接</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src='/上箭头.jpg' alt='' width='13px' height='13px'></td> <td>456</td> <td>123</td> <td> <a href='#'>贴吧</a> <a href='#'>图片</a> <a href='#'>百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯3</td> <td><img src='/下箭头.jpg' alt='' width='13px' height='13px'></td> <td>456</td> <td>123</td> <td> <a href='#'>贴吧</a> <a href='#'>图片</a> <a href='#'>百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯2</td> <td><img src='/上箭头.jpg' alt='' width='13px' height='13px'></td> <td>456</td> <td>123</td> <td> <a href='#'>贴吧</a> <a href='#'>图片</a> <a href='#'>百科</a> </td> </tr> </tbody> </table> <div class='padding'> 盒子的内容是content 盒子的内容是content 盒子的内容是content 盒子的内容是content 盒子的内容是content </div> <h1>padding 不会撑开盒子的情况</h1> <div class='margin'>margin1</div> <div class='margin'>margin2</div> <div class='hnk'> <span>行内块元素居中</span> </div> <div class='father'> <div class='son'>zi</div> </div> <div class='father2'> <div class='son2'>zi2</div> </div> </body> </html> ``` 下载链接： [盒子模型.html](https://github.com/user-attachments/files/26323102/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/he-zi-mo-xing-1.htmlWed, 25 Mar 2026 08:52:53 +0000CSS三大特性https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-san-da-te-xing.html# CSS三大特性 ### 层叠性 就近原则 <img width='1523' height='845' alt='Image' src='https://github.com/user-attachments/assets/8108e740-fcf7-445a-9fb8-a25740b7bb24' /> ### 继承性 <img width='1512' height='825' alt='Image' src='https://github.com/user-attachments/assets/b50f4ca4-c294-46e4-9649-f473de555920' /> #### 特殊：行高的继承 <img width='1454' height='818' alt='Image' src='https://github.com/user-attachments/assets/731aae76-517d-4b2d-adc7-b83c5b095275' /> <img width='800' height='400' alt='Image' src='https://github.com/user-attachments/assets/e71539e1-43a7-4dce-b17a-8291c7a10705' /> ### 优先级 <img width='1138' height='482' alt='Image' src='https://github.com/user-attachments/assets/aee797af-7d68-4a10-afba-3e0596bda241' /> <img width='750' height='345' alt='Image' src='https://github.com/user-attachments/assets/67c594db-1ad8-471e-92a5-56c080e82469' /> #### ！important 使用方法 <img width='566' height='293' alt='Image' src='https://github.com/user-attachments/assets/584a9267-edcf-4729-97f1-d125124e5150' /> <img width='1211' height='509' alt='Image' src='https://github.com/user-attachments/assets/ec54c94e-d2e6-4b5f-bb2c-f5ad1fc8048f' /> **重点：继承的权重是 0** #### 特殊： a链接较为特殊，浏览器默认给a指定一个样式 蓝色带下划线 #### 权重叠加 <img width='721' height='142' alt='Image' src='https://github.com/user-attachments/assets/31b7da7b-b691-4ae8-9040-5e0d017e173e' /> <img width='1123' height='586' alt='Image' src='https://github.com/user-attachments/assets/73cd2872-7c77-42b6-8af4-7fdac8075d02' /> <img width='725' height='386' alt='Image' src='https://github.com/user-attachments/assets/94b6ccff-8915-4c02-b3b8-27f04bcffe66' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-san-da-te-xing.htmlWed, 25 Mar 2026 07:42:26 +0000背景https://vingnirwu.github.io/tech-shrimp.github.io/post/bei-jing.html```'http' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 背景颜色 */ .div { width: 200px; height: 100px; background-color: #03a309; } /* 背景图片 */ .divb { width: 200px; height: 500px; background-image: url(地址); /* 属性：none（默认）、url+（图片地址） */ } /* 背景平铺 */ .divbp { width: 200px; height: 500px; background-image: url(); background-repeat: no-repeat; /* 属性：repeat（默认）、no-repeat、repeat-x、repeat-y repeat-x、repeat-y————沿x轴还是y轴平铺 */ /* 默认情况下背景是平铺的 平铺：图片重复填满区域 */ background-color: #03a309; /* 页面元素既可以添加背景图片，又可以添加背景颜色， 只不过背景图片会压住颜色 */ } /* 背景方位(重要) */ .divpo { width: 1200px; height: 500px; background-color: #03a309; background-image: url(/背景.png); background-repeat: no-repeat; /* 用于控制背景图片的位置 background-position: x y; x、y为方位名词*/ /* background-position: top left; */ /* 背景图片左上对齐 */ /* x、y的顺序不影响结果 */ /* background-position: center center; */ background-position: center; /* 如果第一个填了，第二个默认为center */ /* 属性值：top、center、bottom（底部）y轴 left center right y轴 */ /* 精确单位 */ background-position: 20px 50px; /* x轴20，y轴50 */ /* x在前，y在后，是坐标，原点在左上角 */ /* 混合单位 */ background-position: 20px center; /* 水平20，上下居中 */ /* x在前，y在后，是坐标，原点在左上角 */ } .divfrim { width: 1200px; height: 500px; background-color: #03a309; background-image: url(/背景.png); /* 背景固定 */ background-attachment: fixed; /* 属性：scroll（随着滚动）、fix（固定） */ font: italic 700 70px 'Microsoft YaHei'; } .divfh { /* 复合写法 */ /* background-color: #03a309; background-image: url(地址); background-repeat: no-repeat; background-attachment: fixed; background-position: 20px 50px; */ /* 一般约定顺序为：颜色、图片、平铺、滚动、位置 */ background: #000 url(地址) no-repeatfixed 20px 50px; } .divtm { width: 300px; height: 200px; /* 背景半透明 */ /* background: rgba(red, green, blue, alpha); alpha为透明度，0~1之间 */ background: rgba(176, 20, 20, 0.6); } </style> </head> <body class=''> <div class='divtm'></div> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> <p>背景固定</p> </body> </html> ``` 下载链接： [背景.html](https://github.com/user-attachments/files/26209535/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/bei-jing.htmlTue, 24 Mar 2026 09:57:12 +0000背景相关https://vingnirwu.github.io/tech-shrimp.github.io/post/bei-jing-xiang-guan.html# 背景 ### 背景颜色 <img width='900' height='635' alt='Image' src='https://github.com/user-attachments/assets/17484494-fef1-4281-a37f-c05362351252' /> ### 背景图片 <img width='900' height='695' alt='Image' src='https://github.com/user-attachments/assets/32a1114f-2d85-40ef-82fd-2415d2d564a3' /> ### 背景平铺 <img width='900' height='600' alt='Image' src='https://github.com/user-attachments/assets/4c2fb85d-f68e-4097-9e66-acdf32265187' /> ### 背景方位（重要） <img width='900' height='488' alt='Image' src='https://github.com/user-attachments/assets/530d1ced-7fa2-4d7e-b5f0-95836f0e7c6d' /> <img width='900' height='437' alt='Image' src='https://github.com/user-attachments/assets/d0567de9-6de3-409b-b5bb-f82920d5ac79' /> <img width='900' height='618' alt='Image' src='https://github.com/user-attachments/assets/466fad34-b7f6-42a3-bf0e-5698ca0ddf25' /> ### 背景固定 <img width='900' height='564' alt='Image' src='https://github.com/user-attachments/assets/1e741b4d-9dfc-4909-9daa-be163ef34b8a' /> ### 复合写法 <img width='900' height='600' alt='Image' src='https://github.com/user-attachments/assets/a9e94349-bff9-405c-ac63-4923c0d111f3' /> ### 半透明 <img width='900' height='630' alt='Image' src='https://github.com/user-attachments/assets/bd40ff6d-2f4c-4af9-8424-d02f6de77c0c' /> ## 总结 <img width='1476' height='699' alt='Image' src='https://github.com/user-attachments/assets/314ac0c8-dda8-4bed-9987-ae4e2cf7e68c' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/bei-jing-xiang-guan.htmlTue, 24 Mar 2026 09:55:28 +0000小米侧边栏https://vingnirwu.github.io/tech-shrimp.github.io/post/xiao-mi-ce-bian-lan.html## 原图： <img width='149' height='182' alt='Image' src='https://github.com/user-attachments/assets/52a29983-c4b6-4186-848b-27d1c23201cf' /> ## 作品效果： <img width='500' height='300' alt='Image' src='https://github.com/user-attachments/assets/82b408b3-4f7a-438a-911b-3a87d7bdf73e' /> ```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> a { display: block; /*将链接转换为块元素 */ width: 230px; height: 40px; background-color: #535758; font-style: 14px; color: #ffffff; text-decoration: none; text-indent: 2em; line-height: 40px; } a:hover { background-color: #ff6f00; } /* 文字垂直居中技巧 */ /* 文字行高等于盒子宽度 */ /* a { line-height: 40; } */ </style> </head> <body> <!-- 思路： 把a链接转化为块元素，在加上效果鼠标经过切换背景颜色 --> <a href='#'>手机 电话卡</a> <a href='#'>电视 盒子</a> <a href='#'>笔记本 平板</a> <a href='#'>出行 穿戴</a> <a href=''>出行 穿戴</a> <a href=''>智能 路由器</a> <a href=''>健康 儿童</a> <a href=''>耳机 音响</a> </body> </html> ``` ## 让文字垂直居中技巧 <img width='900' height='400' alt='Image' src='https://github.com/user-attachments/assets/db4f0ce2-2697-4b77-b165-c26127131bf6' /> 下载链接： [小米侧边栏.html](https://github.com/user-attachments/files/26208297/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/xiao-mi-ce-bian-lan.htmlTue, 24 Mar 2026 09:16:17 +0000选择器（基础+复合）https://vingnirwu.github.io/tech-shrimp.github.io/post/xuan-ze-qi-%EF%BC%88-ji-chu-%2B-fu-he-%EF%BC%89.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 基础选择器 */ /* 标签选择器 */ p { color: grees } /* 标签选择器：写上标签名，将某一类全部选出 优点：快速更改 缺点：不能单一设置 */ /* 类选择器 */ .red { color: red; } /* 类选择器口诀：样式点定义、 结构类调用、 一个或多个、 开发最常用 .类名 为自己定义，不能用div、p之类 注意 1、类选择器可以用 '.' （英文点号）进行标识,后面紧跟类名 （自定义,我们自己命的) 2、以理解为给这个标签起了一个名字 3、长名称或词组可以使用中横线来为选择器命名 4、不要使用纯数字、 中文等命名,尽量使用英文字母来表示 5、命名要有意义, 尽量使别人-跟就知道这个类名的目的 */ /* 特殊使用————多类名 ——<div class='red font35'>多类名</div> */ .font35 { wide: 250; } /* 一个对象可以添加多个类 */ /* ID选择器 */ #pink { color: pink; } /* id选择器口诀：样式#定义、结构id调用、只能调用一次、别人切勿使用 */ /* 通配符选择器 */ * { color: red; } /* 不需要调用，给所有标签统一修改 */ /* 复合选择器 */ /* 后代选择器 格式：元素1 元素2 {} 表示选择元素1里所有的元素2 可有多层, 元素1、2可用id与class */ ol li { color: red; } ol li p { color: pink; } .nav li p { color: red; } /* 子选择器 格式：元素1>元素2 {} 选择元素1里的 直系 后代元素2 只能一级 */ div>p { color: red; } /* 并集选择器 格式： 元素 ,元素2 {} 一次更改多个 约定语法规范：并集竖着写 注意：最后一个不能加逗号 */ p, div { color: red; } /* 伪类选择器 链接伪类选择器 未选择的链接 */ a:link { color: red } /* 点击过的链接 */ a:visited { color: red } /* 鼠标经过的链接 */ a:hover { color: skybule } /* 鼠标摁下还未弹起的链接 */ a:active { color: brown } /* 注意事项： 1、按顺序书写，LVHA顺序：lV Hao */ /* foucus复合选择器 用于选取获得焦点的表单元素 格式：元素1+ :focus {} */ input:focus { color: red; } </style> </head> <body> <li class='red'>red类</li> <div class='red font35'>多类名</div> <div id='pink'>id选择器</div> </body> </html> ``` [选择器.html](https://github.com/user-attachments/files/26207433/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/xuan-ze-qi-%EF%BC%88-ji-chu-%2B-fu-he-%EF%BC%89.htmlTue, 24 Mar 2026 08:37:38 +0000emmet语法https://vingnirwu.github.io/tech-shrimp.github.io/post/emmet-yu-fa.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> 1. 生成标签 输入标签名后按TAP div+TAP 2.生成多个相同标签 加上*+数字 div+#+3 3.如果有父子级关系的继承 加上> ul>li 4.如果有兄弟关系的标签 用+ div+p 5.如果带有类名或者id名的 .class或#id p+.+nav p+#+nav 6.如果class或id需要排列顺序 用$+*+数字 p+.+class1$*5 7.想在生成的标签里的内容 用{} p+{生成的内容} div+{1}$*5 快速生成内容： 单词首字母+属性+TAP w200——>width:200px; </body> </html> ``` <img width='809' height='200' alt='Image' src='https://github.com/user-attachments/assets/333494d8-ae96-4da2-93fe-55bde7c48406' /> <img width='693' height='313' alt='Image' src='https://github.com/user-attachments/assets/356eb22e-b6e7-45a1-9a5b-515cf4069055' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/emmet-yu-fa.htmlTue, 24 Mar 2026 08:24:26 +0000样式表https://vingnirwu.github.io/tech-shrimp.github.io/post/yang-shi-biao.html```'http' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <!-- 内部样式表 --> <style> div { color: red; } </style> <!-- 外部样式表 --> <link rel='stylesheet' href='文件路径'> <link rel='stylesheet' href='外部样式表.css'> 写在head里 herf的路径规则和超链接相同 可控制多个页面 </head> <body> <!-- 行内样式表 --> <div style='color: red;'> 行内样式表</div> </body> </html> ``` ```'css' /* 直接写，不需要style */ div { color: red; } ``` 下载链接： [外部样式表.css](https://github.com/user-attachments/files/26206960/default.css) [样式表.html](https://github.com/user-attachments/files/26206931/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/yang-shi-biao.htmlTue, 24 Mar 2026 08:18:32 +0000元素显示模式https://vingnirwu.github.io/tech-shrimp.github.io/post/yuan-su-xian-shi-mo-shi.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /* 将行内元素转换为块元素 display: block; 将块级元素转换为行级元素 display: inline; 将行内元素转换为块元素 display: inline-block; */ .ast { width: 300px; height: 50px; background-color: green; /* 将行内元素转换为块元素 */ display: block; } .divst { /* 将块级元素转换为行级元素 */ display: inline; } .spanst { width: 100px; height: 300px; background-color: skyblue; /* 将行内元素转换为块元素 */ display: inline-block; } </style> </head> <body> <a herf='#'>块元素</a><br> <a herf='#' clsss='ast'>块元素转换为行内元素</a><br> <div>我是块级元素</div><br> <div class='divst'>我是块级元素转换为行级元素</div><br> <span>我是行内元素<span><br> <span class='spanst'>我是行内元素转换为块元素</span><br> </body> </html> ``` 下载链接： [元素选择模式.html](https://github.com/user-attachments/files/26206402/default.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/yuan-su-xian-shi-mo-shi.htmlTue, 24 Mar 2026 08:09:12 +0000黑马pink笔记https://vingnirwu.github.io/tech-shrimp.github.io/post/hei-ma-pink-bi-ji.html[「学习笔记」html基础.pdf](https://github.com/user-attachments/files/26113117/html.pdf)。https://vingnirwu.github.io/tech-shrimp.github.io/post/hei-ma-pink-bi-ji.htmlThu, 19 Mar 2026 11:14:55 +0000文本https://vingnirwu.github.io/tech-shrimp.github.io/post/wen-ben.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> 文本属性 文本颜色 div { color: deeppink; color: #ff0000; color: rgb(255, 0, 0); } 可以用预定义的颜色值，也可以用16进制、rgb 双击可以从调色盘上选择 文本对齐 div { text-align: center; } 属性：left、right、center 文本装饰 div { text-decoration: underline; } a { text-decoration: none; /* 取消a下划线 */ } 属性:none默认、underline下划线、overline上划线、line-through删除线 文本缩进 p { text-indent: 10px; text-indent: 2em; } 属性：px——像素、em——当前缩进文字几个文字大小 行间距 body { line-hight: 26px; } 行高有上间距与下间距与文本高度，上间距与下间距相等， 一般测第一行的最下沿到第二行的最下沿 </style> </head> <body> <h2>标题</h2> <p>普通文本1</p> <p>普通文本2</p> <a>下划线文本3</a> </body> </html> ```。https://vingnirwu.github.io/tech-shrimp.github.io/post/wen-ben.htmlThu, 19 Mar 2026 11:14:01 +0000字体https://vingnirwu.github.io/tech-shrimp.github.io/post/zi-ti.html```'字体' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> 字体 字体属性 h2 { font-family: '微软雅黑'; } p { font-family: 'Microsoft YaHei', 'Arial'; } 多个字体间用英文','分开 用英文名称兼容根号，用引号包裹, 单引号双引号都行 执行时先找前一个，再下一个 字体大小 body { font-size: 20px; } 标题较为特殊，需要单独设置大小 px－像素是最常用单位 尽量不要采用浏览器自定 字体粗细 .bold { font-wight: bold; font-wight: normal; } 属性较多，建议去手册查找 属性：normal正常字体 400、bold粗 700、bolder超粗、lighter细、 number（纯数字不需要单位，设置粗细） 实际开发更提倡使用数字 文字样式 .italic { font-style: italic; font-style: normal; } 属性：italic斜体、normal正常 主要使用是让斜体变正 复合属性 div { /* 省略写法：font: font-style font-wight font-size/line-hight font-family; */ font: italic 700 16px 'Microsoft YaHei'; } 不能更改位置，必须按这个顺序，中间用空格隔开 其余可省略， 但font-size与font-family不能省 </style> </head> <body> <h2>标题微软雅黑</h2> <p>普通文本1</p> <p class='bold'>普通文本2加粗</p> <p class='italic'>普通文本3斜体</p> </body> </html> ```。https://vingnirwu.github.io/tech-shrimp.github.io/post/zi-ti.htmlThu, 19 Mar 2026 10:59:46 +0000基础选择器https://vingnirwu.github.io/tech-shrimp.github.io/post/ji-chu-xuan-ze-qi.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> 标签选择器 p { color: grees } 标签选择器：写上标签名，将某一类全部选出 优点：快速更改 缺点：不能单一设置 类选择器 .red { color: red; } 类选择器口诀：样式点定义、 结构类调用、 一个或多个、 开发最常用 .类名 为自己定义，不能用div、p之类 注意 1、类选择器可以用 '.'（英文点号）进行标识, 后面紧跟类名 （自定义 , 我们自己命的) 2、以理解为给这个标签起了一个名字 3、长名称或词组可以使用中横线来为选择器命名 4、不要使用纯数字、 中文等命名,尽量使用英文字母来表示 5、命名要有意义,尽量使别人-跟就知道这个类名的目的 多类名 font35 { wide: 250; } ID选择器 #pink { color: pink; } id选择器口诀：样式#定义、结构id调用、只能调用一次、别人切勿使用 通配符选择器 * { color: red; } 不需要调用，给所有标签统一修改 </style> </head> <body> <li class='red'>red类</li> <div class='red font35'>多类名</div> <div id='pink'>id选择器</div> </body> </html> ```。https://vingnirwu.github.io/tech-shrimp.github.io/post/ji-chu-xuan-ze-qi.htmlThu, 19 Mar 2026 10:54:04 +0000CSS基础https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-ji-chu.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> css一般写在head与/head之间 <style> /* 格式：选择器{样式} */ p { color: red; /* 颜色 */ font-size: 12px; /* 文字大小：12像素 */ } </style> 规范： 1、属性与属性值对应 2、属性与属性值之间用冒号:分割，用分号;结尾 </head> <body> <p>段落标签</p> <p>文本1</p> </body> </html> ```。https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-ji-chu.htmlThu, 19 Mar 2026 10:53:27 +0000CSS基础知识https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-ji-chu-zhi-shi.html# CSS基础知识 ### CSS简介 <img width='600' height='138' alt='Image' src='https://github.com/user-attachments/assets/4454f9a7-70c8-4a47-bd46-9cb4c25ef63a' /> <img width='479' height='164' alt='Image' src='https://github.com/user-attachments/assets/2dade072-e1b5-435b-a0c7-2b358bd6039f' /> <img width='478' height='84' alt='Image' src='https://github.com/user-attachments/assets/f497273c-b1d0-4e28-8c4b-9e1bb19160ae' /> <img width='478' height='297' alt='Image' src='https://github.com/user-attachments/assets/3668af04-6a56-4e51-9aaf-9b127b9fb41b' /> 语法规范： 选择器 { 样式; } ### CSS代码风格 #### 1、样式格式书写 <img width='900' height='500' alt='Image' src='https://github.com/user-attachments/assets/32bc7c32-8310-4348-80c7-bb8a8e050214' /> #### 2、样式大小写 提倡用小写字母书写 <img width='900' height='248' alt='Image' src='https://github.com/user-attachments/assets/5541d1cd-5def-4724-ad57-bf55641a42ac' /> #### 3、空格规范 <img width='343' height='91' alt='Image' src='https://github.com/user-attachments/assets/1405001f-683c-4734-920a-4acbf65440f9' /> ### CSS选择器的作用 <img width='789' height='278' alt='Image' src='https://github.com/user-attachments/assets/e0bc62e4-5b48-4e65-b9b2-9980cb8e8d57' /> <img width='558' height='215' alt='Image' src='https://github.com/user-attachments/assets/c1ffc8e3-e6ae-4503-9746-d95b7fe17eff' /> ### 选择器的分类 #### 基础选择器 ##### 标签选择器 <img width='754' height='177' alt='Image' src='https://github.com/user-attachments/assets/faa3d06c-d634-4d5e-a5b0-30b9bcdd8d5a' /> <img width='825' height='400' alt='Image' src='https://github.com/user-attachments/assets/c99c33db-b5a8-43f8-b6d7-85a39eecd5c0' /> ##### 类选择器 <img width='795' height='490' alt='Image' src='https://github.com/user-attachments/assets/6cae3aba-ede4-4d32-9389-75f4d5137515' /> <img width='661' height='231' alt='Image' src='https://github.com/user-attachments/assets/84f0a9b9-0a75-4771-b786-6f07099184be' /> 多类名 <img width='771' height='267' alt='Image' src='https://github.com/user-attachments/assets/b9f8b947-7fb9-4ee3-8bd0-67580ab52bb6' /> <img width='775' height='274' alt='Image' src='https://github.com/user-attachments/assets/7c987a68-2e26-43df-8218-e64cf8597ec8' /> <img width='800' height='387' alt='Image' src='https://github.com/user-attachments/assets/18eddd3a-0666-4b54-bf49-57450c4b9a9c' /> ##### id选择器 <img width='533' height='142' alt='Image' src='https://github.com/user-attachments/assets/fad536bd-70cf-44b1-9d6c-6598d900a377' /> <img width='900' height='411' alt='Image' src='https://github.com/user-attachments/assets/31126fc6-657b-4aeb-8c51-5869343b8a85' /> ##### 通配符选择器 <img width='775' height='293' alt='Image' src='https://github.com/user-attachments/assets/1a3ac20e-bb94-4e93-886b-3a4592a2ca3a' /> ### 选择器总结 <img width='846' height='449' alt='Image' src='https://github.com/user-attachments/assets/032f3151-dbbb-4e56-b410-904e7c0b98b3' /> ### CSS引入方式 <img width='631' height='317' alt='Image' src='https://github.com/user-attachments/assets/db642a2c-090e-49a0-94b6-451f85bc1780' /> ##### 行内样式表 <img width='900' height='277' alt='Image' src='https://github.com/user-attachments/assets/0c1b0228-1400-469e-9fb5-a911c35e52e8' /> ##### 内部样式表 <img width='781' height='288' alt='Image' src='https://github.com/user-attachments/assets/76c772f2-9c91-43ab-aee2-2d24e9f96f3a' /> <img width='697' height='150' alt='Image' src='https://github.com/user-attachments/assets/d38b7aca-47c2-4ebf-8119-8f3350a545a6' /> ##### 外部样式表 <img width='840' height='551' alt='Image' src='https://github.com/user-attachments/assets/143e339c-35b1-4793-8a92-1b1090926c06' /> <img width='798' height='242' alt='Image' src='https://github.com/user-attachments/assets/52199d3b-52aa-415e-a81b-6a4292144f99' /> ### emmet语法 <img width='809' height='200' alt='Image' src='https://github.com/user-attachments/assets/98d284fa-67d9-41b0-87d2-079dab13cf15' /> <img width='693' height='313' alt='Image' src='https://github.com/user-attachments/assets/7e4e8637-f13f-467d-b2b8-b61742becb71' /> ### 元素显示模式 <img width='823' height='227' alt='Image' src='https://github.com/user-attachments/assets/ff392676-f0ed-4e8d-a89a-e3a188485010' /> <img width='879' height='445' alt='Image' src='https://github.com/user-attachments/assets/fd48fb08-699f-46a4-9356-2d64e00d2164' /> <img width='868' height='445' alt='Image' src='https://github.com/user-attachments/assets/8cf3046b-f770-4ae2-8f0e-e330ad646166' /> <img width='798' height='331' alt='Image' src='https://github.com/user-attachments/assets/c7100285-f112-44e9-96d5-8ed7a62bb4ef' /> <img width='854' height='337' alt='Image' src='https://github.com/user-attachments/assets/080b4845-4f94-4ddb-9cf3-492c43b8a89b' /> 。https://vingnirwu.github.io/tech-shrimp.github.io/post/CSS-ji-chu-zhi-shi.htmlThu, 19 Mar 2026 08:45:12 +0000表单https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-dan.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> 表单 作用：收集用户信息 组成：表单域、表单控件（元素）、提示信息 表单域 <form action='demo.php' method='post' name='name1'> </form> 表单域就是form标签 表单控件 input表单元素 <form> 表单标题：<input type='属性值'> <br> 例：用户名:<input type='text' name='username' value ='请输入用户名'> 密码：<input type='password' maxlength='20'> <br>——maxlength控制文本长度 性别：男 <input type='radio' name='sex' checked='checked'> 女<input type='radio' name='sex'> ————单选按钮name相同才可以实现，checked控制是否初始选中 人妖 <input type='radio'> <br>————单选按钮可以实现多选 爱好：吃法<input type='checkbox'> 睡觉 <imput type='checkbox'> <br>————复选框，✓形式 提交按钮<input type='submit' value='免费注册'>——提交按钮可以把表单元素里的值提交给后台 重置按钮<input type='reset' value='重新设置'>——还原表单元素的初始默认状态 普通按钮<input type='button' value='发送验证码'>——后期与js配合使用 文件域<input type='file'>——上传文件时使用 </form> 表单元素 type——控制形态 name——定义表单的名字，区别不同的表单，单选按钮的单选需要name相同 value——在文本框中可看到，但主要是给后台人员使用 checked——属性值：checked，默认加载时就选中 maxlength——属性值：正整数，规定输入字段字符的最大长度 属性值 描述 button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-dan.htmlThu, 19 Mar 2026 07:23:37 +0000标签学习2https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-qian-xue-xi-2.html```'http' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> 表格标签 主要作用：展示、显示数据 <table> <tr> <th>表头</th> </tr> <tr> <td>单元格</td> </tr> </table> tr——行 td——单元格（行中的列，即为单个单元格） th——表头单元格 表格属性 <table align='center' border='1' cellpadding='3' cellspacing='0' width='500'> </table> align——表格对齐方式 left center right border——边框 1或'' cellpadding——单元格边缘与字符间的距离，默认为1像素 cellspacing——单元格间的距离，默认2像素 width——表格的宽度 像素值或百分比 表格结构标签 <table> <thead>表头部</thead> <tbody>表主题</tbody> </table> 使表格更清晰 合并单元格 两种方式：跨行合并、跨列合并 <table border='1'> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan='2'></td> <td colspan='2'></td> <!-- <td></td> -->删除多余单元格 </tr> <tr> <!-- <td></td> --> <td></td> <td></td> </tr> </table> 列表标签 作用：用来做布局 类型：无序列表、有序列表、自定义列表 无序列表 <ul> <li>列表项1</li> <li>列表项2</li> <li></li> </ul> 注意： 1.无序列表各个项无等级之分，是并列的 2.ul中只能放<li></li> 3.li中可以容纳任何元素 有序列表 <ol> <li>1.列表项1</li> <li>2.列表项2</li> </ol> 有序列表前会有编号 注意项与无序列表基本相同 自定义列表 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl> dl用于定义描述列表，会与dd一同使用 字体图标标签 <i class='iconfont icon-dianzan'></i> 需要下载，引用iconfont的css </body> </html> ``` ##下载 [标签学习02.html](https://github.com/user-attachments/files/26106772/02.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-qian-xue-xi-2.htmlThu, 19 Mar 2026 05:31:58 +0000标签学习1https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-qian-xue-xi-1.html```'http' <!DOCTYPE html> 文档类型声明标签 --并非是html标签 <html lang='en'> lang来定义文档显示的语言 1.en是英文 2.zh-CN是中文 但其实en与zh-CN的网页均可显示中英文 仅对浏览器起提示作用 <head> <meta charset='UTF-8'> <meta>标签下的charset用来定义HTML使用哪种字符的编码 不写会出现乱码 <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> 标题标签 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> h1-h6是标题标签，加粗显示，级别依次 段落标签 <p></p> 用段落标签把文字分段，分别储存段落 换行标签 <br /> 换行标签，强制换行，空行比段落小 单标签，无需结束标签 文本格式化标签 为文字设置粗体，斜体，下划线等效果 <strong></strong>或<b></b>————加粗 <em></em>或<i></i>————倾斜 <del></del>或<s></s>————删除线 <ins></ins>或<u></u>————下划线 无语义标签 <div></div> <span></span> div标签一个*独占一行* span一行可以放多个 网页布局中很重要 图像标签* <img src='图像URL' alt='替换文本' title='提示文本' width='宽度' height='高度' border='边框' /> 图像标签为单标签，src后为所插入图像文件的路径和文件名，/用来表示这个为单标签 一般图像文件需存储入同文件夹 alt为替换文本，在文件显示不出来时显示 title为提示文本，在鼠标悬浮时显示文字 width为图像设置宽度 height为图像设置宽度 border为图像设置边框粗细 注意： 1.图像标签可以有多个属性，必须在标志名后面 2.属性不分先后顺序，以空格分开 3.key='value'格式 超链接标签* <a href='跳转目标' target='目标窗口弹出方式'>链接文本</a> herf为链接目标的url地址，为必须属性 target用于在指定打开方式，_self为默认值以当前窗口打开，_blank在新窗口打开 链接分类：1.外部链接 <a href='http://www.qq.com'>腾讯</a> http://+外部网站 2.内部链接 <a href='创建页面.html'></a> 无需http:// 3.空连接 <a href='#'></a> 用#代替 4.下载链接 <a href='img.zip'>下载</a> herf里为文件 5.网页元素链接 <a href=''><img src='image/immg.jpg'></a> 用网络元素替代文本被a标签包含 6.锚点链接 <a href='#名字'></a> <img src='image/immg.jpg' id='名字'> 定位到页面中某个位置 herf为#+名字，名字在原本的目标标签中加入id属性 可用于返回顶部等用处 </body> </html> ``` ##下载 [标签学习01.html](https://github.com/user-attachments/files/26106761/01.html)。https://vingnirwu.github.io/tech-shrimp.github.io/post/biao-qian-xue-xi-1.htmlThu, 19 Mar 2026 05:30:45 +0000路径学习https://vingnirwu.github.io/tech-shrimp.github.io/post/lu-jing-xue-xi.html```'html' <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> </head> <body> <img src='image/immg.jpg' alt=''> 下一级 <img src='../image/immg.jpg' alt=''> 上一级 </body> </html> ``` # **相对路径** <img width='900' height='611' alt='Image' src='https://github.com/user-attachments/assets/d394fa07-c4c4-4b2a-8c4d-d38734451a6a' /> <img width='900' height='631' alt='Image' src='https://github.com/user-attachments/assets/db99f68b-df79-4677-ab79-518aa58b1b61' /> # **绝对路径** <img width='900' height='353' alt='Image' src='https://github.com/user-attachments/assets/66aa8acf-945a-47a6-a182-853b37709c3e' />。https://vingnirwu.github.io/tech-shrimp.github.io/post/lu-jing-xue-xi.htmlSun, 15 Mar 2026 14:01:24 +0000HTTP基础知识https://vingnirwu.github.io/tech-shrimp.github.io/post/HTTP-ji-chu-zhi-shi.html# http基础知识 ## 网页相关概念 网页是构成网站的基本元素，网页由声音、文字、图片等元素构成，俗称为HTML文件。https://vingnirwu.github.io/tech-shrimp.github.io/post/HTTP-ji-chu-zhi-shi.htmlSun, 15 Mar 2026 13:44:38 +0000测试https://vingnirwu.github.io/tech-shrimp.github.io/post/ce-shi.htmlhttps://vingnirwu.github.io/tech-shrimp.github.io/post/ce-shi.htmlWed, 07 Jan 2026 11:19:03 +0000