0

我是 CSS 新手，需要您的指导。我有一个图像背景，需要在其中放置 2 条测试线。文本和图像顶部边框之间的顶部距离应为 50 像素。在此文本下方有另一个文本。这两个文本之间的距离是 10px。第二个文本（下部文本）与图像下端之间的距离应为 40 px。我想出了下面的代码。我是否需要将第一类的高度硬编码为 100px？如果我这样做，这两个文本就会变得过于拥挤。请让我知道以下代码是否正确

HMTL

<div class="header1">
    <div class="header2" >
        The first text goes here
    </div>
    <div class ="header3">
        The second small tesxt goes here
    </div>
</div>

CSS

.header1{
    display: block;
    background-image: url("1.jpg");
    background-repeat:no-repeat;  
}
.header2{
    font-family: Arial;
    font-size:42px;
    color:#FFFFFF;
    height:50px;
    margin-top:50px;
    margin-left: 170px;
    margin-bottom:10px;
}
.header3{
    font-family: Arial;
    font-size:16px;
    color:#FFFFFF;
    height:40px;
    margin-left: 170px;
    margin-top:10px;
    margin-bottom:40px;
}
4

3 回答 3

0

如果内容比标题正好 100 像素高更重要，则不需要对高度进行硬编码，或者实际上在此处使用任何高度。

看看这个小提琴，它使用下面的 CSS。我认为这符合您的要求：http: //jsfiddle.net/2LetS/4/

body { color: #ffffff; font-family: Arial; font-size: 16px; }

.header1 { 
    background: #ff0000; /* Replace this with your image. */
    padding: 50px 0 40px 170px;
}

.header2 { 
    margin: 0 0 10px 0; 
    font-size: 42px;
}
  • 标题顶部和第一个文本之间 50 像素
  • 第一个和第二个文本之间 10px
  • 第二个文本和标题底部之间的 40 像素

请注意，在示例中，我在 .header1 元素上使用填充来定义文本周围的空间，并使用边距来分隔文本元素本身。您还会注意到实现相同目的的 CSS 代码要少得多。

对于您的个人发展，我认为了解盒子模型，以及边距、填充、宽度和高度对块和内联元素的影响将极大地提高您对未来的了解。

希望有帮助！

于 2013-09-18T12:12:51.560 回答
0

你的代码很好，你只需要添加这一行：

.header1 {
    overflow: hidden;
}

注意：.header3 { margin-top:10px; }不是必需的，您已经将此边距固定在.header2

提琴手

于 2013-09-18T12:06:11.200 回答
0

根据标准....对于标题和子标题，使用 H1、H2、H3 标题标签并在 css 中定义单独的样式

<div class="header1">
    <h1 class="header2" >
       The first text goes here
    </h1>
    <h3 class ="header3">
       The second small text goes here
    </h3>
</div>
  1. 没有必要将具有类 header1 的 div 定义为块，因为 div 已经是块级元素。
  2. 使用 % 和 em 作为响应式设计的测量单位。
  3. 始终为 font-family 属性使用后备字体

  4. 尝试对填充、边距、背景、边框等使用简写符号。

    填充：右上右下；边距：右上右下；背景：image_url 颜色重复是/否位置；

于 2013-09-18T12:21:55.177 回答