个人中心
gpt4 book ai didi

HTML5/CSS : Fix position of elements regardless of webpage size

转载 作者：行者123 更新时间：2023-12-05 07:03:56 26 4
gpt4 key购买 nike

我一直在尝试编辑我的代码，以便当我的网页从我的 1980x1080 显示器移动到 2560x1440 笔记本电脑屏幕时，元素(即文本、菜单栏...)不会改变位置。我尝试用包装函数包装所有 HTML 代码以确保固定位置，但它也不起作用。代码附在下面；任何建议将不胜感激。谢谢。

<html>

    <head>
        <title> My Name | My Website </title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="wrapper">
        <header>   
            <div class="row">
                <div class="logo">
                    <img src="uw_logo.png">
                </div>
                <ul class="main-nav">
                    <li class="active"> <a href=""> MAIN </a> </li>
                    <li> <a href=""> PROFILE </a> </li>
                    <li> <a href=""> INTERESTS </a> </li>
                    <li> <a href=""> PROJECTS </a> </li>
                    <li> <a href=""> HOBBIES </a> </li>
                    <li> <a href=""> CONTACT </a> </li>
                </ul>
            </div>

            <div class ="name">
            <h1>My Name.</h1>
                <!-- <div class="button">
                    <a href="" class="btn btn-one"> Watch Video. </a>
                    <a href="" class="btn btn-two"> Explore.</a>
                </div> -->
            </div>

            <div class="major">
            <h2>Astrophysics Student.</h2>
            </div>
        </header>
        </div>
    </body>

</html>

CSS:

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
}

.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    float: right;
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
} 

body
{
    font-family: monospace;
}

.name 
{
    position: absolute;
    margin-top: 30%;
    margin-left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    position: absolute;
    width: 40%;
    margin-left: 17%;
    margin-top: 18%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

最佳答案

我认为您想要的是某种响应式设计，因此内容会随着屏幕尺寸的变化而保持其位置。为此，我建议使用 CSS Flex-Box。首先，这是一个很棒的教程/洞察力: Tutorial for CSS Flexbox

好的，这是我解决您问题的方法:

HTML:(未更改)

        <div id="wrapper">
    <header>   
        <div class="row">
            <div class="logo">
                <img src="uw_logo.png">
            </div>
            <ul class="main-nav">
                <li class="active"> <a href=""> MAIN </a> </li>
                <li> <a href=""> PROFILE </a> </li>
                <li> <a href=""> INTERESTS </a> </li>
                <li> <a href=""> PROJECTS </a> </li>
                <li> <a href=""> HOBBIES </a> </li>
                <li> <a href=""> CONTACT </a> </li>
            </ul>
        </div>

        <div class ="name">
        <h1>My Name.</h1>
            <!-- <div class="button">
                <a href="" class="btn btn-one"> Watch Video. </a>
                <a href="" class="btn btn-two"> Explore.</a>
            </div> -->
        </div>
        <div class="major">
        <h2>Astrophysics Student.</h2>
        </div>
    </header>
    </div>

CSS:

*

{
    margin: 0;
    padding: 0;
}

@keyframes fadeIn
{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}

header /* Linear Gradient makes background darker:  */
{
    display: flex;/* makes header a css Flex container*/
    flex-direction: column; /* defines that your elements are below each other*/
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(spaceship.png);
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
}
.row{
    display: flex;/* makes row a CSS Flex-container*/
    flex-direction: row; /*this makes a real row out of your container*/
    justify-content: space-between; /* this makes your navbar position on the right*/
    order: -1;/* this positions your Navbar at the top*/
}
.main-nav /* Place menu bars on right side, take out bullets, space from top */
{
    list-style: none;
    margin-top: 2%;
    margin-right: 1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

.main-nav li /* Place menu bars in a horizontal line */
{
    display: inline-block;
}

.main-nav li a{ /* Change text style of menu bars */
    color: white;
    text-decoration: none;
    padding: 2px 2px;
    font-family: "Impact", sans-serif;
    font-size: 100%;
}

.main-nav li.active a
{
    border: 2px solid white;
}

.main-nav li a:hover
{
    border: 2px solid white;
}

.logo img
{
    height: auto;
    width: 300px;
    float: left;
    margin-top: -0.5%;
    margin-left: -1%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
} 

body
{
    font-family: monospace;
}

.name 
{
    margin-top: 30%;
    margin-left: 62.5%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h1
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

.major
{
    order: -1; /*this positions your major above the name (like it was in your code 
     example), even tho the order is different in HTMl (works only inside of Flexbox- 
    Elements (header in this case)*/
    width: 40%;
    margin-left: 17%;
    margin-top: 18%;
    animation-name: fadeIn;
    animation-delay: 0s;
    animation-duration: 7s;
}

h2
{
    color: white;
    font-size: 300%;
    font-family: "Palatino Linotype";
}

请查看教程或其他教程，以便了解这里发生了什么

关于HTML5/CSS : Fix position of elements regardless of webpage size，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63068668/

26 4 0
文章推荐： javascript - react-native 如何在父组件内的特定位置显示多个组件？
文章推荐： flutter - 在 flutter 中使用 android_alarm_manager 运行后台任务
文章推荐： asp.net-mvc - 在 Web API c# MVC 中使用 HttpActionExecutedContext 时出现缓存问题
文章推荐： Python AWS CDK 资源已存在错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com