spring实训笔记1

1、功能规划
在这里插入图片描述
2、新建WebStorm项目，在项目中创建static目录和index首页文件，并在static目录中新建css、js、images目录

3、index中设置移动端效果

4、访问semantic官网，查找cdn，并复制css及js


5、将jQuery放入js文件夹，并在首页引入

6、页面顶部内容

7、页面顶部效果

8、底部

    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事（UserStory）</a>
                        <a href="#" class="item">用户故事（UserStory）</a>
                        <a href="#" class="item">用户故事（UserStory）</a>
                    </div>
                </div>

                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email:1609587251</a>
                        <a href="#" class="item">QQ:1609587251</a>
                    </div>
                </div>

                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Lirebnl</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、协作、思考相关的任何<br>内容，希望可以给到这儿的人有所帮助</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright@2016-2017LirenmiDesigendByLirenmi</p>
        </div>
    </footer>

9、样式结果