1

我已经创建了自己的页脚设计，并且正忙于实现它。正如您在图像中看到的那样，我目前遇到的问题是右侧和左侧页脚的较暗侧。我玩透明胶片并尝试创建那些对角线形状。我已经使用:before和:after状态创建了这些表单。页脚内容需要包装在1024px. 问题出在这一点上……

较暗的边应填满每边宽度的 100%。中间部分具有相同的颜色，但具有不同的不透明度级别。我尝试了不同的技术但没有结果我有点卡住了。

图 1 是想要的效果。

图 2 是我在实际代码中遇到的问题。如果屏幕变得比1024px它以这种方式显示的更大。

我试图保持 HTML5 标记尽可能干净，并依靠 CSS 来完成工作。你有什么建议吗？

图 1： 在此处输入图像描述

图 2：

在此处输入图像描述

HTML5 标记：

 <footer>
            <div class="wrapper">
                <aside class="contact-details">
                    <span>Email:
                        <a href="mailto:mail">info@lorem.com</a>
                    </span>
                    <span>Tel:
                        <a href="tel:WAITING FOR OFFICAL PHONE">786 - 520 - 482</a>
                    </span>
                </aside>

                <aside class="company-details">
                    <span>2013 lorem lorem</span>
                    <h1>LOREM LOREM LOREM</h1>
                </aside>

                <aside class="social-details">
                    <span class="visitors">Visitors: 98131</span>
                    <ul>
                       <li>
                           <a href="#" class="sprites-facebook ir">facebook</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-twitter ir">twitter</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-googleplus ir">google plus</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-linkedin ir">linkedin</a>
                       </li>
                       <li>
                           <a href="#" class="sprites-youtube ir">youtube</a>
                       </li>
                    </ul>
                </aside>
            </div>
        </footer>

这是我的 SASS：

footer{
    height: 30px;
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-color: rgba(140,137,121,0.85);
    @include box-sizing(border-box);
    font-size: 14px;
    @include background-image(linear-gradient(rgba(37,36,37,0.2), rgba(45,44,45,0.2)));

    a{
        text-decoration: none;
        padding: 0 0 0 5px;

        &:link,&:visited{
            color: #cfcfcf;
        }

        &:hover{
            color: #ffffff;
        }

        &:active{
            color: rgba(247,51,117,0.8);
        }
    }
}

aside{
        float: left;
        position: relative;

    &.contact-details{

        &:before{
            position: absolute;
            right: -7px;
            border-top: 30px solid rgba(38,37,38,0.75);
            border-right: 30px solid transparent;
            z-index: -1;

            // @include background-image(linear-gradient(rgba(37,36,37,0.75), rgba(45,44,45,0.75)));
            content: "";
        }

        &:after{
            position: absolute;
            right: 23px;
            height: 30px;
            width: 100%;
            background-color: rgba(38,37,38,0.75);
            z-index: -1;
            content: "";
        }
    }

    &.contact-details,&.social-details{

        span{
            float: left;
            margin: 4px 20px 0 0;
            vertical-align: middle;
            color: #cfcfcf;
        }
    }

    ul{
        float: left;
        margin: 5px 0 0 0;

        li{
            list-style: none;
            display: inline;

            a{
                float: left;
                margin: 0 15px 0 0;
                padding: 0;
                @include box-shadow(rgba(0,0,0,0.25) 2px 2px 5px);

                &:link,&:visited{
                    opacity: 0.8;
                }

                &:hover,&:active{
                    opacity: 1;
                }
            }
        }
    }

    &.company-details{
        width: 293px;
        text-align: center;
        text-transform: uppercase;

        span{
            vertical-align: middle;
        }

        h1{
            width: 232px;
            font-family: telegrafico, serif;
            font-size: 15px;
            color: #262526;
            text-shadow: 1px 1px 0px rgba(64,64,64,0.3);
            background-color: rgba(242,242,242,0.3);
            padding: 10px;
            margin: 0;
            position: relative;
            bottom: 60px;

            &:before{
                border-bottom: 38px solid rgba(242,242,242,0.3);
                border-left: 38px solid transparent;
                content:"";
                position: absolute;
                bottom: 0px;
                left: -38px;
            }

            &:after{
                border-bottom: 38px solid rgba(242,242,242,0.3);
                border-right: 38px solid transparent;
                content:"";
                position: absolute;
                bottom: 0px;
                right: -38px;
            }
        }
    }
}
4

0 回答 0