Primeiro conhecimento de HTML (5) --- a ideia de componentização

Componentização

  Olá a todos, sou um código husky, estudante de engenharia de redes na Software College, porque sou um "cachorro" e posso comer carne por milhares de quilômetros. Quero compartilhar o que aprendi na faculdade e progredir com todos. Porém, devido ao nível limitado, inevitavelmente haverá alguns erros no blog. Se houver alguma omissão, por favor me avise! Por enquanto, atualize apenas na plataforma csdn, a homepage do blog: https://blog.csdn.net/qq_42027681 .

未经本人允许,禁止转载

Insira a descrição da imagem aqui

Neste artigo, vamos falar sobre a ideia de componentização. É
como nossas roupas. Não podemos usar um conjunto de uma vez (cuecas, calcinhas, meias, calças de algodão, jaquetas, etc.). Não podemos costurá-los e usá-los juntos. Agora
que você fez roupas bonitas, pode mostrá-las a outras pessoas para fazer roupas para referência. As roupas também podem ser tingidas e mudadas de tamanho.
A página da web que costumávamos praticar antes é para fazer várias roupas e costurá-las. Agora vamos desmontá-las. Faça separadamente, vista o que você quiser vestir, como você gosta de combinar e como combinar

<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>

Insira a descrição da imagem aqui
Todo mundo vai ficar muito confuso, porque essa coisa é assim
Da rede(foto da Internet)
Não se preocupe em fazer roupas

由于还没有将js本文主讲思想所以没有写js文件且css样式写在元素内 后面讲js会再提 (大佬勿喷)

Este é
Insira a descrição da imagem aqui
o arquivo index.html em minha estrutura de diretório my-button

<div style="width: 150px;height: 50px;line-height: 50px;background-color: teal;color: white;text-align: center;position: absolute;left: 0;top: 0;">点击</div>

arquivo index.html em meu menu

<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>

Através da página de entrada

<object data="文件所在路径" width="" height=""></object>

O controle de largura e altura introduzido aqui é a largura e altura do objeto

Foco

A ideia de componentização pode desenvolver nossa própria biblioteca de componentes para facilitar nosso desenvolvimento ou usar a biblioteca de componentes de outra pessoa para o desenvolvimento. Quando um elemento da mesma configuração é usado várias vezes, ele deve ser componentizado, reduzindo a confusão de código e parecendo simples

Você pode dar uma olhada em vant (terminal móvel e pequeno programa) elementui e outras bibliotecas de componentes de boa aparência

entrada Vant: manual
Vant elementui entrada: manual Elementui






Será lançado mais tarde

Front end: entrada js entrada vue miniaplicativo de desenvolvimento vue, etc.
Back end: entrada java entrada springboot, etc.
Servidor: servidor de entrada mysql instruções simples servidor nuvem para executar o projeto
python: recomendado não aquecer o fogo, certifique-se de ver
o uso de alguns plug-ins, etc.

O caminho da universidade também é em si mesmo, estudar muito, jovens
com paixão. Se você está interessado em programação, você pode se juntar ao nosso grupo qq para se comunicar: 974178910
Insira a descrição da imagem aqui

Se você tiver alguma dúvida, pode deixar uma mensagem abaixo, e eu responderei se você a vir

Acho que você gosta

Origin blog.csdn.net/qq_42027681/article/details/109605291
Recomendado
Clasificación