SpringBoot--个人博客--4.页面设计与开发--分类页

4.1笔记

/*给导航栏下方加阴影*/
.m-shadow-small{
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

• box-shadow语法

box-shadow： h-shadow v-shadow blur spread color inset;

box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
h-shadow：必需的。水平阴影的位置。允许负值
v-shadow：必需的。垂直阴影的位置。允许负值
blur：可选。模糊距离
spread：可选。阴影的大小
color：可选。阴影的颜色
inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

• rgba()前三个代表颜色，最后一个代表透明度
• webkit-box-shadow用来适配某些浏览器的私有属性

4.2代码

types.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">&nbsp14&nbsp;</h2>篇
                </div>
            </div>
        </div>

        <div class="ui attached segment m-padded-tb">
            <div class="ui labeled button m-margin-tb-tiny">
                <a href="#" class="ui basic teal button">思考与感悟</a>
                <div class="ui basic teal left pointing label">24</div>
            </div>
            <div class="ui labeled button m-margin-tb-tiny">
                <a href="#" class="ui basic button">开发者手册</a>
                <div class="ui basic left pointing label">24</div>
            </div>
        </div>

        <div class="ui top attached teal segment">
            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid">
                    <div class="eleven wide column">
                        <h3 class="ui header">疫情下的魔幻现实主义</h3>
                        <p class="m-text">所谓“魔幻现实主义”，就是看起来很魔幻，但实际上很现实。之所以认为这个世界太魔幻，是因为之前的认识不够现实。</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="middle aligned item">
                                        <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header">方一帆</a></div>
                                    </div>
                                    <div class="middle aligned item">
                                        <i class="calendar icon"></i>2020-02-04
                                    </div>
                                    <div class="middle aligned item">
                                        <i class="eye icon"></i>3412
                                    </div>
                                </div>
                            </div>
                            <div class="middle aligned right aligned five wide column">
                                <a href="#" target="_blank" class="ui teal basic label m-padded-tb-tiny m-text-thin">认知升级</a>
                            </div>
                        </div>
                    </div>
                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="https://i.picsum.photos/id/1014/6016/4000.jpg" alt="" class="ui rounded image">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui attached m-padded-lr-large segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <a href="#" class="ui mini teal basic button">上一页</a>
                </div>
                <div class="right aligned column">
                    <a href="#" class="ui mini teal basic button">下一页</a>
                </div>
            </div>
        </div>
    </div>
</div>