76 lines
2.3 KiB
HTML
76 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OSI vs TCP/IP</title>
|
|
<style>
|
|
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
|
|
body { padding: 30px 40px; display: inline-block; }
|
|
.headers {
|
|
display: grid;
|
|
grid-template-columns: 240px 240px;
|
|
column-gap: 36px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.headers h3 { margin: 0; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 240px 240px;
|
|
grid-template-rows: repeat(7, 48px);
|
|
column-gap: 36px;
|
|
row-gap: 6px;
|
|
}
|
|
.box {
|
|
border: 2px solid #4a4a6a;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.95rem;
|
|
text-align: center;
|
|
padding: 0 12px;
|
|
}
|
|
.osi {
|
|
background: #dbeafe;
|
|
border-color: #1e40af;
|
|
color: #1e3a8a;
|
|
}
|
|
.tcpip {
|
|
background: #fce7d6;
|
|
border-color: #c2410c;
|
|
color: #7c2d12;
|
|
font-weight: 600;
|
|
}
|
|
/* OSI: column 1, one box per row */
|
|
.o7 { grid-area: 1 / 1; } .o6 { grid-area: 2 / 1; } .o5 { grid-area: 3 / 1; }
|
|
.o4 { grid-area: 4 / 1; } .o3 { grid-area: 5 / 1; } .o2 { grid-area: 6 / 1; }
|
|
.o1 { grid-area: 7 / 1; }
|
|
/* TCP/IP: column 2, each block spans its OSI equivalents */
|
|
.t-app { grid-area: 1 / 2 / 4 / 2; } /* OSI 5-7 */
|
|
.t-tra { grid-area: 4 / 2 / 5 / 2; } /* OSI 4 */
|
|
.t-net { grid-area: 5 / 2 / 6 / 2; } /* OSI 3 */
|
|
.t-link { grid-area: 6 / 2 / 8 / 2; } /* OSI 1-2 */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="headers">
|
|
<h3>OSI (7 Schichten)</h3>
|
|
<h3>TCP/IP (4 Schichten)</h3>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="box osi o7">7. Anwendung</div>
|
|
<div class="box osi o6">6. Darstellung</div>
|
|
<div class="box osi o5">5. Sitzung</div>
|
|
<div class="box osi o4">4. Transport</div>
|
|
<div class="box osi o3">3. Vermittlung</div>
|
|
<div class="box osi o2">2. Sicherung</div>
|
|
<div class="box osi o1">1. Bitübertragung</div>
|
|
|
|
<div class="box tcpip t-app">Anwendung</div>
|
|
<div class="box tcpip t-tra">Transport</div>
|
|
<div class="box tcpip t-net">Internet</div>
|
|
<div class="box tcpip t-link">Netzzugang</div>
|
|
</div>
|
|
</body>
|
|
</html>
|