初识HTML(五)---组件化思想
组件化思想
大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。
未经本人允许，禁止转载
本文我们来聊聊组件化思想
好比我们的衣服 我们总不能一下子穿一套(内衣，内裤，袜子，棉裤，外套等等，我们总不能缝在一起穿吧，这样就只有这一套搭配了)
而且你做出来好看的衣服了，可以拿给别人去参考做衣服，衣服还可以染色改变大小啥的
我们之前练习的网页都是一下做好多件衣服缝在一起穿，现在我们来拆开分别制作，想穿什么穿什么，爱怎么搭配怎么搭配
<html><head><meta charset="utf-8"><title></title></head><body><object data="./my-menu/index.html" width="500px" height="50px"></object><object data="./my-button/index.html"></object></body></html>
大家会很疑惑，这玩意怎么就这样了
(图片来自网络)
不要着急 做衣服去
由于还没有将js本文主讲思想所以没有写js文件且css样式写在元素内 后面讲js会再提 （大佬勿喷）
这是我的目录结构
my-button下的index.html文件
<div style="width: 150px;height: 50px;line-height: 50px;background-color: teal;color: white;text-align: center;position: absolute;left: 0;top: 0;">点击</div>
my-menu下的index.html文件
<div style="width: 500px;height: 50px;line-height: 50px;background-color: black;color: white;position: absolute;left: 0;top: 0;"><li style="list-style: none;float: left;position: relative;left: 50px;">首页</li><li style="list-style: none;float: left;position: relative;left: 150px;">介绍</li><li style="list-style: none;float: left;position: relative;left: 250px;">联系</li></div>
通过在入口页面
<object data="文件所在路径" width="宽" height="高"></object>
来引入 这里的宽高控制的是object宽高
重点
组件化思想能开发我们自己的组件库方便我们开发，也可以拿别人的组件库去开发，一个同样配置的元素多次使用时就要组件化，减少代码杂乱看着也简洁
大家可以看看vant(移动端以及小程序) elementui等好看的组件库
vant入口 :vant手册
elementui入口 :elementui手册
后续会推出
前端：js入门 vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会回复哦
爱被打了一巴掌
向右看齐
╰+哭是因爲堅強的太久メ
野性酷女
浅浅的花香味﹌
系统管理员
港控/mmm°
还没有评论，来说两句吧...