SpringBoot--个人博客--7.页面设计与开发--关于我页

7.1 笔记

<a href="#" class="ui circular icon button"><i class="github icon "></i></a>

• 圆角图标
  

<a href="#" class="ui wechat circular icon button"><i class="weixin icon "></i></a>
<a href="#" class="ui qq circular icon button" data-content="12345678" data-position="bottom center"><i class="qq icon "></i></a>

<script>
	$('.wechat').popup( {
        popup:$('.wechat-qr'),
        position:'bottom center'
    })

    $('.qq').popup( )
</script>

• 鼠标放在图标上时，在图标下方显示内容
  
  

7.2 代码

about.html

<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <div class="eleven wide column">
                <img src="https://i.picsum.photos/id/1014/800/600.jpg" alt="" class="ui rounded image">
            </div>

            <div class="five wide column">
                <div class="ui top attached segment">
                    <div class="ui header">关于我</div>
                </div>
                <div class="ui attached segment">
                    <p class="m-text">一只菜鸟，折腾在0和1世界的老学姐；</p>
                    <p class="m-text">终身学习者；</p>
                </div>
                <div class="ui attached segment">
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">编程</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">写作</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">思考</div>
                    <div class="ui orange basic left pointing label m-margin-tb-tiny">运动</div>
                </div>
                <div class="ui attached segment">
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">HTML</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Python</div>
                    <div class="ui teal basic left pointing label m-margin-tb-tiny">Go</div>
                </div>
                <div class="ui bottom attached segment">
                    <a href="#" class="ui circular icon button"><i class="github icon "></i></a>
                    <a href="#" class="ui wechat circular icon button"><i class="weixin icon "></i></a>
                    <a href="#" class="ui qq circular icon button" data-content="12345678" data-position="bottom center"><i class="qq icon "></i></a>
                </div>

                <div class="ui wechat-qr flowing popup transition hidden">
                    <img src="./static/images/WeChat.jpg" alt="" class="ui rounded image" style="width: 100px">
                </div>
            </div>
        </div>
    </div>
</div>