初识HTML(五)---组件化思想

   日期:2020-11-11     浏览:165    评论:0    
核心提示:组件化思想本文我们来聊聊组件化思想好比我们的衣服 我们总不能一下子穿一套(内衣,内裤,袜子,棉裤,外套等等,我们总不能缝在一起穿吧,这样就只有这一套搭配了)而且你做出来好看的衣服了,可以拿给别人去参考做衣服,衣服还可以染色改变大小啥的我们之前练习的网页都是一下做好多件衣服缝在一起穿,现在我们来拆开分别制作,想穿什么穿什么,爱怎么搭配怎么搭配<html> <head> <meta charset="utf-8"> <title></ti

组件化思想

  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!暂时只在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

有问题可以下方留言,看到了会回复哦

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服