Wondershare EdrawMind
EdrawMindHTMLCSS
Galeria de mapas mentais HTMLCSS
- 3
HTMLCSS
A base comum de html e css, CSS são folhas de estilo em cascata, html é uma linguagem de marcação de hipertexto.
Editado em 2023-08-22 15:01:32- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
HTMLCSS
- Anévrisme intracrânien
Il s'agit d'une carte mentale sur les anévrismes intracrâniens, avec le contenu principal, notamment: le congé, l'évaluation d'admission, les mesures infirmières, les mesures de traitement, les examens auxiliaires, les manifestations cliniques et les définitions.
- Entretien de la comptabilité des coûts
Il s'agit d'une carte mentale sur l'entretien de comptabilité des coûts, le principal contenu comprend: 5. Liste des questions d'entrevue recommandées, 4. Compétences de base pour améliorer le taux de réussite, 3. Questions professionnelles, 2. Questions et réponses de simulation de scénarios, 1. Questions et réponses de capacité professionnelle.
- Méthode de recherche de littérature
Il s'agit d'une carte mentale sur les méthodes de recherche de la littérature, et son contenu principal comprend: 5. Méthode complète, 4. Méthode de traçabilité, 3. Méthode de vérification des points, 2. Méthode de recherche inversée, 1. Méthode de recherche durable.
- Recomendado para você
- Descrição
HTMLCSS
Conceitos CSS
folhas de estilo em cascata
Folhas de estilo em cascata
Sintaxe CSS
Comente
/* */
Seletor {propriedade:valor da propriedade;propriedade:valor da propriedade;propriedade:valor da propriedade;...propriedade:valor da propriedade;}
Seletores CSS comuns
básico
Rótulo
nome da tag{}
EU IA
Características
singularidade
#caixa{}
aula
Características
um para muitos
muitos para um
.vermelho{}
Pseudoclasse
:flutuar
:link
:ativo
:visitado
curinga
*
complexo
grupo
Seletor 1, Seletor 2,....{}
Incluir
Seletor 1 Seletor 2 ...{}
Especificamos
Seletor 1 Seletor 2...{}
Propriedades CSS comuns
texto
tamanho da fonte
cor
altura da linha
alinhamento de texto
espessura da fonte
audacioso
normal
isqueiro
mais ousado
estilo de fonte
normal
itálico
família de fontes
variante de fonte
normal
letras maiúsculas
recuo de texto
decoração de texto
sublinhado
sobrepor
passagem de linha
nenhum
transformação de texto
maiúsculas
minúscula
capitalizar
estouro de texto
espaçamento entre letras
espaçamento entre palavras
modelo de caixa
margem
Suporta método de quatro valores
Suporta definição de direção única
Suporta valores negativos
Imagens de fundo não são suportadas
Mesclagem verticalmente adjacente
Estouro da caixa pai: oculto
subcaixa flutuante
fronteira
Características
Imagem de fundo de suporte
Suporta direção única
O método de quatro valores não é compatível
cunha de fronteira
triângulo
borda: 100px sólido transparente;
cor da borda superior: vermelho;
altura:0;
largura:0;
Atributos
largura da borda
estilo de borda
sólido
linha sólida
tracejadas
linha tracejada
pontilhado
linha pontilhada
dobro
Linha dupla
Cor da borda
preenchimento
Suporta método de quatro valores
Suporta direção única
Imagem de fundo de suporte
Valores negativos não são suportados
A largura e a altura correspondentes precisam ser reduzidas (a caixa estranha não precisa disso)
contente
largura
altura
flutuador
flutuador
esquerda
certo
nenhum
claro
esquerda
certo
nenhum
ambos
Coloque-o em uma caixa que você não deseja que seja afetado pela flutuação
posição
relativamente
relativo
Características
Sem ocupação de espaço off-label
posição em relação a si mesmo
Pode ser usado para pequenos movimentos de posição
Objetos de referência que podem ser usados para posicionamento absoluto
absoluto
absoluto
Características
Off-label, sem espaço ocupado
Posicionamento relativo ao bloco contendo
Não escreva as coordenadas e deixe-as no lugar
O filho é completamente diferente do pai
fixo
fixo
Características
Posicionamento relativo da janela
Off-label, sem espaço ocupado
Não escreva as coordenadas e deixe-as no lugar
viscosidade
pegajoso
Características
Precisa ser usado em combinação com coordenadas
Equivalente a uma combinação de posicionamento relativo e posicionamento fixo
Sem ocupação de espaço off-label
estático
estático
Características
Sem ocupação de espaço off-label
Atributos de coordenadas não são suportados
Atributos hierárquicos não são suportados
tipo de elemento
Classificação
nível de bloco
linha exclusiva
Largura e altura configuráveis
A altura da linha pode suportar a altura
Depois de flutuar, será organizado horizontalmente
em linha
exibir em uma linha
Não é possível definir largura e altura
A altura da linha não pode suportar a altura
Você pode definir a largura e a altura após flutuar
recuo de texto não é suportado
Os atributos relacionados ao modelo de caixa não são suportados e são inválidos na direção vertical.
Converter
mostrar
bloquear
bloco embutido
em linha
nenhum
elemento oculto
item de lista
tipo de lista
célula-tabela
tipo de célula
aplicativo
Navegação de largura variável centralizada horizontalmente
ul{text-align:center}
li {display: bloco embutido;}
Uma linha centralizada, várias linhas à esquerda
.all {text-align:center;}
.all p {display: bloco embutido; alinhamento de texto à esquerda};
lacuna de imagem
img{exibição:bloco;
img{vertical-align:top/middle/bottom;}
.all{tamanho da fonte:0;}
Centralize a imagem verticalmente
Método 1
.all {altura:400px;altura da linha:400px;}
img{vertical-align:meio;}
Método 2
img{vertical-align:meio;}
span{vertical-align:meio;largura:0;altura:100%;display:bloco embutido}
Relacionado à tabela
espaçamento entre fronteiras
lacuna na moldura
colagem de borda
mesclagem de fronteira
layout de mesa
Layout de tabela fixo
valor
fixo
Layout de tabela fixo
auto
Layout de mesa automático
células vazias
Células sem conteúdo exibido
valor
esconder
Ocultar células sem conteúdo
mostrar
Nenhuma exibição de celular naquele dia
Relacionado ao histórico
cor de fundo
imagem de fundo
url();
fundo de repetição
repita
sem repetição
repetir-x
repetir
posição de fundo
Horizontal e vertical
pixels
%
superior direito inferior esquerdo
anexo de fundo
rolagem
caixa relativa
fixo
janela relativa
Lista relacionada
estilo de lista: nenhum
css3
seletor
básico
Rótulo
EU IA
aula
*
Hierarquia
Descendentes
(espaço)
filhos
>
irmãos vizinhos
Universal
~
Pseudoclasse
Pseudoclasse dinâmica
:flutuar
:link
:ativo
:visitado
:foco
Pseudoclasse estrutural
série infantil
:nésimo-filho()
:primeiro filho
:último filho
:filho único
:enésimo-último-filho()
Série Filho
:enésimo-do-tipo()
: primeiro do tipo
:último do tipo
:somente-do-tipo
:n-último-do-tipo()
:raiz
:vazio
:não()
negar pseudo-classe
:não
Pseudoclasse de linguagem
:lang
Pseudoclasse alvo
:alvo
Precisa ser usado em conjunto com links de âncora
colocar no alvo
Aquele com o id é o alvo
Pseudoclasse de estado do elemento UI
:desabilitado
:habilitado
:somente leitura
:ler escrever
:verificado
Atributos
[atributo]
[atributo = valor]
[atributo^=val]
[atributo$=valor]
[atributo*=valor]
[atributo~=val]
[atributo|=val]
Pseudoelementos (inline)
::depois de {conteúdo:""}
::antes de {conteúdo:""}
::primeira linha
::primeira carta
::seleção
Pesos
*
0,1
Rótulo
1
aula
10
Pseudoclasse
10
Atributos
10
EU IA
100
em linha
1000
!importante
10.000
Atributos
raio de canto
raio da fronteira
Sombra da caixa
Sombra da caixa
inserir
sombra interior
Para a direita
abaixo
grau de ambiguidade
Grau de expansão
cor da sombra
sombra de texto
sombra de texto
Para a direita
abaixo
grau de ambiguidade
deformação
transformar (2D)
traduzir()
girar()
escala()
inclinação()
transformar (3D)
Definir profundidade de campo
perspectiva
Definir tipo de deformação
estilo de transformação:preserve-3d;
Deformação 3D
traduzir3d
rotax
rotativo
rodar
escala3d
Defina o ponto inicial da deformação
origem da transformação
transição
transição
Gradiente
Gradiente linear
plano de fundo: gradiente linear (0 graus, # 000, # 000)
gradiente radial
background:radial-gradient(raio na posição, #000, #000)
Raio: maior/menor
Posição: x/y
Ladrilho gradiente linear
plano de fundo: gradiente linear de repetição (0deg, #000 5px, #000 10px)
Ladrilho gradiente radial
plano de fundo: gradiente radial de repetição (raio na posição, #000 5px, #000 10px)
animação
declaração de animação
nome dos @quadros-chave{}
chamada de animação
animação: nome .5s linear 0s alerta infinito forwords
Disposição
Layout de caixa flexível
recipiente
exibição: flexível
direção flexível
coluna
linha
coluna reversa
linha reversa
envoltório flexível
enrolar
sem embrulho
wrap-reverso
justificar-conteúdo
início flexível
extremidade flexível
Centro
espaço entre
espaço ao redor
espaço uniformemente
alinhar itens
esticar
início flexível
extremidade flexível
Centro
linha de base
alegn-content
esticar
início flexível
extremidade flexível
Centro
espaço entre
espaço ao redor
espaço uniformemente
projeto
flexionar
flexível-encolhível
crescimento flexível
base flexível
alinhar-se
esticar
início flexível
extremidade flexível
Centro
linha de base
ordem
layout de grade
recipiente
exibição: grade
colunas de modelo de grade
200px 200px 200px
20% 50% 30%
repetir (3.200px)
repetir (preenchimento automático, 20%)
1fr 1fr 1fr
1fr 1frr 1minmáx(200px,1fr)
linhas de modelo de grade
200px 200px 200px
20% 50% 30%
repetir (3.200px)
repetir (preenchimento automático, 20%)
lacuna na rede
lacuna entre linhas
lacuna de coluna
áreas de modelo de grade
justificar-conteúdo
alinhar conteúdo
justificar itens
alinhar itens
projeto
área de grade
coluna de grade
início da coluna da grade
final da coluna da grade
linha de grade
início da linha da grade
final da linha da grade
layout de várias colunas
colunas
colunas:5 200px;
contagem de colunas
largura da coluna
lacuna de coluna
regra de coluna
extensão da coluna
preenchimento de coluna
Inquéritos da mídia
<link mate="tela e (largura mínima:960px) e (largura máxima:1200px)">
Tela @media e (largura mínima: 960px) e (largura máxima: 1200px)
modelo de caixa
dimensionamento de caixa
caixa de fronteira
modelo de caixa estranho
Características
borda de preenchimento dentro da largura e altura
caixa de conteúdo
modelo de caixa padrão
Características
largura altura não inclui borda de preenchimento
compatível
contente
Tridente
lagartixa
Webkit
Piscar
Presto
prefixo
-moz-
-EM-
-webkit-
-o-
O termo
aprimoramento progressivo
Primeiro baixo e depois alto, focando na realização das funções da versão baixa e adicionando efeitos interessantes à versão alta
Downgrade elegante
Primeiro alto e depois baixo, focando nos efeitos das funções da versão alta e precisa lidar com a compatibilidade das versões baixas
outro
Ícone de fonte
http://www.iconfont.cn
link âncora
<a href="#one"></a>
Pular
<a name="um"></a>
<div id="um"></div>
Método de centralização
posição
Método 1
caixa pai
posição:relativo;
subcaixa
posição:absoluta;
superior:50%;
esquerda:50%;
margem esquerda: meia largura;
margem superior: meia altura;
margem:automático
Método 2
caixa pai
posição:relativo;
subcaixa
posição:absoluta;
topo:0;
inferior:0;
esquerda:0;
certo:0;
margem:automático
Método 3
caixa pai
posição:relativo;
subcaixa
posição:absoluta;
topo:calc(50% - metade superior);
esquerda:calc(50% - metade da largura);
Método 4
caixa pai
posição:relativo;
subcaixa
posição:absoluta;
superior:50%;
esquerda:50%;
traduzir(-50%,-50%);
Caixa flexível
Método 1
caixa pai
exibição:flexível;
subcaixa
margem:automático;
Método 2
caixa pai
displayflex;
justificar-conteúdo:centro;
alinhar itens: centro;
Método 3
caixa pai
exibição:flexível;
justificar-conteúdo:centro;
subcaixa
alinhar-se:centro
grade
Método 1
caixa pai
exibição: grade;
justificar-conteúdo:centro;
alinhar-conteúdo:centro;
Método 2
caixa pai
exibição: grade;
subcaixa
margem:automático;
bloqueio intracarreira
Método 1
caixa pai
altura da linha: alta;
alinhamento de texto:centro;
caixa pai
display: bloco embutido;
alinhamento vertical: meio;
altura da linha: alta;
Método 2
caixa pai
alinhamento de texto:centro;
subcaixa
display: bloco embutido;
alinhamento vertical: meio;
Pseudoelemento da caixa pai::after
contente:"";
display: bloco embutido;
alinhamento vertical: meio;
largura:0;
altura:100%;
Método 3
caixa pai
alinhamento de texto:centro;
alinhamento vertical: meio;
display: célula-tabela;
subcaixa
display: bloco embutido;
Centralizar verticalmente o texto de várias linhas
caixa pai
alinhamento vertical: meio;
display: célula-tabela;
segmento de código
Elipse
Largura fixa
largura
Sem quebras de linha
espaço em branco:nowrap;
estouro oculto
estouro: oculto
Elipse
estouro de texto: reticências
Layout móvel
janela de exibição
Janela de visualização, o padrão móvel é 980
dpr
Proporção de pixels do dispositivo
Disposição
Layout percentual
Layout de escala
unidade
eles
Um múltiplo de si mesmo ou do tamanho da fonte da caixa pai
rem
Múltiplo tamanho de fonte raiz (html)
vw
Um por cento da largura da janela de visualização
vh
Um por cento da altura da janela de visualização
vmin
um por cento do lado curto
vmax
Um por cento do lado longo
BFC
Propriedades acionáveis
flutuador
esquerda
certo
transbordar
escondido
rolagem
auto
posição
absoluto
fixo
mostrar
bloco embutido
célula-tabela
legenda da tabela
flexionar
aplicativo
problema de penetração na margem superior
problema de colapso de altura
Largura e altura adaptáveis
Conteúdo adaptável à largura
flutuador
posição
bloco embutido
Conteúdo altamente adaptável
altamente desmoronado
A caixa filha flutua e a altura da caixa pai é 0.
resolver
altura fixa
vantagem
Simples
deficiência
Incapaz de se adaptar
Adicione overflow:hidden à caixa pai
vantagem
Adaptável
deficiência
estouro oculto
Adicione uma caixa vazia abaixo do float e defina clear:both;
vantagem
Pode ser adaptativo
Ocultar sem transbordar
deficiência
Precisa carregar mais uma caixa
Método clear float universal, adicione::after{content:"";display:block;clear:both;} à caixa pai
vantagem
Adaptável
estouro de problema oculto
Não há necessidade de carregar uma caixa extra
janela adaptativa de altura
html,corpo{altura:100%;}
HTML5
Características
A estrutura básica é mais simples
relaxamento gramatical
Semântica de rótulo
Mesmo sem estilos, uma estrutura clara pode ser apresentada
Fácil para SEO
Facilita o trabalho em equipe e a modificação pós-manutenção do código
acessibilidade
recursos futuros
Adicione tags semânticas
grande semântica
cabeçalho
rodapé
principal
navegação
seção
artigo
aparte
pequena semântica
figura
figcaption
marca
tela
vídeo
Atributos
controles
Reprodução automática
silenciado
laço
fonte
Formatos suportados
mp4
meu Deus
webm
largura
altura
áudio
Atributos
controles
Reprodução automática
silenciado
laço
fonte
Formatos suportados
mp3
meu Deus
wav
detalhes
resumo
fonte
formulário inteligente
Adicionar novos atributos
obrigatório
Os campos obrigatórios
auto-foco
auto-foco
espaço reservado
Espaço reservado
autocompletar
Se deve ativar a gravação do histórico
valor
sobre
desligado
padrão
Verificação regular
Adicionar novo controle
telefone
url
número
min
máx.
etapa
faixa
min
máx.
etapa
cor
procurar
data
mês
semana
tempo
datatime-local
tags comuns html
Classe de texto
título
h1
Geralmente usado para colocar logotipos
h2
Geralmente usado para colocar títulos de colunas
h3
h4
h5
h6
parágrafo
p
Classe de modificação
Audacioso
b
forte
Semântica forte
inclinar
eu
eles
Semântica forte
Sublinhado
você
ins
Semântica forte
tachado
é
del
Semântica forte
sobrescrito e subscrito
e aí?
sobrescrito
sub
subscrito
Classe de mesa
Rótulo
mesa
tr
td
º
Cabeçalho da coluna
rubrica
título da tabela
agrupamento de linhas
cabeça
corpo
pé
agrupamento de colunas
grupo de grupos
Atributos
regras
Linha divisória do grupo
valor
todos
colunas
linhas
nenhum
grupos
largura
altura
fronteira
bgcolor
alinhar
alinhamento horizontal
valor
esquerda
certo
Centro
valignar
Alinhamento vertical
valor
principal
meio
fundo
linha de base
colspan
Expansão de linha
espaçamento entre células
preenchimento de células
Classe de formulário
campos de formulário
forma
método
Método de envio
valor
pegar
não é seguro
Compartilhável
Processar dados com menos de 2 KB
Afetado pelo comprimento da barra de endereço
eficiente
O processo de obtenção de dados
publicar
O processo de transferência de dados
Sem limite de tamanho
relativamente seguro
baixa eficiencia
Não compartilhável
Ação
endereço de destino
valor
(endereço saltado)
nome
alvo
Método aberto
valor
_em branco
abrir em uma nova janela
_auto
A janela atual está aberta
controle de formulário (tipo)
texto
texto
senha
senha
Escolha única
rádio
Cada grupo precisa ter o mesmo valor de atributo de nome
Múltipla escolha
caixa de seleção
suspenso
selecione>opção
campo de texto
área de texto
botão
imagem
botão
enviar
reiniciar
arquivo
Propriedades relacionadas
nome
nome
valor
valor
múltiplo
Múltipla escolha
verificado
Verificado por padrão
selecionado
Menu suspenso marcado por padrão
somente leitura
somente leitura
desabilitado
Desativar
Listar classe
ordenadamente
ol>li
Atributos
tipo
valor
1
a
A
eu
EU
começar
transtorno
ul>li
Atributos
tipo
valor
círculo
disco
quadrado
nenhum
customizar
dl>dt dd
dependente do caminho
foto
imagem
Atributos
scr
título
alternativo
largura
altura
Hiperlink
a
Atributos
href
título
alvo
caminho
relativamente
Mesmo nível
./
Escreva diretamente
nível superior
../
próximo nível
pasta
documento
absoluto
Começando pela letra da unidade
D:\......
usado em páginas da web
https://img….
a diferença
relativamente
Há uma referência
Não é possível cruzar letras de unidade
absoluto
sem referência
Os locais não podem abranger computadores (a menos que os caminhos nos computadores sejam os mesmos)
outro
br
forçar quebra de linha
horas
linha horizontal
divisão
período
entidade de personagem
>
<
©
®
gramática
etiqueta dupla
<nome da tag atributo="valor do atributo"></nome da tag>
rótulo único
<nome da tag atributo="valor do atributo" />
rótulo, marca, elemento
estrutura básica HTML
Cabeçalho da declaração do documento
Diga ao navegador que meu tipo de documento é html
Codificação de caracteres
conjunto de caracteres = "utf-8"
título da página
título
conceito HTML
Linguagem de marcação de hipertexto
Linguagem de marcação de hipertexto