SpringBoot--个人博客--6.页面设计与开发--归档页

6.1 笔记

<!--1-->
<span>
    <i class="mini teal circle icon"></i>关于可以练习的清单
    <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
</span>
<div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>


<!--2-->
<i class="mini teal circle icon"></i>关于可以练习的清单
<div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
<div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>

• i标签和文本在一起时，图标和文本会分成左右两部分显示，用span把二者显示到一起
  
  

6.2 代码

archives.html

<!--中间内容-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached m-padded-lr-large segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">归档</h3>
                </div>
                <div class="right aligned column">
                    共<h2 class="ui orange header m-inline-block m-text-thin">&nbsp114&nbsp;</h2>篇
                </div>
            </div>
        </div>
    </div>

    <h3 class="ui center aligned header">2020</h3>
    <div class="ui fluid vertical menu">
        <a href="#" target="_blank" class="item">
            <span>
                <i class="mini teal circle icon"></i>关于可以练习的清单
                <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
            </span>
            <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
            <span>
                <i class="mini teal circle icon"></i>关于可以练习的清单
                <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
            </span>
            <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
        </a>
    </div>

    <h3 class="ui center aligned header">2019</h3>
    <div class="ui fluid vertical menu">
        <a href="#" target="_blank" class="item">
            <span>
                <i class="mini teal circle icon"></i>关于可以练习的清单
                <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
            </span>
            <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
        </a>
        <a href="#" target="_blank" class="item">
            <span>
                <i class="mini teal circle icon"></i>关于可以练习的清单
                <div class="ui teal basic left pointing label m-padded-tb-mini">2月11日</div>
            </span>
            <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
        </a>
    </div>
    <div>

    </div>
</div>