如何为我的应用程序构建像github这样的页脚页面组件?

时间:2017-12-27 10:53:46

标签: angular

我想为我的应用程序构建一个类似于github上的页脚页面。

我有一个页脚组件如下:

@Component({
selector: 'app-footer',
templateUrl: './footer.component.html'
})
export class FooterComponent {
   today: number = Date.now();
}

这是模板:

<div class="footer">
    <div class="m-container m-container--fluid m-container--full-height m-
   page__container">
    <li class="m-nav__item">
        <span class="m-footer__copyright">
            Copyrights &copy; {{ today | date: 'yyyy' }} MINEPAT, Mountain Metrics by 
            <a href="#" class="m-link">Mountain</a>  
        </span>
        <a href="#" class="m-nav__link">
            <span class="m-nav__link-text">About</span>
        </a>
        <a href="#" class="m-nav__link">
                <span class="m-nav__link-text">Terms</span>
            </a>            
        <a href="#"  class="m-nav__link">
            <span class="m-nav__link-text">Privacy</span>
        </a>
        <a href="#"  class="m-nav__link">
            <span class="m-nav__link-text">Contact Editor</span>
        </a> 
        <a href="#"  class="m-nav__link">
            <span class="m-nav__link-text">Help</span>
        </a>
    </li>           
</div>

如何构建像github一样的页脚页面?

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
ul {
  display:flex;
  justify-content:center;
}
li {
  display:block;
  padding-right:10px;
}

.item-2 {
  margin-right:auto;
  margin-left:auto;
}
&#13;
<ul>
  <li>Item 1</li>
  <li class="item-2">Item 2</li>
  <li>Item 3</li>
</ul>
&#13;
&#13;
&#13;

如果我从你的问题中了解你,你想要创建这样的东西