[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-s3u3u8W7":3,"public-project-articles-s3u3u8W7":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},34,"s3u3u8W7",39,"01. 网页布局技巧","\n## 一个实战的案例\n[http:\u002F\u002F124.222.171.20:82\u002F](http:\u002F\u002F124.222.171.20:82\u002F)\n\n\n## 菜鸟教程\nHtml教程：[https:\u002F\u002Fwww.runoob.com\u002Fhtml\u002Fhtml-tutorial.html](https:\u002F\u002Fwww.runoob.com\u002Fhtml\u002Fhtml-tutorial.html)\nCss教程：[https:\u002F\u002Fwww.runoob.com\u002Fcss\u002Fcss-tutorial.html](https:\u002F\u002Fwww.runoob.com\u002Fcss\u002Fcss-tutorial.html)\nVue教程：[https:\u002F\u002Fwww.runoob.com\u002Fvue2\u002Fvue-tutorial.html](https:\u002F\u002Fwww.runoob.com\u002Fvue2\u002Fvue-tutorial.html)\n## Html\n\n- **div**\n- span\n- h1-h6\n- i\n- strong\n- a\n- img\n- video\n- input\n- textarea\n- button\n## CSS布局思路\n```json\n* {\n  box-sizing: border-box;\n}\n```\n\n1. 盒子模型\n   1. 外边距 margin  上右下左\n   2. 内边距 padding  上右下左\n   3. 边框 border  上右下左  **solid ** **dashed   (border: 1px dashed black)**\n   4. 阴影  box-shadow: h-shadow v-shadow blur spread color inset; ( box-shadow: 0 0 10px -2px rgba(0,0,0,.5); )\n   5. 边角  box-radius  上右下左\n   6. 内容\n      1. **css换行**： word-wrap: break-word;\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1690812518034-701201cf-29ea-452c-8a36-ee17a10d63b0.png#averageHue=%23fcf1f0&clientId=u5ac715e5-1b8c-4&from=paste&height=103&id=udca9ccc0&originHeight=129&originWidth=1858&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=25957&status=done&style=none&taskId=u0ca8a176-b1ff-4638-9f14-7e158f09e4f&title=&width=1486.4)\n\n2. Flex布局 [https:\u002F\u002Fwww.runoob.com\u002Fw3cnote\u002Fflex-grammar.html](https:\u002F\u002Fwww.runoob.com\u002Fw3cnote\u002Fflex-grammar.html)\n   1. flex-direction   **row **   **column**\n   2. flex-wrap   **wrap** \n   3. justify-content   **flex-start | flex-end | center | space-between | space-around**\n   4. align-items：**flex-start | flex-end | center | baseline | stretch**\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1690814094709-4256515e-13a9-4980-aa9b-dbd851a5a1b0.png#averageHue=%23edecec&clientId=u5ac715e5-1b8c-4&from=paste&height=97&id=u11d53bd0&originHeight=121&originWidth=1415&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=13634&status=done&style=none&taskId=u3b0bd1a8-818a-424c-a4a7-bbb7995e851&title=&width=1132)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1690814219116-fdc96c3f-94be-43c8-be1b-fe166d1c1e43.png#averageHue=%23dae6d7&clientId=u5ac715e5-1b8c-4&from=paste&height=313&id=u608e0802&originHeight=391&originWidth=1390&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=323197&status=done&style=none&taskId=u376d61b1-4d29-447b-8592-50e6b06d6a1&title=&width=1112)\n## CSS布局元素\n\n1. 宽度 width\n   1. 固定宽度  百分比宽度\n   2. 最大宽度\n   3. 最小宽度\n   4. 水平居中  margin: auto\n2. 高度  height\n   1. **固定高度 （必须）**\n   2. 最大高度\n   3. 最小高度\n   4. 行高对齐  line-height\n3. 字体\n   1. 颜色  color  **十六进制、rgb、英文**\n   2. 大小  font-size\n   3. 粗细  font-weight  **bold**\n4. 背景\n   1. [https:\u002F\u002Fcolor.d777.com\u002F](https:\u002F\u002Fcolor.d777.com\u002F)\n   2. 颜色  background-color\n   3. 图片 background-img: url(...)\n5. 定位position\n   1. absolute  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位\n   2. **relative ** 生成相对定位的元素，相对于其正常位置进行定位  （**上下移动行内元素最简单的方式）**\n   3. fixed  生成固定定位的元素，相对于浏览器窗口进行定位\n6. overflow: hidden  scroll\n","coding",1,3326,56,"2025-04-08 11:28:13","2026-05-03 22:49:02","【青哥带小白做毕设2024】完整教程资料汇总","qingge-graduation-project-2024",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,28,29,36,43,50,57,63,70,77,84,91,98,105,112,119,126,133,140,147,154,161,168],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":27,"project_title":15,"project_slug":16},33,"R1oMCsCX","00. 从0开始带小白做SpringBoot+Vue+uniapp微信小程序实战项目",12130,55,"2025-04-08 11:28:17","2026-05-07 15:33:28.189425+00",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":30,"uuid":31,"project_id":6,"title":32,"type":9,"status":10,"public_enabled":10,"views":33,"sort":34,"created_at":35,"updated_at":14,"project_title":15,"project_slug":16},35,"21zUHQYS","02. JavaScript入门",2017,57,"2025-04-08 11:27:55",{"id":37,"uuid":38,"project_id":6,"title":39,"type":9,"status":10,"public_enabled":10,"views":40,"sort":41,"created_at":42,"updated_at":14,"project_title":15,"project_slug":16},36,"4XVgY9Ti","03. Vue脚手架搭建",3719,58,"2025-04-08 11:27:46",{"id":44,"uuid":45,"project_id":6,"title":46,"type":9,"status":10,"public_enabled":10,"views":47,"sort":48,"created_at":49,"updated_at":14,"project_title":15,"project_slug":16},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":51,"uuid":52,"project_id":6,"title":53,"type":9,"status":10,"public_enabled":10,"views":54,"sort":55,"created_at":56,"updated_at":14,"project_title":15,"project_slug":16},38,"9EbwnGDp","05. 网页布局神器ElementUI速成",2670,60,"2025-04-08 11:27:37",{"id":6,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},"tmzahWer","06. Vue管理系统速成",3744,61,"2025-04-08 11:27:32",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},40,"2agqAUQK","07. SpringBoot速成",3654,62,"2025-04-08 11:27:27",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},41,"SXPAzgy7","08. Http扫盲，让小白也能听懂",2337,63,"2025-04-08 11:27:20",{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},42,"ostBIxAV","09. SpringBoot集成Mybatis实现增删改查",4190,64,"2025-04-08 11:27:13",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},43,"6Sv7afpa","10. Vue封装前后端数据交互工具",3716,65,"2024-04-16 02:33:13",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},44,"d53BPIQs","11. Vue登录（含验证码）、注册页面开发",4867,66,"2024-04-16 02:33:08",{"id":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},45,"m033ng06","12. SpringBoot集成JWT token实现权限验证",3243,67,"2024-04-16 02:33:00",{"id":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},46,"7xzyVD06","13. SpringBoot+Vue实现单文件、多文件上传和下载",2784,68,"2024-04-16 02:32:52",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},47,"BdOLUenp","14. 多角色登录（Vue-Router路由守卫）",2318,69,"2024-04-16 02:32:39",{"id":120,"uuid":121,"project_id":6,"title":122,"type":9,"status":10,"public_enabled":10,"views":123,"sort":124,"created_at":125,"updated_at":14,"project_title":15,"project_slug":16},48,"2Wkx3igg","15. Vue个人信息修改、修改密码、重置密码",2092,70,"2024-04-16 02:32:33",{"id":127,"uuid":128,"project_id":6,"title":129,"type":9,"status":10,"public_enabled":10,"views":130,"sort":131,"created_at":132,"updated_at":14,"project_title":15,"project_slug":16},49,"BDvVa4By","16. SpringBoot+Vue管理系统实现增删改查",2598,71,"2024-04-16 02:32:29",{"id":134,"uuid":135,"project_id":6,"title":136,"type":9,"status":10,"public_enabled":10,"views":137,"sort":138,"created_at":139,"updated_at":14,"project_title":15,"project_slug":16},50,"FJVl0rCu","17. SpringBoot+Vue实现数据的批量导入和导出",1684,72,"2024-04-16 02:32:26",{"id":141,"uuid":142,"project_id":6,"title":143,"type":9,"status":10,"public_enabled":10,"views":144,"sort":145,"created_at":146,"updated_at":14,"project_title":15,"project_slug":16},51,"FvW9oHgj","18. SpringBoot+Vue项目部署上线",2845,73,"2024-04-16 02:32:22",{"id":148,"uuid":149,"project_id":6,"title":150,"type":9,"status":10,"public_enabled":10,"views":151,"sort":152,"created_at":153,"updated_at":14,"project_title":15,"project_slug":16},52,"xyqrxxiR","19. SpringBoot+Vue集成富文本编辑器",1499,74,"2024-04-16 02:32:18",{"id":155,"uuid":156,"project_id":6,"title":157,"type":9,"status":10,"public_enabled":10,"views":158,"sort":159,"created_at":160,"updated_at":14,"project_title":15,"project_slug":16},53,"XAaCXz8W","20. SpringBoot+Vue集成系统公告",1043,75,"2024-04-16 02:32:14",{"id":162,"uuid":163,"project_id":6,"title":164,"type":9,"status":10,"public_enabled":10,"views":165,"sort":166,"created_at":167,"updated_at":14,"project_title":15,"project_slug":16},54,"2havlmaC","21. SpringBoot+Vue集成AOP系统日志",1159,76,"2024-04-16 02:32:11",{"id":25,"uuid":169,"project_id":6,"title":170,"type":9,"status":10,"public_enabled":10,"views":171,"sort":172,"created_at":173,"updated_at":14,"project_title":15,"project_slug":16},"ObvLqJdX","22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）",1688,99,"2024-04-16 02:30:25"]