我的网页的宽度扩展了。有什么方法可以使它变得更小？

发布于 2025-02-13 05:33:22 字数 1597 浏览 1 评论 0原文

因此，当我为网页制作标题时，由于某种原因，该网页的宽度扩展了。我尝试了一些方法来缩小它，但我没有成功。在下面，我链接了一个Codepen，您可以滚动，您会看到我创建的标头的纯白色权利。

https://codepen.io/blurfnes/pen/pen/pen/kkovggby

<!DOCTYPE html>
<html>
<head>
    <title>Hyard - 2022 Based Programming group</title>
    <link rel="stylesheet" href="index.css">

<div class="header">
    <a href="index">
    <img src="images/logo.png" alt="head-logo" height="200" width="200" />
<div>
    <nav class="mainnav">
        <ul>
            <li><a href="projects/selector">Projects</a></li>
            <li><a href="en/about">About</a></li>
            <li><a href="en/versions">Versions</a></li>
        </ul>
        </nav>
    </div>
</div>


</head>
<body>

</body>
</html>

    .header {
    background-color: aqua;
    width: 1440px;
    margin-top: -8px;
    margin-left: -8px;
    margin-right: -8px;
    }
    .mainnav ul {
    position: relative;
    left: 450px;
    font-size: 50px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
    top: -175px;
    }

    .mainnav ul li {
    color: gray;
    text-decoration: none;
    display: inline-table;
    }

    .mainnav ul a {
    color: gray;
    text-decoration: none;
    }

    .mainnav ul a:hover {
    color: black;
    }

感谢您的帮助！

原文

So as I was making a header for my webpage the width of the webpage extended for some reason. I tried some ways of shrinking it but I was unsuccessful. Below I have linked a codepen you can just scroll and you will see just plain white right of the header that I have created.

https://codepen.io/blurfnes/pen/KKoVgby

<!DOCTYPE html>
<html>
<head>
    <title>Hyard - 2022 Based Programming group</title>
    <link rel="stylesheet" href="index.css">

<div class="header">
    <a href="index">
    <img src="images/logo.png" alt="head-logo" height="200" width="200" />
<div>
    <nav class="mainnav">
        <ul>
            <li><a href="projects/selector">Projects</a></li>
            <li><a href="en/about">About</a></li>
            <li><a href="en/versions">Versions</a></li>
        </ul>
        </nav>
    </div>
</div>


</head>
<body>

</body>
</html>

    .header {
    background-color: aqua;
    width: 1440px;
    margin-top: -8px;
    margin-left: -8px;
    margin-right: -8px;
    }
    .mainnav ul {
    position: relative;
    left: 450px;
    font-size: 50px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
    top: -175px;
    }

    .mainnav ul li {
    color: gray;
    text-decoration: none;
    display: inline-table;
    }

    .mainnav ul a {
    color: gray;
    text-decoration: none;
    }

    .mainnav ul a:hover {
    color: black;
    }

Thanks for help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与他有关 2025-02-20 05:33:22

1-不要将任何内容放在＆lt; head＆gt;标签中，而不是＆lt; tltle＆gt;＆amp; ＆lt; link＆gt;。主要问题
2- ＆lt; div class =“ header”＆gt;很旧，应该被您拒绝。使用＆lt; header＆gt;。
3- ＆lt; a＆gt;标签是一个链接。为什么要将＆lt; nav＆gt;放入链接中？它将您的整个导航视为一个链接... Major 问题
4-在CSS中，为什么您的标头宽度固定？它应该一直是100％。
5-您的MainNAV CS必须修复...
6-而不是使用左：450px;使用text-align：中心

您的最终代码看起来像这样：

.header {
    background-color: aqua;
    width: 100%; /*100% width all the time no matter what the screen is*/
}
.mainnav ul {
    position: relative;
    text-align: center; /*Never use left, right, top, bottom in position!!!*/
    font-size: 20px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
}

.mainnav ul li {
  padding-right: 10px; /*sets a little space between the <li> to the right*/
  color: gray;
  text-decoration: none;
  display: inline-table;
}

.mainnav ul a {
    color: gray;
    text-decoration: none;
}

.mainnav ul a:hover {
    color: black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Hyard - 2022 Based Programming group</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
      <header class="header">
        <img src="images/logo.png" alt="head-logo" height="200" width="200" />
        <nav class="mainnav">
            <ul>
              <li><a href="projects/selector.html">Projects</a></li>
               <li><a href="en/about.html">About</a></li>
               <li><a href="en/versions.html">Versions</a></li>
            </ul>
            </nav>
      </header>
    </body>
</html>

1- Don't put anything in the <head> tag except <tltle> & <link>. Major problem
2- <div class="header"> is very old and should be banned from you mind. use <header> instead.
3- <a> tag is a link. Why are you putting the <nav> inside a link? it counts your entire nav as one link...Major problem
4- in CSS, why is your header width fixed? it should be 100% all the time.
5- your mainnav CSS must be fixed...
6- instead of using left: 450px; use text-align: center

Your final code will look like this:

.header {
    background-color: aqua;
    width: 100%; /*100% width all the time no matter what the screen is*/
}
.mainnav ul {
    position: relative;
    text-align: center; /*Never use left, right, top, bottom in position!!!*/
    font-size: 20px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
}

.mainnav ul li {
  padding-right: 10px; /*sets a little space between the <li> to the right*/
  color: gray;
  text-decoration: none;
  display: inline-table;
}

.mainnav ul a {
    color: gray;
    text-decoration: none;
}

.mainnav ul a:hover {
    color: black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Hyard - 2022 Based Programming group</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
      <header class="header">
        <img src="images/logo.png" alt="head-logo" height="200" width="200" />
        <nav class="mainnav">
            <ul>
              <li><a href="projects/selector.html">Projects</a></li>
               <li><a href="en/about.html">About</a></li>
               <li><a href="en/versions.html">Versions</a></li>
            </ul>
            </nav>
      </header>
    </body>
</html>

回复收藏 0 原文

記憶穿過時間隧道 2025-02-20 05:33:22

尝试使用相对单元并擦除左侧和顶部

回复收藏 0 原文

凉栀 2025-02-20 05:33:22

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {

}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {

}
 
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {

}
 
/* small mobile :320px. */
@media (max-width: 767px) {
 
}
 
/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {width:450px}
 
}

使用此媒体查询，您要收缩哪种设备？

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {

}

/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {

}
 
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {

}
 
/* small mobile :320px. */
@media (max-width: 767px) {
 
}
 
/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {width:450px}
 
}

Use this media query, which device you want to shrink?

回复收藏 0 原文

~没有更多了~