-1

首先，有 3 个单独的图像。一个小鸡，单词“delivery”和“foodstant”我想以这样的方式对齐它们——> 3张图像 有没有什么方法可以实现这样的定位，尽管浏览器窗口的大小和分辨率可能会发生变化，但它可以保持不变的位置？

绝对定位和相对定位都有效，但是调整浏览器的大小会搞砸一切。利润似乎无法解决问题.. 或者我只是不太熟练。

HTML代码如下：

<!doctype html>

<html>
<head>
    <meta charset="UTF-8"/>
    <title> Foodstant Delivery </title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>

<figure>
<img id="del" src="images/delivery12.png" alt="Delivery" />
<img id="foo" src="images/foostant2.png" alt="Foodstant" />
<img id="chi" src="images/logochick.png" alt="Chick" />
</figure>

<nav id="hnavbar">
    <ul id="hli">
        <li><a id="home" href="index.html">Home</a></li>
        <li><a id="menu" href="menu.html">Menu</a></li>
        <li><a id="cu"   href="ContactUs.html">Contact Us</a></li>
        <li><a id="au"   href="aboutus.html">About Us</a></li>
        <li><a id="tc"   href="TC.html">Terms & Conditions</a></li>
        <li><a id="job"  href="jobs.html" target="_blank">Jobs</a></li>
        <li><a id="yo"   href="order.html">Your Order</a></li>
    </ul>   
</nav>

</body>

CSS代码如下

/* Foodstant Delivery */

* {
margin: 0;
padding:0;
  }
 body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
background:url("images/bg.jpg");    
   }
   /* home page */
  #hnavbar{
font-size:2em;
margin-top:-13em;
}
  #hnavbar ul li {
    list-style-type:none;       
    width:325px;
    display:inline;
    padding:0 13px 0 13px; 
    }
  #chi {
position:relative;
top:-30em;
left:10em;
       }
  #foo {
position:relative;
top:1em;
left:-11em;
   }
  #del {
position:relative;
top:10.5em;
left:26em;
}
 /* home page */

提前谢谢了。

4

2 回答 2

0

我最近不得不做一些与此非常相似的事情，一段时间后我决定必须对每个链接使用绝对定位。您的代码的问题在于您似乎不太了解相对定位和绝对定位的工作原理。绝对对象总是相对于它更接近的父设置为“相对位置”。所以你应该试试这个：

#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar
#home, #menu, ... { position: absolute; }

之后，您应该使用顶部/左侧或底部/右侧属性设置每个绝对定位菜单链接的位置。

对于图片，如果您没有“Foodstant”和“Delivery”的链接，我真的会使用一张图片。

希望能帮助到你！

于 2012-05-23T17:12:40.537 回答
0

以百分比指定顶部和左侧的值，而不是“em”。这些百分比将相对于包含这些图像的父元素。或者只使用一个图像而不是 3 个图像并使用图像映射。这里有一个 coupla 在线工具可以做到这一点：

http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/

于 2012-05-23T17:18:06.887 回答