53 lines
1.7 KiB
HTML
53 lines
1.7 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; }
|
|
.wrap { display: flex; gap: 36px; align-items: flex-start; }
|
|
.col { display: flex; flex-direction: column; gap: 4px; }
|
|
h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
|
|
.box {
|
|
border: 2px solid #4a4a6a;
|
|
padding: 10px 20px;
|
|
min-width: 230px;
|
|
font-size: 0.95rem;
|
|
background: #f3f4f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
}
|
|
.osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
|
|
.tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
|
|
.tcpip .app { min-height: 126px; }
|
|
.tcpip .trans { min-height: 40px; }
|
|
.tcpip .net { min-height: 40px; }
|
|
.tcpip .link { min-height: 82px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="col osi">
|
|
<h3>OSI (7 Schichten)</h3>
|
|
<div class="box">7. Anwendung</div>
|
|
<div class="box">6. Darstellung</div>
|
|
<div class="box">5. Sitzung</div>
|
|
<div class="box">4. Transport</div>
|
|
<div class="box">3. Vermittlung</div>
|
|
<div class="box">2. Sicherung</div>
|
|
<div class="box">1. Bitübertragung</div>
|
|
</div>
|
|
<div class="col tcpip">
|
|
<h3>TCP/IP (4 Schichten)</h3>
|
|
<div class="box app">Anwendung</div>
|
|
<div class="box trans">Transport</div>
|
|
<div class="box net">Internet</div>
|
|
<div class="box link">Netzzugang</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|