Question

我正在尝试根据我收到的设计创建一个页脚...

左侧的背景颜色与右侧的背景颜色不同：

Footer

我有以下标记：

<div class"wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

我的想法是内容DIV将徽标作为背景图像左对齐而不重复。

但后来我不知道如何在左右两侧创造不同的颜色......

而且我不确定我是否可以控制高度以使一切都对齐。

内容div居中并且图像上有橙色边框...

谢谢你，
米格尔

Answer 1

试试这个http://codepen.io/nicknameless/pen/cblzB/

我使用过CSS3而没有额外的标记。这应该适合你。它可以清理，我想，这只是一个快速概述，让你开始。

您提供的HTML

<div class="wrapper">
  <div class="content">
    The Text here should no go over the logo
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}
div.wrapper {
  height: 40px;
  background: #850000;
  width: 100%;
  display: block;
  position: relative;
  overflow: visible;
  top: calc( 100px - 40px );
}
div.wrapper:before {
  background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
  content: " ";
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 10%;
}
div.content {
  left: calc( 10% + 100px );
  padding-left: 10px;
  bottom: 0;
  background-color: #C70000;
  display: block;
  height: 40px;
  position: absolute;
  width: calc( 100% - ( 10% + 100px ) );
}

Answer 2

这真是一个痛苦的屁股，我建议将内部矩形作为图片，但如果你真的想要它在CSS中，这里它是：http://jsfiddle.net/B97ym/

HTML：

<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
    <div class='border2'></div>
    <div class='border3'></div>
    <div class='logodiv'>
        <div class='rectangle'></div>
    </div>
</div>

CSS：

.wrapper {
    width: 500px;
    height: 50px;
    margin: 100px auto;
    position: relative;
    background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}

.content{
    margin: 0 0 0 50%;
    color: #ffffff;
}

.border{
    width: 4em;
    height: 4em;
    background: #FF0000;
    position: absolute;
    left: 33.7%;
    top: -55%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}

.border2{
    width: 0.8em;
    height: 4em;
    background: #9c9e9f;
    position: absolute;
    left: 80%;
}

.border3{
    width: 0.8em;
    height: 0.85em;
    background: #000000;
    position: absolute;
    left: 80%;
    top: 80%;
}

.logodiv {
    width: 2.5em;
    height: 2.5em;
    background: #ffffff;
    position: absolute;
    top: 18%;
    left: 18%;
}

.rectangle{
    width: 2.1em;
    height: 2.1em;
    position: relative;
    background: #ffffff;
    top: -42%;
    left: -42%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

希望它会对某人有所帮助（

Answer 3

在包含整个徽标的包装层上使用CSS背景图像，将所有徽标添加为条形图。在内层添加足够的边距，将文本推到徽标之外。

Answer 4

创建一个内部有两个div的div，左右和固定高度的宽度为50％。确保你溢出徽标。

Answer 5

我想知道这个FIDDLE是否会给你一个开始的地方。

CSS

.holder {
    width: 500px;
    margin: 100px auto;
    position: relative;
}
.leftdiv {
    width: 40%;
    height: 60px;
    float: left;
    background-color: red;
}
.rightdiv {
    width: 60%;
    height: 60px;
    float: left;
    background-color: blue;
}
.logodiv {
    width: 44px;
    height: 44px;
    position: absolute;
    left: 157px;
    top: -42px;
    background-color: white;
    transform: rotate(45deg);
    border-left: 20px solid blue;
    border-right: 20px solid red;
    border-top: 20px solid red;
    border-bottom: 20px solid blue;
}
.whiteout {
    background-color: white;
    width: 30px;
    height: 60px;
    border: 0px solid black;
    position: absolute;
    top: -60px;
    left: 183px;
}

创建两种不同颜色的页脚

5 个答案: