自学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>
自学semantic UI个人博客首页模板的更多相关文章
- [python][django学习篇][10]再次修改博客首页模板
目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...
- 使用django开发博客过程记录2——博客首页及博客详情的实现
1.什么是CBV(Class-based views) 2.博客首页及博客详情实现 1.什么是CBV 什么是CBV?说白了就是以前是视图为处理请求返回响应的函数,有了cbv之后我们就可以用类处理请求和 ...
- 【Android 我的博客APP】1.抓取博客首页文章列表内容——网页数据抓取
打算做个自己在博客园的博客APP,首先要能访问首页获取数据获取首页的文章列表,第一步抓取博客首页文章列表内容的功能已实现,在小米2S上的效果图如下: 思路是:通过编写的工具类访问网页,获取页面源代码, ...
- 分享3一个博客HTML5模板
1.材类别:半透明 博客html模板 个人博客 半透明html5博客主题,半透明,博客,博客html模板,个人博客,html5,灰色,半透明html5博客主题是一款适合用于个人博客主题,风格非常不错. ...
- django博客项目5：博客首页视图(2)
真正的 Django 博客首页视图 在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应.不过我们仅仅 ...
- django博客项目4：博客首页视图(1)
Web 应用的交互过程其实就是 HTTP 请求与响应的过程.无论是在 PC 端还是移动端,我们通常使用浏览器来上网,上网流程大致来说是这样的: 我们打开浏览器,在地址栏输入想访问的网址,比如 http ...
- Django 博客首页视图
Django 处理 HTTP 请求 Web 应用的交互过程其实就是 HTTP 请求与响应的过程.无论是在 PC 端还是移动端,我们通常使用浏览器来上网,上网流程大致来说是这样的: 我们打开浏览器,在地 ...
- 第 3 篇：实现博客首页文章列表 API
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 此前在讨论基于模板引擎的开发方式和 django-rest-framework 开发 ...
- 巨高兴，偶的文章 “如何在服务器上配置ODBC来访问本机DB2for Windows服务器”被推荐至CSDN博客首页
非常高兴,偶的文章 "如何在服务器上配置ODBC来访问本机DB2for Windows服务器"被推荐至CSDN博客首页,截图留念. 文章被推荐在C ...
随机推荐
- deepfm代码参考
https://github.com/lambdaji/tf_repos/blob/master/deep_ctr/Model_pipeline/DeepFM.py https://www.cnblo ...
- 【Centos7】 中使用Supervisor守护进程
原文出处: Centos7 中使用Supervisor守护进程 配置supervisor实现进程守护 1.安装supervisor yum install Supervisor 2.启动服务 su ...
- delphi 跨版本DLL调用嵌入窗体实现
delphi 能实现把别的DLL的窗体句柄查到后,贴到PANL之中,此类文章网上不少,而如果是delphi不同版本开发的DLL互调时,一些控件内部的定义有所区别,因为无法(至少目前我觉得理论上不可行) ...
- 转：【开源必备】常用git命令
原文:https://zhuanlan.zhihu.com/p/25868120 [开源必备]常用git命令 [已重置] 如今在技术领域,码农们习惯了开源,也离不开免费开源的代码,轻松获取代码,不 ...
- HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效
为HTML添加新元素 添加新元素 + 该元素定义样式 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- Dubbo原理学习
Dubbo源码及原理学习 阿里中间件团队博客 Dubbo官网 Dubbo源码解析 Dubbo源码解析-掘金 Dubbo源码解析-赵计刚 Dubbo系列 源码总结+最近感悟
- 极*Java速成教程 - (5)
Java语言基础 容器 这个世界是有序的,将Java对象零散地放到内存中是不符合世界常理的,特别是有一大组相似的甚至不知道有多少数据的时候.把Java对象装进盒子里可以有序收纳,这个盒子就叫容器. 初 ...
- Python入门之format()方法
在此列出format()方法的一些基本使用: >>> '{}{}{}'.format('圆周率是',3.1415926,'...') '圆周率是3.1415926...' >& ...
- 《剑指offer》面试题27 二叉搜索树与双向链表 Java版
(将BST改成排序的双向链表.) 我的方法一:根据BST的性质,如果我们中序遍历BST,将会得到一个从小到大排序的序列.如果我们将包含这些数字的节点连接起来,就形成了一个链表,形成双向链表也很简单.关 ...
- linux通信之信号
一. 信号介绍 1.1. 什么是信号 1.1.1. 信号是内容受限的一种异步通信机制 a. 之所以称之为受限是因为通信内容在OS已经规定,内容简单,单一(signal.h文件中定义好) b. 信号本质 ...