Div标签不会根据指定的位置改变位置

时间:2016-01-10 19:37:53

标签: html html5 document-body

我是一名正在学习HTML的学生,并且一直难以定位div标签。当我试图改变位置时(我需要它是"位置:固定;")它不会移动。我从其他主题中收集到的是div标签相对于主体定位,但是如果它的位置设置为固定,那么它是不是应该被修复?

注意:这一切都很混乱,因为我还在努力学习这门语言。我包含了整个HTML文件,以防其他因素导致错误。文档中还没有涉及CSS文件。

以下是我试图开始工作的部分。提前谢谢。



a{position:fixed;}

<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
  <a href="home.html" style="left:40px">Home</a>
  <a href="portfolio.html" style="left:90px;">Portfolio</a>
  <a href="links.html" style="left:140px;">Links</a>
  <a href="contact.html" style="left:190px;">Contact</a>
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
body{font-fmaily:Times New Roman;}
h1,p{text-align:center;}
a{position:fixed;}
&#13;
<!DOCTYPE html>
<html>
<head>
  <title>Jem Jolly</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <div> 
    <img src="Random Banner.png" alt="Random Banner"  style="position:fixed;left:130px;top:43px"/> 
  </div>

  <div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
    <a href="home.html" style="left:40px">Home</a>
    <a href="portfolio.html" style="left:90px;">Portfolio</a>
    <a href="links.html" style="left:140px;">Links</a>
    <a href="contact.html" style="left:190px;">Contact</a>
  </div>

  <div>
    <div style="background:#A7DbD8;position:fixed;height:300px;width:600px;top:175px;left:20px;border:3px solid #19B3B0">
      <h1 style="font-family:cooper black;">JEM JOLLY</h1>
      <p>JEM JOLLY Founded in 2000, Jem Jolly started as a small, family-owned jewelry store. All of our products were hand-crafted by local artists, metalsmiths, and bead workers. Since our humble beginnings, we have grown into a nationwide company with distributors, retailers, and other wholesalers representing us and our products in 20 states, as well as Canada and the UK. Check out our retailer list <insert link to retailer page once it is created> for locations near you.</p>
      <p>We also take custom orders. Feel free to send us specific instructions for custom orders through our contact form <insert link to contact page once it is created>, if you are interested in a unique item for that special someone!</p>
      <p>Jem Jolly is pleased to be your supplier of finely crafted, high-quality jewelry that is timeless, eye-catching, and unlike anything you've seen before.
    </p>
    </div>
  </div>

  <div>
    <div style="background:A7DbD8;position:fixed;height:240px;width:320px;top:175px;left:640px;border:3px solid #19B3B0">
      <video width="320" height="240" controls>
        <source src="intermediate_web_design_U4L3_vid 10-39-13.mp4" type="video/mp4"></source>
      </video>
    </div>

  </div>

  <div style=width:500px;height:100px; position: relative;">

    <img src="rsz_3logo.png" alt="Random Logo" style="left:20px;top:43px"/>

  </div>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

你拼错了单词position

<强> CODE

<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">

修复

<div style="background:#A7DbD8;position:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">

您是否正在使用某种编辑器? 如果您只使用记事本,那么您将会因为那些短暂的错误而生气。 给自己一个体面的编辑...

此外,您不需要固定位置的所有菜单项,足以使父元素固定。