Created
September 18, 2018 16:44
-
-
Save gustavomdsantos/a9fba1285e9b99d75bef66027aba82a5 to your computer and use it in GitHub Desktop.
Chave de Acesso NF-e: Ilustração feita em HTML que mostra o conjunto de 44 dígitos que identificam univocamente uma NF-e derivados.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Chave de Acesso NF-e</title> | |
<style type="text/css"> | |
.container { | |
display: flex; | |
flex-direction: column; | |
font-family: Arial, sans-serif; | |
width: 100%; | |
} | |
.pedaco { | |
padding: 2px 5px; | |
font-weight: bold; | |
min-width: 1em; | |
} | |
.UF { | |
background-color: #BBDEFB; | |
border: 2px solid #1565C0; | |
} | |
.anoEMes { | |
background-color: #FFCDD2; | |
border: 2px solid #C62828; | |
} | |
.CNPJEmitente { | |
background-color: #F0F4C3; | |
border: 2px solid #9E9D24; | |
} | |
.modelo { | |
background-color: #FFE0B2; | |
border: 2px solid #EF6C00; | |
} | |
.serie { | |
background-color: #D1C4E9; | |
border: 2px solid #673AB7; | |
} | |
.numero { | |
background-color: #FFF9C4; | |
border: 2px solid #F9A825; | |
} | |
.codigoDeAcesso { | |
background-color: #F8BBD0; | |
border: 2px solid #AD1457; | |
} | |
.digitoVerificador { | |
background-color: #C8E6C9; | |
border: 2px solid #2E7D32; | |
} | |
.tabelaLegenda { | |
display: flex; | |
width: 520px; | |
justify-content: space-between; | |
margin: 20px 8px; | |
} | |
.celula { | |
display: flex; | |
flex-direction: row; | |
margin: 1em 0px; | |
} | |
.celula > * { | |
margin: 0px 8px; | |
} | |
.legenda { | |
font-size: 10pt; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<h1>Chave de Acesso NF-e</h1> | |
<div class="exemploChaveAcesso"> | |
<span class="pedaco UF">00</span> | |
<span class="pedaco anoEMes">0000</span> | |
<span class="pedaco CNPJEmitente">00000000000000</span> | |
<span class="pedaco modelo">00</span> | |
<span class="pedaco serie">000</span> | |
<span class="pedaco numero">000000000</span> | |
<span class="pedaco codigoDeAcesso">000000000</span> | |
<span class="pedaco digitoVerificador">0</span> | |
</div> | |
<div class="tabelaLegenda"> | |
<div class="coluna" id="coluna1"> | |
<div class="celula"> | |
<span class="pedaco UF"></span> | |
<div class="legenda"><b>UF</b> 🡲 02 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco anoEMes"></span> | |
<div class="legenda"><b>Ano e Mês</b> 🡲 04 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco CNPJEmitente"></span> | |
<div class="legenda"><b>CNPJ Emitente</b> 🡲 14 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco modelo"></span> | |
<div class="legenda"><b>Modelo</b> 🡲 02 dígitos</div> | |
</div> | |
</div> | |
<div class="coluna" id="coluna2"> | |
<div class="celula"> | |
<span class="pedaco serie"></span> | |
<div class="legenda"><b>Série</b> 🡲 03 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco numero"></span> | |
<div class="legenda"><b>Número</b> 🡲 09 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco codigoDeAcesso"></span> | |
<div class="legenda"><b>Código de Acesso</b> 🡲 09 dígitos</div> | |
</div> | |
<div class="celula"> | |
<span class="pedaco digitoVerificador"></span> | |
<div class="legenda"><b>Dígito Verificador</b> 🡲 01 dígito</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment