自学semantic UI个人博客首页模板

Posted 行之间

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自学semantic UI个人博客首页模板相关的知识,希望对你有一定的参考价值。

以下是代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">

        <!--cdn方式引入-->
        <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">

        <!--静态方式引入-->
        <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
        <script type="text/javascript" src="../static/js/jquery-slim.min.js"></script>
        <script src="semantic/dist/semantic.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../static/css/icon.min.css" />

        <title>index</title>
    </head>

    <body style="background: url(../static/assets/img/bg-so-white.png);">
        <!--1.导航栏部分start-->
        <nav class="ui fixed inverted menu stackable" style="box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;">
            <div class="ui container">
                <a href="#" class="header item">
                    <img class="logo" src="../static/assets/img/logo.png">&nbsp;&nbsp;MY BLOG
                </a>
                <a href="#" class="item"><i class="icon tiny home"></i>首页</a>
                <a href="#" class="item"><i class="icon tiny idea"></i>分类</a>
                <a href="#" class="item"><i class="icon tiny tags"></i>标签</a>
                <a href="#" class="item"><i class="icon tiny clone"></i>归档</a>
                <a href="#" class="item"><i class="icon tiny info"></i>关于我</a>

                <!--下拉列表菜单start-->
                <div class="ui simple dropdown item">更多 <i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item" href="#">Link Item</a>
                        <a class="item" href="#">Link Item</a>
                        <div class="divider"></div>
                        <div class="header">Header Item</div>
                        <div class="item">
                            <i class="dropdown icon"></i> Sub Menu
                            <div class="menu">
                                <a class="item" href="#">Link Item</a>
                                <a class="item" href="#">Link Item</a>
                            </div>
                        </div>
                        <a class="item" href="#">Link Item</a>
                    </div>
                </div>
                <!--下拉列表菜单end-->

                <div class="item right">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search..." />
                        <i class="icon search link"></i>
                    </div>
                </div>
            </div>
        </nav>
        <!--1.导航栏部分end-->

        <!--2、中间内容部分start-->
        <div class="ui container" style="padding-top: 7em;">
            <div class="ui grid stackable">
                <div class="eleven wide column">
                    <!--中间内容header-->
                    <div class="ui segment top attached">
                        <div class="ui two column grid middle aligned">
                            <div class="column"><h3 class="ui teal header" style="font-weight: 600;">我的博客</h3></div>
                            <div class="column right aligned">
                                <strong>共 <h2 class="ui orange header" style="display: inline-block;">14</h2> 篇</strong>
                            </div>
                        </div>
                    </div>
                    
                    <!--中间左边博客列表start-->
                    <div class="ui segment attached placeholder">
                        <div class="ui vertical segment padded">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">我是标题</h3>
                                    <p>这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!</p>
                                    <div class="ui grid middle aligned">
                                        <div class="column eleven wide ">
                                            <div class="ui link list horizontal mini">
                                                <div class="item middle aligned">
                                                    <img src="https://unsplash.it/100/100?image=1005"/ class="ui image avatar">
                                                    <div class="content"><a href="#" class="header">头像描述</a></div>
                                                </div>
                                                <div class="item middle aligned"><i class="icon calendar"></i> 2017-10-02</div>
                                                <div class="item middle aligned"><i class="icon eye"></i> 2536</div>
                                            </div>
                                        </div>
                                        <div class="column five wide right aligned"><a href="#" target="_blank" class="ui label teal tiny basic">认证升级</a></div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank"><img class="ui image rounded" src="https://unsplash.it/800/450?image=1005"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui vertical segment padded" style="margin-top: 1em;">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">我是标题</h3>
                                    <p>这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!</p>
                                    <div class="ui grid middle aligned">
                                        <div class="column eleven wide ">
                                            <div class="ui link list horizontal mini">
                                                <div class="item middle aligned">
                                                    <img src="https://unsplash.it/100/100?image=1005"/ class="ui image avatar">
                                                    <div class="content"><a href="#" class="header">头像描述</a></div>
                                                </div>
                                                <div class="item middle aligned"><i class="icon calendar"></i> 2017-10-02</div>
                                                <div class="item middle aligned"><i class="icon eye"></i> 2536</div>
                                            </div>
                                        </div>
                                        <div class="column five wide right aligned"><a href="#" target="_blank" class="ui label teal tiny basic">认证升级</a></div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank"><img class="ui image rounded" src="https://unsplash.it/800/450?image=1005"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui vertical segment padded" style="margin-top: 1em;">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">我是标题</h3>
                                    <p>这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!</p>
                                    <div class="ui grid middle aligned">
                                        <div class="column eleven wide ">
                                            <div class="ui link list horizontal mini">
                                                <div class="item middle aligned">
                                                    <img src="https://unsplash.it/100/100?image=1005"/ class="ui image avatar">
                                                    <div class="content"><a href="#" class="header">头像描述</a></div>
                                                </div>
                                                <div class="item middle aligned"><i class="icon calendar"></i> 2017-10-02</div>
                                                <div class="item middle aligned"><i class="icon eye"></i> 2536</div>
                                            </div>
                                        </div>
                                        <div class="column five wide right aligned"><a href="#" target="_blank" class="ui label teal tiny basic">认证升级</a></div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank"><img class="ui image rounded" src="https://unsplash.it/800/450?image=1005"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui vertical segment padded" style="margin-top: 1em;">
                            <div class="ui grid stackable mobile reversed">
                                <div class="eleven wide column">
                                    <h3 class="ui header">我是标题</h3>
                                    <p>这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!这里是博客内容!</p>
                                    <div class="ui grid middle aligned">
                                        <div class="column eleven wide ">
                                            <div class="ui link list horizontal mini">
                                                <div class="item middle aligned">
                                                    <img src="https://unsplash.it/100/100?image=1005"/ class="ui image avatar">
                                                    <div class="content"><a href="#" class="header">头像描述</a></div>
                                                </div>
                                                <div class="item middle aligned"><i class="icon calendar"></i> 2017-10-02</div>
                                                <div class="item middle aligned"><i class="icon eye"></i> 2536</div>
                                            </div>
                                        </div>
                                        <div class="column five wide right aligned"><a href="#" target="_blank" class="ui label teal tiny basic">认证升级</a></div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <a href="#" target="_blank"><img class="ui image rounded" src="https://unsplash.it/800/450?image=1005"/></a>
                                </div>
                            </div>
                        </div>
                    </div><!--中间博客内容end-->
                    
                    <!--中间footer-->
                    <div class="ui segment bottom attached padd">
                        <div class="ui two column grid middle aligned">
                            <div class="column"><a href="#" class="ui button teal basic mini">上一页</a></div>
                            <div class="column right aligned">
                                <a href="#" class="ui button teal basic mini">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                    
                <!--*****中间右边小卡片*****-->
                <div class="five wide column">
                    <!--*****分类start*****-->
                    <div class="ui segments">
                        <div class="ui segment secondary">
                            <div class="ui two column grid">
                                <div class="column"><i class="icon list"></i>分类</div>
                                <div class="column right aligned"><a href="#" target="_blank">more  >></a></div>
                            </div>
                        </div>
                        <div class="ui segment teal">
                            <div class="ui vertical menu fluid">
                                <a class="teal item">学习日志
                                    <div class="ui teal left pointing label basic">13</div>
                                </a>
                                <a class="teal item">思考与感悟
                                    <div class="ui teal left pointing label basic">14</div>
                                </a>
                                <a class="teal item">HTML
                                    <div class="ui teal left pointing label basic">8</div>
                                </a>
                                <div class="item">
                                    <div class="ui transparent icon input">
                                        <input type="text" placeholder="Search mail...">
                                        <i class="search icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--*****分类end*****-->
                    
                    <!--标签start-->
                    <div class="ui segments" style="margin-top: 2em;">
                        <div class="ui segment secondary">
                            <div class="ui two column grid">
                                <div class="column"><i class="icon tags"></i>标签</div>
                                <div class="column right aligned"><a href="#" target="_blank">more  >></a></div>
                            </div>
                        </div>
                        <div class="ui segment teal">
                            <a href="#" target="_blank" class="ui label teal basic" style="margin: 0.2em;">Html<div class="detail">3</div></a>
                            <a href="#" target="_blank" class="ui label teal basic" style="margin: 0.2em;">方法论<div class="detail">8</div></a>
                            <a href="#" target="_blank" class="ui label teal basic" style="margin: 0.2em;">算法<div class="detail">93</div></a>
                            <a href="#" target="_blank" class="ui label teal basic" style="margin: 0.2em;">Python<div class="detail">53</div></a>
                            <a href="#" target="_blank" class="ui label teal basic" style="margin: 0.2em;">框架<div class="detail">2</div></a>
                        </div>
                    </div><!--标签end-->
                    
                    <!--*****最新推荐start*****-->
                    <div class="ui segments" style="margin-top: 2em;">
                        <div class="ui segment secondary">
                            <div class="column"><i class="icon bookmark"></i>最新推荐</div>
                        </div>
                        <div class="ui segment teal">
                            <a href="#" target="_blank" style="color: #1A531B;font-weight: 500;">用户故事(User Story)</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" style="color: #1A531B;font-weight: 500;">网络安全</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" style="color: #1A531B;font-weight: 500;">SSM整合</a>
                        </div>
                        <div class="ui segment">
                            <a href="#" target="_blank" style="color: #1A531B;font-weight: 500;">Spring Boot框架</a>
                        </div>
                    </div><!--*****最新推荐end*****-->
                    
                    <!--*****二维码*****-->
                    <h4 class="ui horizontal divider header" style="margin-top: 2em;">扫码关注我</h4>
                    <div class="ui card centered" style="width: 10em;">
                        <img src="../static/assets/img/wechat.jpg" class="ui image rounded"/>
                    </div>
                </div>
                <br /><br />
            </div>
        </div>
        <!--2、中间内容部分end-->

        <!--3.底部部分start-->
        <footer class="ui inverted vertical footer segment">
            <div class="ui center aligned container">
                <div class="ui stackable inverted divided grid middle aligned">
                    <div class="three wide column">
                        <h4 class="ui inverted header"></h4>
                        <img class="ui rounded image" style="margin-left: 40px;" src="../static/assets/img/wechat.jpg" width="75">
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Link One</a>
                            <a href="#" class="item">Link Two</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header">最多阅读</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Link One</a>
                            <a href="#" class="item">Link Two</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header">Footer Header</h4>
                        <p>Extra space for a call to action inside the footer could help re-engage users</p>
                    </div>
                </div>
                <div class="ui inverted section divider"  style="margin-bottom: 0px;"></div>
                <div class="ui horizontal inverted small divided link list">
                    <a class="item" href="#">Site Map</a>
                    <a class="item" href="#">Contact Us</a>
                    <a class="item" href="#">Terms and Conditions</a>
                    <a class="item" href="#">Privacy Policy</a>
                </div>
            </div>
        </footer>
        <!--3.底部部分end-->

        <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
    </body>

</html>

以上是关于自学semantic UI个人博客首页模板的主要内容,如果未能解决你的问题,请参考以下文章

个人博客项目踩坑——Semantic UI中popup无法弹出

静态页面复习--用semantic UI写一个10min首页

15Semantic-UI之导航

14Semantic-UI之菜单样式

semantic-ui前端UI框架

160908前端开发框架Semantic UI