个人中心
gpt4 book ai didi

HTML/CSS 元素不随网页调整大小

转载 作者：可可西里 更新时间：2023-11-01 13:29:29 25 4
gpt4 key购买 nike

我最近开始研究 HTML/CSS 并一直在设计网页。我在这里和谷歌上搜索了几个小时，并从头开始完全重写了我的代码。这非常烦人。

除了 about 元素外，我网页上的所有其他元素都会调整大小并重新定位自身以适应新的窗口大小，它与窗口大小调整时位于同一位置，就好像它已经被赋予了固定的位置，但事实并非如此(至少我认为不是)。你能看看我的代码并告诉我为什么会发生这种情况吗？

(请注意，出于隐私原因，所有信息均已删除。)

charset"utf-8";

#container{
width:900px;
}

#image{
position: relative;
padding-top:50px;
padding-right: 500px;
}

#title{
position: relative;
bottom: 275;
left: 250;
height: 100px;
width: 400px;
}

#margin{
margin-left:10;
}

#about{
position: relative;
bottom: 300;
left: 820;
height: 500px;
width: 350px;
border: 3px solid #FFFFFF;
} 

@font-face { 
    font-family: myFirstFont;
    src: url(font.ttf);
} 

#header { 
width: 900px;
height: 120px;
position: relative;
background-color: #787878;
border-bottom: 2px solid #000000;
font-family: myFirstFont;
} 

#footer { 
background-color: #FFD700;
height:20px;
left:0;
bottom:0;
position:absolute;
bottom:0;
width:100%;
} 

.button{text-decoration:none; text-align:center;
 padding:11px 32px;
 border:solid 1px #004F72;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius: 4px;
 font:18px Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#E5FFFF;
 background-color:#3BA4C7;
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

  }.button:hover{
 padding:11px 32px;
 border:solid 1px #004F72;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius: 4px;
 font:18px Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#E5FFFF;
 background-color:#3BA4C7;
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
<html>
<head>
<title>Removed</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#800000">
<center>
<font color="#FFD700">
<div id="container">
<div id="header">
<font size="16">Removed</font>
<br><br>
<a href="#" class="button"/>Home</a>
<a href="#" class="button"/>About</a>
</div>
<div id="image"><img src="Removed" width="500"></div>
<div id="title"><h1>Welcome to My Website!</h1></div>
</center>
<div id="about"><p>About information removed.</p></div>
</font>
</div>
</body>
</html>

最佳答案

#about div 保留在原处，因为它位于 #container 内，它具有固定的宽度并且缺少样式以使其在页面中居中。

如果您希望容器在调整浏览器宽度时保持在页面的中央，请在左侧和右侧提供 #container 自动边距:

#container {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

容器的 position: relative; 属性允许其子元素绝对定位在容器内，如下所示:

#about {
  position: absolute;
  right: 0;
}

我制作了一个片段来演示这种方法并进行了许多其他改进。

@charset"utf-8";

body {
  background: #800000;
  color: #ffd700;
  font-family: 'Merriweather', serif;
}

#container {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

#header {
  text-align: center;
}

.banner {
  text-align: center;
  font-size: 48px;
  padding: 10px 0;
}
.navigation {
  font-size: 18px;
}
.navigation a {
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  margin: 0 10px;
  padding: 5px 10px;
  color: #ffd700;
  border: 1px dotted #ffd700;
}
.navigation a:hover {
  background: #ffd700;
  color: #800000;
}

h1 {
  text-align: center;
  padding: 25px 0;
}

#content {
  position: absolute;
  left: 0;
}

#about {
  position: absolute;
  right: 0;
  width: 310px;
  height: 500px;
  padding: 0 20px;
  border: 3px solid #fff;
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

<div id="container">

  <div id="header">

    <div class="banner"> Banner </div>

    <div class="navigation">
      <a href="#">Home</a>
      <a href="#"/>About</a>
    </div>

  </div><!--end header -->

  <h1> Welcome to My Website! </h1>

  <div id="content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Pebuildingtrojan.jpg" alt="liberty">
  </div>

  <div id="about">
    <p> Information about this website. </p>
  </div>

</div><!--end container -->

关于HTML/CSS 元素不随网页调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32289120/

25 4 0
文章推荐： javascript - 使用嵌入式浏览器和 JavaScript 构建 Windows 应用程序 'hooks'
文章推荐： 运行 mercurial 命令时 Windows 批处理文件退出
文章推荐： c++ - 在纯 C++ dll 中捕获由 MFC 应用程序生成的 Windows 消息
文章推荐： windows - 将带有开关的参数传递给批处理文件
可可西里
个人简介

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

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