0

一个。图片 (960x7) div（宽度：960，填充：10）

我想定位 (a) 使其距顶部 50 像素，居中。我想定位（b），使其位于（a）的正下方，没有空间。

我的CSS如下：

@charset "utf-8";
* {margin:0;padding:0;}
body {background-color:#999;}
.pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}

我的 HTML 如下：

<body>
<div class="pagetop" />
<div class="page">
<p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p>
</div>

我正在尝试在灰色背景上创建一个带有圆形边缘的白色容器。我怎样才能简单而智能地做到这一点？

4

3 回答 3

1

看看这个问题的圆边：

CSS 圆角

对于对象的定位，我会使用这样的东西：

topimage {
   position: absolute;
   top: 50px;
   text-algin: center;
}
于 2009-07-15T18:09:02.333 回答
0

要在元素之间放置没有边距的元素，您希望顶部图像的底部边距为零：

margin: 50px auto 0;

（请注意，您必须为任何非零测量指定一个单位（例如 px）。）

背景图像不会给出顶部元素的大小，您必须指定宽度和高度以匹配图像的大小。如果高度小于一个常规字符，你需要使用一些东西来阻止 Internet Explorer 将元素扩展到一个字符行的高度，例如通过使用overflow: hidden;来防止内容影响元素的大小：

width: 960px; height: 10px; overflow: hidden;

padding 被添加到元素的大小，所以你必须让page元素变窄 20 像素：

padding: 10px; width: 940px;
于 2009-07-15T18:10:11.630 回答
0

如果您的圆角图像高 30 像素，请将 .pagetop 高度设置为 30 像素，在顶部添加 50 像素的内边距并将背景图像的顶部设置为 50 像素。

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}
.page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}
于 2009-07-15T18:46:00.183 回答