我已经建立了一个HTML起始页，可以根据您自己的意愿进行扩展.你们当中的专家肯定看到了很大的改进空间.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Menue</title>
<meta charset="utf-8" />
<style>
body { background:url(ff3.jpg) fixed; margin:0px; zoom:1.00; -moz-transform:scale(1.00); }
a:link { text-decoration:none; font-weight:normal; color:#3246ff; }
a:visited { text-decoration:none; font-weight:normal; color:#800000; }
a:hover { text-decoration:none; font-size:115%; color:#FFFFFF; background-color:#800000; border-radius: 80px !important; border:none!important; }
a:before { content: "» "; color:#000000; }
/* grid layout, 3 columns */
.wrapper {
display: grid; /* display: inline-grid;*/
grid-template-columns: 1fr 1fr 1fr; /* 3 x 1 fraction */
align-content:space-center;
justify-content:center;
margin-top: 50px;
}
:hover {
animation-play-state: paused;
}
.scroller {
width: 30px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
}
.example1 {
height: 80px;
color:#800000;
overflow: hidden;
position: relative;
}
.example1 h3 {
position: absolute;
width: 120%;
height: 90%;
margin: 0;
line-height: 90px;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<br><br>
<div style="display: table; width: 100%; height: 100px;">
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><img src="pag107.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center; vertical-align: middle;"><img src="pag107.gif"></figure>
<figure style="display: table-cell; padding: 0 4px; text-align: center;"><img src="pag37.gif"></figure>
</div>
<script>
var fullVersion = ''+parseFloat(navigator.appVersion);
var fullVersion = nAgt.substring(verOffset+8);
var vers = fullVersion
if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
</script>
<div class="example1">
<h3 style="font-size:22px">+++ Achim's Internetportal - Betriebssystem Linux Mint 19.3 mit Firefox Browser 99.0 in der 64 Bit-Version +++</h3> // Line 106!!!
</div>
</body>
</html>
<table border="5" cellspacing="5" bordercolor=#990000 height="420px" width="100%">
<tr style="font-family:Verdana; font-style:bold italic; font-size:16px;">
<td width="33%" valign="top">
<ul>
<a HREF="https://www.chip.de/" target="_blank">Chip - Online</a> Computer-Nachrichten «<br>
</ul>
</td>
<td width="33%" valign="top">
<ul>
<a HREF="https://www.linuxmintusers.de/" target="_blank">Linuxmintusers</a> Systemunterstützung «<br>
</ul>
</td>
<td width="33%" valign="top">
<ul>
<a HREF="https://www.tippscout.de/computer/linux" target="_blank">Tippscout</a> praktische Tipps zu Linux «<br>
</ul>
</td>
</tr>
</table>