css - 在同一页面上以两种略有不同的方式设计相同的 div

Question

我对 CSS 很陌生，所以如果这个问题的答案很明显，请原谅我。我一直在进行大量搜索，但尚未找到解决方案。

我有一个带有注册 div 的页面，控制宽度，完全由 CSS 设置样式，向右浮动，左侧有文本。这是在页面的顶部。

我想让相同的注册 div 再次出现在页面底部。然而，这一次，我想更广泛。我已经尝试复制和粘贴 HTML 代码（以及相应的 CSS 代码），稍微修改 div 名称，以通过我的宽度修改创建一个版本 2，但这不起作用。

关于我如何做到这一点的任何想法？

Answer 1

如果我正确理解了您的问题，您是否希望div在页面底部复制一个与另一个不同的副本width？然后尝试添加 2 个类。一为一common styles为specific styles

CSS：

.signupDIv
{
   //common style
}

.topDiv
{
  width: 100px;
}

.bottomDIv
{
 width: 200px;
}

HTML：

<div class="signupDIv topDiv"> //this is your original div
<div class="signupDIv bottomDIv"> // this is your duplicate div at the bottom with customized width

该类signupDIv适用于您的常见样式，例如background-color等。而topDivandbottomDiv则适用于您的特定样式，在您的情况下是width.

Answer 2

您究竟是如何修改 div 的“名称”的？您是否为每个 div 添加了一个 id 选择器？您的一个 div 可能如下所示：

    <div id="widesignup"> /*content*/ </div>

另一个可能看起来像这样。

    <div id="signup"> /*content*/ </div>

你可以通过在你的css中发布这个来调用这个id：

    #widesignup {
        /*css*/
    }

     #signup {
        /*css*/
    }

希望有帮助。