以下是代码

<!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个人博客首页模板的更多相关文章

  1. [python][django学习篇][10]再次修改博客首页模板

    目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...

  2. 使用django开发博客过程记录2——博客首页及博客详情的实现

    1.什么是CBV(Class-based views) 2.博客首页及博客详情实现 1.什么是CBV 什么是CBV?说白了就是以前是视图为处理请求返回响应的函数,有了cbv之后我们就可以用类处理请求和 ...

  3. 【Android 我的博客APP】1.抓取博客首页文章列表内容——网页数据抓取

    打算做个自己在博客园的博客APP,首先要能访问首页获取数据获取首页的文章列表,第一步抓取博客首页文章列表内容的功能已实现,在小米2S上的效果图如下: 思路是:通过编写的工具类访问网页,获取页面源代码, ...

  4. 分享3一个博客HTML5模板

    1.材类别:半透明 博客html模板 个人博客 半透明html5博客主题,半透明,博客,博客html模板,个人博客,html5,灰色,半透明html5博客主题是一款适合用于个人博客主题,风格非常不错. ...

  5. django博客项目5：博客首页视图(2)

    真正的 Django 博客首页视图 在此之前我们已经编写了 Blog 的首页视图,并且配置了 URL 和模板,让 Django 能够正确地处理 HTTP 请求并返回合适的 HTTP 响应.不过我们仅仅 ...

  6. django博客项目4：博客首页视图(1)

    Web 应用的交互过程其实就是 HTTP 请求与响应的过程.无论是在 PC 端还是移动端,我们通常使用浏览器来上网,上网流程大致来说是这样的: 我们打开浏览器,在地址栏输入想访问的网址,比如 http ...

  7. Django 博客首页视图

    Django 处理 HTTP 请求 Web 应用的交互过程其实就是 HTTP 请求与响应的过程.无论是在 PC 端还是移动端,我们通常使用浏览器来上网,上网流程大致来说是这样的: 我们打开浏览器,在地 ...

  8. 第 3 篇：实现博客首页文章列表 API

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 此前在讨论基于模板引擎的开发方式和 django-rest-framework 开发 ...

  9. 巨高兴，偶的文章 “如何在服务器上配置ODBC来访问本机DB2for Windows服务器”被推荐至CSDN博客首页

    非常高兴,偶的文章 "如何在服务器上配置ODBC来访问本机DB2for Windows服务器"被推荐至CSDN博客首页,截图留念.                  文章被推荐在C ...

随机推荐

  1. @Aspect 注解切面解析

    注解切面解析 注解切面解析器 /** * 注解切面解析器 */ public class BeanFactoryAspectJAdvisorsBuilder { /** * Bean 工厂 */ pr ...

  2. python-接口开发flask模块（一）工具类准备

    我们常常听说测试http接口.测试java接口,测试socket接口等等:那么python这么强大的语言当然也可以用来开发接口了. flask模块介绍: python中用来开发接口的模块:flask, ...

  3. C# CLR20R3 程序终止的几种解决方案 【转】

    [转]CLR20R3 程序终止的几种解决方案   这是因为.NET Framework 1.0 和 1.1 这两个版本对许多未处理异常(例如,线程池线程中的未处理异常)提供支撑,而 Framework ...

  4. 阶段3 1.Mybatis_03.自定义Mybatis框架_2.自定义Mybatis的分析-创建代理对象的分析

    如何创建代理对象,以及使用设计模式带来的优势 调用的组合关系 不关注的,执行JDBC那一套.第二个是解析XML,解析的技术有很多.

  5. 六：flask-自定义URL转换器

    flask进行url参数匹配的时候,是继承的werkzeug.routing.BaseConverter库进行重写的 导入看源码 里面有所有的URL参数数据类型的判断 也就是说,可以继承过后实现自己的 ...

  6. c# 排列组合代码类

    /// <summary> /// 排列组件算法类 /// </summary> /// <typeparam name="T"></ty ...

  7. 【Qt开发】设置Qt应用程序图标

    [Qt开发]设置Qt应用程序图标 标签:[Qt开发] 首先,准备一个图标,例如:zx.ico,并新建一个文本文档,在里面添加一行: IDI_ICON1 ICON DISCARDABLE"zx ...

  8. Windows.etc\hosts文件

    ZC:就是将 后面的项 重定位到 前面的项 1.目录:"C:\Windows\System32\drivers\etc" 文件:"C:\Windows\System32\ ...

  9. 第九周课程总结&实验报告七

    实验任务详情: 完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. package ...

  10. 分享一个linux系统中采用嵌套for循环比较两个数组内容，并输出相同值的shell脚本

    #!/bin/bash array1=(1 3 5 6 7 9) array2=(3 4 9) echo array1=${array1[@]} echo array2=${array2[@]} fo ...