Question

创建一个网站来练习html / css。无法移动h1和#logo图像的位置。

body {
  text-align: center;
  background: url(/images/bg.png);
  background-size: cover;
  font-family: sans-serif;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  position: absolute;
  width: 100%;
  display: block;
}

p {
  text-align: center;
  font-size: 24px;
  font-family: sans-serif;
}

h1 {
  display: inline-block;
  color: black;
  position: relative;
  top: -90%;
  text-align: center;
  text-indent: 10px;
  font-size: 20px;
}

h1:hover {
  color: #B40400;
}

#logo {
  top: 50%;
}

<a href="http://www.example.com">
  <h1>Test</h1>
</a>
<img border="0" id="logo" src="http://placehold.it/420x120" alt="MAL." width="420" height="120">

<h1>Test1</h1>
<h1>Test2</h1>
<h1>Test3</h1>
<h1>Test4</h1>
<h1>Test5</h1>

请帮忙！感谢。

Answer 1

如果不使用top，bottom，left和right，除非确实有必要。此外，使用top的百分比要求元素具有父级，该父级具有设定高度的相对，绝对或固定定位。

而是使用边距：

margin: top, right, bottom, left;

所以要移动你的H1：

margin: 50px, 0, 0, 0;

OR

margin-top: 50px;

Answer 2

@Mal你的小提琴不正确，正确的语法是......

<div id="wrap">
    <img border="0" id="logo" src="/images/logo.png" alt="MAL." width="420" height="120" />
        <h1 class="name"><a href="http://www.example.com">Test</a></h1>
        <h2>Test1</h2>    
        <h2>Test2</h2>    
        <h2>Test3</h2>    
        <h2>Test4</h2>  
        <h2>Test5</h2>    
   </div>

你必须关闭标签，你必须在你的

内

无法移动h1和#logo

2 个答案: