Html CSS不应用于页脚angularjs

我已经为此挣扎了两天了，虽然看起来很简单。 正如您在这里看到的图片中我创建的页脚：

我有两个问题：

• 我似乎无法对文本中的页脚应用任何

  css

  修改（“凯捷新来者应用程序”）
• 如果不截取徽标或在页面内容和页脚之间应用边距（如下图所示），我无法添加将页面其余部分与页脚分开的行：

HTML代码

<ion-footer-bar class="bar">
  <img src="img/Imag.png" class="test2" />
  <div class="text"> Capgemini Newcomer Application </div>
  <img src="img/Test3.png" class="test"/>
</ion-footer>

.bar {

    position: absolute;
    margin-top: 20px;
    height: 50px;
    border-top: 2px solid #FBC02D;

}

.bar .test {
    float: right;
    clear: left;
    position: fixed;
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}


.bar .test2 {

    width: 40px;
    height: 40px;
    bottom: 20px;
}

.bar .text {

    text-align: center;
    font-size: 6;
    bottom: 2px;

}

编辑

在做了下面提到的修改后，我得到了以下结果：

。。。

您的CSS存在一些问题，这些问题与您预期的不一样：

.bar {
    position: absolute;
    margin-top: 20px; /* doesn't do anything for position: absolute */
    height: 50px;
    border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}

.bar .test {
    float: right;
    clear: left;
    position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}

.bar .test2 {
    width: 40px;
    height: 40px;
    bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}

.bar .text {
    text-align: center;
    font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
    bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}

---

这仍然会使徽标与边框重叠，但这是您需要在徽标图像中解决的问题。

OP没有在此处说明任何关于AngularJS的内容。其中有一个

angular

标记（这就是我回答的原因），它现在已经编辑好了（您可能需要检查编辑历史）@a.Sharma OP显然使用了离子框架，你能解释一下你的回答吗？此外，它也不起作用：使用

ng class=“{'code]：true}”

而不是

class

，并且应该在其中使用

true

（通常这是一些表达式/条件的位置，当计算结果为

true

时，

css

class

bar

会被应用）将应用

css

和

false

是否可以创建JSFiddle1。）能否提供一个演示页面，让我们查看呈现的模板<代码>离子页脚栏是一个可以修改实际HTML输出的指令2。）第二个问题似乎是徽标（透明度）有问题，纯CSS无法解决任何问题。你不能以百分比（75%）给出你的栏的宽度吗？不。整个栏将缩小，图片也会缩小。谢谢你的帮助。我将更新结果，但仍然无法编辑文本使其居中

.bar {
    position: absolute;
    margin-top: 20px; /* doesn't do anything for position: absolute */
    height: 50px;
    border-top: 2px solid #FBC02D; /* <-- this will always add the border outside the footer */
}

.bar .test {
    float: right;
    clear: left;
    position: fixed; /* <-- either you float it, or you position it fixed - both together don't make sense */
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}

.bar .test2 {
    width: 40px;
    height: 40px;
    bottom: 20px; /* <-- "bottom" on a non-positioned element doesn't do anything */
}

.bar .text {
    text-align: center;
    font-size: 6; /* <-- font size needs a unit like "px" or "pt" */
    bottom: 2px; /* same as above, this should probably be margin-bottom instead */
}

.bar {
    position: absolute;
    height: 50px;
}

.bar .test {
    position: fixed;
    max-width: 130px;
    max-height: 100px;
    right: 0;
    bottom: 2px;
}

.bar .test2 {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

.bar .text {
    text-align: center;
    font-size: 6pt;
    margin-bottom: 2px;
    border-top: 2px solid #FBC02D;
}