自学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"> 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>
版权声明：本文为zxfei原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。