Skip to content

Instantly share code, notes, and snippets.

@gustavomdsantos

gustavomdsantos/Chave de Acesso NF-e.html

Created September 18, 2018 16:44
Show Gist options
  • Save gustavomdsantos/a9fba1285e9b99d75bef66027aba82a5 to your computer and use it in GitHub Desktop.
Save gustavomdsantos/a9fba1285e9b99d75bef66027aba82a5 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
Chave de Acesso NF-e.html
<!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>
Display the source blob
Display the rendered blob
Raw
Chave de Acesso NF-e.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment