body
{
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(4 , 1fr);
grid-template-rows: 2.4vw 50vw 10vw;
grid-gap: 1em;
}
*::-webkit-scrollbar {
display: none;
}
header ,footer
{
grid-column: 1 / span 5;
}
main
{
grid-column: 1 / span 3;
}
aside
{
grid-column: span 2;
}
/* Demo Specific Styles */
body {
margin: 0;
padding: 1 em 0;
}
header, main,aside,footer
{
display: flex;
align-items: center;
}
/*styling nav*/
nav{
width: 100%;
color: rgb(238, 234, 232);
background-color: #ff4654;
text-align: center;
}
nav ul li a{
text-decoration: none;
color: #000;
}
nav ul li{
list-style-type: none;
height: 40px;
line-height: 40px;
background-color: #ff4654;
}
nav> ul{
display: flex;
justify-content: space-around;
text-align: center;
}
nav ul li ul li{
display: none;
}
nav> ul >li:hover ul li{
display: block;
}
nav ul li{
flex-basis: 20%;
}
nav ul li:hover {
background-color: thistle;
}
/*footer*/
footer
{
display: flex;
justify-content: space-around;
bottom: 0;
width: 100%;
background-color:rgb(16, 24, 35);
color:rgb(238, 234, 232);
}
footer ul
{
list-style-type: none;
}
footer .information
{
display: flex;
justify-content: space-evenly;
}
footer a
{
color:rgb(222, 214, 211);
}
/*ability*/
.abilitylist
{
min-width: 75%;
max-width: 100%;
background-color: #000;
}
.abilitylist li
{
display: inline-flex;
}
.abilitytekst
{
display: none;
border:1px solid #f1f1f1;
color:#f1f1f1 ;
}
.ability
{
flex-basis: 20%;
}
.ability img:hover + .abilitytekst
{
display: block;
}
.ability
{
display: block;
}
/*sidebar*/
.sidebar
{
background-color: rgb(16, 24, 35);
}
.sidebar__content
{
color: rgb(238, 234, 232);
}
.sidebar__content h1
{
font-size: 2em;
text-align: center;
}
/*Responsive*/
@media only screen and (max-width: 480px)
{
/*small devices smartphone*/
main,
aside
{
grid-column: 1 / span 5;
}
}<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width , initial-scale=1.0">
<meta name = "viewport" content ="heigth=device-height , initial-scale=1.0">
<link rel="stylesheet" href="css/Style2.css">
<link rel="icon" type="image/x-icon" href="img/valo_logo.ico" />
<title>sova</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Agents.html">Agents</a>
<ul>
<li><a href="Jett.html">Jett</a></li>
<li><a href="Sova.html">Sova</a></li>
<li><a href="Raze.html">Raze</a></li>
</ul>
</li>
<li><a href="overons.html">OverOns</a></li>
<li><a href="Contactformulier.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class = "abilitylist">
<ul class = "abilities">
<li class = "ability">
<img src = "img/sova/Sova_Q.png">
<div class = "abilitytekst">
Q-Shock Bolt EQUIP a bow with a shock bolt. FIRE to send the explosive forward,<br>
Rdetonating upon collision and damaging players nearby.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_E.png">
<div class = "abilitytekst">
E-Recon Bolt EQUIP a bow with a recon bolt. FIRE to send the recon bolt forward, activating upon collision<br>
and revealing the location of nearby enemies caught in the line of sight of the bolt.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.E-Tailwind INSTANTLY propel Jett in the direction she is moving.<br>
If Jett is standing still, she will propel forward.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_C.png">
<div class = "abilitytekst">
C-Owl Drone EQUIP an owl drone. FIRE to deploy and take control of movement of the drone.<br>
While in control of the drone, FIRE to shoot a marking dart. <br>
This dart will reveal the location of any player struck by the dart.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_X.png">
<div class = "abilitytekst">
X-Hunters Fury EQUIP a bow with three long-range wall-piercing energy blasts. FIRE to release an energy blast in a line<br>
in front of Sova, dealing damage and revealing the location of enemies<br>
caught in the line. This ability can be RE-USED up to two more times while the ability timer is active.
</div>
</li>
</ul>
</div>
</main>
<aside>
<div class="sidebar">
<div class="sidebar__content">
<span>
<h1>Sova</h1>
<img src="img/sova_avatar.jpg">
<h3>Role: Controller</h3>
<hr class = "lijn">
<h3>
Biography:<br>
Born from the eternal winter of Russia's tundra, Sova tracks, finds,
and eliminates enemies with ruthless efficiency and precision.
His custom bow and incredible scouting abilities ensure that even if you run, you cannot hide.
</h3>
</span>
</div>
</div>
</aside>
<footer class = "footer">
<div class = "Information">
<h1>Contact and Information</h1>
<ul>
<li><a href = "Contactformulier.html">Contact us</a></li>
<a href = "overons.html">About us</a>
<li></li>
</ul>
</div>
<div class = "agentsfooter">
<h1>Agent Guides</h1>
<ul>
<li><a href = "Jett.html">Jett guide</a></li>
<li><a href = "Raze.html">Raze guide</a></li>
<li><a href = "Sova.html">Sova guide</a></li>
</ul>
</div>
</footer>
</body>
</html>
答案 0 :(得分：0)
我仅在CSS（3 /*CHANGES*/）中进行了一些更改。
body
{
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(4 , 1fr);
grid-template-rows: 2.4vw 50vw 10vw;
grid-gap: 1em;
}
*::-webkit-scrollbar {
display: none;
}
header ,footer
{
grid-column: 1 / span 5;
}
main
{
grid-column: 1 / span 3;
}
aside
{
grid-column: span 2;
}
/* Demo Specific Styles */
body {
margin: 0;
padding: 1 em 0;
}
/*CHANGES*/
header, main
{
display: flex;
align-items: center;
}
/*styling nav*/
nav{
width: 100%;
color: rgb(238, 234, 232);
background-color: #ff4654;
text-align: center;
}
nav ul li a{
text-decoration: none;
color: #000;
}
nav ul li{
list-style-type: none;
height: 40px;
line-height: 40px;
background-color: #ff4654;
}
nav> ul{
display: flex;
justify-content: space-around;
text-align: center;
}
nav ul li ul li{
display: none;
}
nav> ul >li:hover ul li{
display: block;
}
nav ul li{
flex-basis: 20%;
}
nav ul li:hover {
background-color: thistle;
}
/*footer*/
footer
{
/*CHANGES*/
position: absolute;
bottom: 0px;
width: 100%;
background-color:rgb(16, 24, 35);
color:rgb(238, 234, 232);
display: flex;
justify-content: space-evenly;
}
footer ul
{
list-style-type: none;
}
/*CHANGES*/
footer div {
width: 45%;
}
footer a
{
color:rgb(222, 214, 211);
}
/*ability*/
.abilitylist
{
min-width: 75%;
max-width: 100%;
background-color: #000;
}
.abilitylist li
{
display: inline-flex;
}
.abilitytekst
{
display: none;
border:1px solid #f1f1f1;
color:#f1f1f1 ;
}
.ability
{
flex-basis: 20%;
}
.ability img:hover + .abilitytekst
{
display: block;
}
.ability
{
display: block;
}
/*sidebar*/
.sidebar
{
background-color: rgb(16, 24, 35);
}
.sidebar__content
{
color: rgb(238, 234, 232);
}
.sidebar__content h1
{
font-size: 2em;
text-align: center;
}
/*Responsive*/
@media only screen and (max-width: 480px)
{
/*small devices smartphone*/
main,
aside
{
grid-column: 1 / span 5;
}
}<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content="width=device-width , initial-scale=1.0">
<meta name = "viewport" content ="heigth=device-height , initial-scale=1.0">
<link rel="stylesheet" href="css/Style2.css">
<link rel="icon" type="image/x-icon" href="img/valo_logo.ico" />
<title>sova</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Agents.html">Agents</a>
<ul>
<li><a href="Jett.html">Jett</a></li>
<li><a href="Sova.html">Sova</a></li>
<li><a href="Raze.html">Raze</a></li>
</ul>
</li>
<li><a href="overons.html">OverOns</a></li>
<li><a href="Contactformulier.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<div class = "abilitylist">
<ul class = "abilities">
<li class = "ability">
<img src = "img/sova/Sova_Q.png">
<div class = "abilitytekst">
Q-Shock Bolt EQUIP a bow with a shock bolt. FIRE to send the explosive forward,<br>
Rdetonating upon collision and damaging players nearby.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_E.png">
<div class = "abilitytekst">
E-Recon Bolt EQUIP a bow with a recon bolt. FIRE to send the recon bolt forward, activating upon collision<br>
and revealing the location of nearby enemies caught in the line of sight of the bolt.<br>
HOLD FIRE to extend the range of the projectile.<br>
ALTERNATE FIRE to add up to two bounces to this arrow.E-Tailwind INSTANTLY propel Jett in the direction she is moving.<br>
If Jett is standing still, she will propel forward.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_C.png">
<div class = "abilitytekst">
C-Owl Drone EQUIP an owl drone. FIRE to deploy and take control of movement of the drone.<br>
While in control of the drone, FIRE to shoot a marking dart. <br>
This dart will reveal the location of any player struck by the dart.
</div>
</li>
<li class = "ability">
<img src = "img/sova/Sova_X.png">
<div class = "abilitytekst">
X-Hunters Fury EQUIP a bow with three long-range wall-piercing energy blasts. FIRE to release an energy blast in a line<br>
in front of Sova, dealing damage and revealing the location of enemies<br>
caught in the line. This ability can be RE-USED up to two more times while the ability timer is active.
</div>
</li>
</ul>
</div>
</main>
<aside>
<div class="sidebar">
<div class="sidebar__content">
<span>
<h1>Sova</h1>
<img src="img/sova_avatar.jpg">
<h3>Role: Controller</h3>
<hr class = "lijn">
<h3>
Biography:<br>
Born from the eternal winter of Russia's tundra, Sova tracks, finds,
and eliminates enemies with ruthless efficiency and precision.
His custom bow and incredible scouting abilities ensure that even if you run, you cannot hide.
</h3>
</span>
</div>
</div>
</aside>
<footer class = "footer">
<div class = "Information">
<h1>Contact and Information</h1>
<ul>
<li><a href = "Contactformulier.html">Contact us</a></li>
<a href = "overons.html">About us</a>
<li></li>
</ul>
</div>
<div class = "agentsfooter">
<h1>Agent Guides</h1>
<ul>
<li><a href = "Jett.html">Jett guide</a></li>
<li><a href = "Raze.html">Raze guide</a></li>
<li><a href = "Sova.html">Sova guide</a></li>
</ul>
</div>
</footer>
</body>
</html>
我认为该代码段不是测试此html代码的最佳方法，因此您也可以点击此链接https://codepen.io/zerbene/pen/mdERRjQ