关于我页

最新推荐文章于 2021-07-05 02:26:32 发布
最新推荐文章于 2021-07-05 02:26:32 发布
阅读量240 收藏
点赞数
分类专栏： bilibii-springboot-小而美的博客系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kaaaakaki/article/details/109563083
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0"></meta>
		<title>关于我</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="./css/me.css">
		<link rel="stylesheet" href="./css/about.css">

	</head>
	<body>
		<!-- 导航栏-->
		<nav class="ui inverted attached segment m-padded-tb-mini">
			<div class="container">
				<div class="ui  stackable inverted secondary menu toggle">
					<h2 class="ui teal header item">Blog</h2>
					<a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
					<a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
					<a href="#" class="active m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
					<div class="right m-item item m-mobile-hide">
						<div class="ui icon inverted transparent input">
							<input type="text" placeholder="Search..." />
							<i class="search link icon"></i>
						</div>
					</div>
				</div>
			</div>
			<a class="ui menu toggle black icon button m-top-right m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		<!-- 中间内容-->
		<div class="m-container m-padded-tb-big">
			<div class="ui container">
				<div class="ui stackable grid">
					<div class="five wide column">
						<div class="ui top attached segment">
							<div class="ui center aligned header">关于我</div>
						</div>
						<div class="ui attached segment">
							<p>我是谁我是谁我是谁无所事事我是谁我是谁</p>
							<p>I can be anyone at anytime</p>
						</div>
						<div class="ui attached segment">
							<div class="ui teal basic label m-margin-tb-tiny">spring</div>
							<div class="ui teal basic label m-margin-tb-tiny">Java</div>
							<div class="ui teal basic label m-margin-tb-tiny">Python</div>
							<div class="ui teal basic label m-margin-tb-tiny">Zookeeper</div>
							<div class="ui teal basic label m-margin-tb-tiny">Ngfix</div>
						</div>
						<div class="ui attached segment">
							<div class="ui orange basic label m-margin-tb-tiny">看电影</div>
							<div class="ui orange basic label m-margin-tb-tiny">听歌</div>
							<div class="ui orange basic label m-margin-tb-tiny">逛gai</div>
							<div class="ui orange basic label m-margin-tb-tiny">聊天</div>
						</div>
						<div class="ui bottom attached segment">
							<div class="ui circular icon button"><i class="github icon"></i></div>
							<div class="ui circular icon button"><i class="weixin icon"></i></div>
							<div class="ui circular icon button"><i class="qq icon"></i></div>
						</div>
					</div>
					<div class="eleven wide column">
						<div class="ui top attached segment">
							<div class="ui  middle aligned   two column grid">  <!--class类名的顺序不对也没有效果-->
								<div class="column">
									<h4 class="ui teal header">账号信息</h4>
								</div>
								<div class="right aligned column">
									<div class="ui orange basic mini button">修改信息</div>
								</div>
								<div class="msg-contain">
									<div class="msg-item">
										<div class="key-msg">ID</div>
										<div class="key-val">Kaaaakaki</div>
										<div></div>
									</div>
									<div class="msg-item">
										<div class="key-msg">昵称</div>
										<div class="key-val">Kaaaakaki</div>
									</div>
									<div class="msg-item">
										<div class="key-msg">简介</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
									<div class="msg-item">
										<div class="key-msg">姓名</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
									<div class="msg-item">
										<div class="key-msg">性别</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
								</div>
							</div>
							
							<div class="ui divider"></div>
							
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h4 class="ui teal header">学历信息</h4>
								</div>
								<div class="ui right aligned column">
									<div class="ui orange basic mini button">学历认证</div>
								</div>
								<div class="msg-contain">
									<div class="msg-item">
										<div class="key-msg">学校</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
									<div class="msg-item">
										<div class="key-msg">毕业时间</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
								</div>
							</div>
							
							<div class="ui divider"></div>
							
							
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h4 class="ui teal header">任职信息</h4>
								</div>
								<div class="ui right aligned column">
									<div class="ui orange basic mini button">公司认证</div>
								</div>
								<div class="msg-contain">
									<div class="msg-item">
										<div class="key-msg">公司</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
									<div class="msg-item">
										<div class="key-msg">职位</div>
										<div class="key-val"><i class="orange key icon"></i><a href="#">马上填写</a></div>
									</div>
								</div>
							</div>
							
							
							<div class="ui divider"></div>
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h4 class="ui teal header">简历上传</h4>
								</div>
								<div class="ui right aligned column">
									<div class="ui orange basic mini button">简历上传</div>
								</div>
							</div>
							<div class="msg-contain">
								<div class="msg-item">
									<div class="key-msg">简历</div>
									<div class="key-val">
										待上传
										<p>请上传2M以内，word或pdf文件</p>
										</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		
		<!-- 底部-->
		<footer class="ui inverted vertical segment m-padded-tb-massive">
			<div class="ui  center aligned container">
				<div class="ui inverted stackable divided grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="./images/9.jpg" alt="" class="ui rounded image" style="width: 110px;"  />
							</div>
						</div>
					</div>
					<div class="four wide column">
						<h4 class="ui inverted header m-text-spaced m-text-thin">最新博客</h4>
						<div class="ui inverted link list m-text-spaced m-text-thin m-opacity-mini">
							<a href="#" class="item">我们的故事</a>
							<a href="#" class="item">我们的故事</a>
							<a href="#" class="item">我们的故事</a>
						</div>
					</div>
					<div class="four wide column">
						<h4 class="ui inverted header m-text-spaced m-text-thin">最新博客</h4>
						<div class="ui inverted link list m-text-spaced m-text-thin m-opacity-mini">
							<a href="#" class="item">我们的故事</a>
							<a href="#" class="item">我们的故事</a>
							<a href="#" class="item">我们的故事</a>
						</div>
					</div>
					<div class="five wide column">
						<h4 class="ui inverted header m-text-spaced m-text-thin">最新博客</h4>
						<p class="m-text-spaced m-text-thin m-opacity-mini">这是我们的最新的博客</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-spaced m-text-thin m-opacity-mini">Copyright@2019-2020 oldPumpkin</p>
			</div>
			
		</footer>
		
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		<script>
			$(".menu.toggle").click(function(){
				$(".m-item").toggleClass("m-mobile-hide");//开展我在toggleClass(".m-mobile-hide")在类名钱加了个点 就不行
			});
			$("#payButton").popup({
				popup:$(".payQR.popup"),
				on:'click',
				position:'bottom center'
			});
		</script>
	</body>

</html>

about.css

/*这一段css 就是看别人的网页  通过审查元素中的element定位元素  然后查看该元素的style  写出来的效果*/
/*仿造csdn 我的详情页*/
.key-msg{
	text-align: right;
    float: left;
	word-break: break-all;
	width: 64px;
}
.msg-contain{
	
}
.key-val{
	word-break: break-all;
	padding-left: 16px !important;
	flex:1;
}
.msg-item{
	font-size: 14px;
	line-height: 34px;
	width: 100%;
	display: flex;
}

me.css

/*padding*/
.m-padded-tiny{
	padding: 0.4em;
}
.m-padded-tb-mini{
	padding-top: 0.2em !important;
	padding-bottom: 0.2em !important;
}
.m-padded-tb-tiny{
	padding-top: 0.5em !important;
	padding-bottom: 0.5em !important;
}
.m-padded-tb-small{
	padding-top: 1em !important;
	padding-bottom: 1em !important;
}
.m-padded-tb-big{
	padding-top: 2em !important;
	padding-bottom: 2em !important;
}
.m-padded-tb-large{
	padding-top: 3em !important;
	padding-bottom: 3em !important;
}
.m-padded-tb-huge{
	padding-top: 4em !important;
	padding-bottom: 4em !important;
}
.m-padded-tb-massive{
	padding-top: 5em !important;
	padding-bottom: 5em !important;
}
.m-padded-lr-reponsitive{
	padding-left: 4em !important;
	padding-right: 4em !important;
}
.m-padded-lr{
	padding-left:3em !important;
	padding-right: 3em !important;
}

/* margin */
.m-margin-tb-tiny{
	margin: 0.4em !important;
}
.m-margin-tb-small{
	margin: 0.7em !important;
}
.m-margin-tb{
	margin: 1em !important;
}
.m-margin-tb-big{
	margin: 1.5em !important;
}
.m-margin-tb-large{
	margin: 2em !important;
}
.m-margin-tb-huge{
	margin: 2.5em !important;
}
.m-margin-top-small{
	margin-top: 0.5em !important;
}
.m-margin-top{
	margin-top:1em !important ;
}
.m-margin-top-big{
	margin-top: 1.5em;
}
.m-margin-lr-small-responsitive{
	margin-left: 0.5em !important;
	margin-right: 0.5em !important;
}
.m-margin-lr{
	margin-left: 1em !important;
	margin-right: 1em !important;
}
.m-margin-lr-big{
	margin-left: 1.5em !important;
	margin-right: 1.5em !important;
}




/********text**********/
.m-text{
	font-weight: 300 !important;
	letter-spacing: 0.9 !important;
	line-height:1.8px !important;
}
.m-text-thin{
	font-weight: 300 !important;
}
.m-text-spaced{
	letter-spacing: 1px !important;
}
.m-text-height{
	line-height:1.8 !important;
}
.m-opacity-mini{
	opacity:0.8;
}
.m-black{
	color: #333;
}

/********display*******/
.m-inline-block{
	display: inline-block;
}


.m-container{
	max-width:72em !important;
	margin:auto ;
}
.m-container-small{
	max-width: 60em !important;
	margin: auto;
}
.m-container-small{
	max-width:60em !important;
	margin:auto ;
}


.m-top-right{
	position: absolute;
	top:0px;
	right:0px;
}
.m-mobile-show{
	display: none !important;
}

@media screen  and (max-width:768px){
	.m-mobile-hide{
		display: none !important;
	}
	.m-mobile-show{
		display: block !important;
	}
	.m-padded-lr-reponsitive{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.m-mobile-wide{
		width: 100% !important;
	}
	.m-mobile-margin-bottom-small{
		margin-bottom: 0.5em !important;
	}
	.m-margin-lr-small-responsitive{
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

在这里插入图片描述

Kaaaakaki
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Django(二)精美博客搭建(10)实现关于我页及文章详情页上一篇/下一篇bug解决
Mikasa的博客
06-29 450
本章主要讲述 【关于我】 页面的具体实现，以及之前咱们遗留的 【文章详情页上一篇/下一篇跳转bug的解决】
SSM实训：8、关于我页
qq_46300856的博客
07-05 146
文章目录Spring Boot开发小而美的个人博客-李哥1、页面开发-关于我页2、实现代码3、CSS4、遇到的问题5、效果 Spring Boot开发小而美的个人博客-李哥 1、页面开发-关于我页 about.html,me.css (通过拷贝types.html后修改) 2、实现代码 3、CSS 4、遇到的问题 5、效果 ...
实训 个人博客系统五 关于我页
aqaerw的博客
07-05 199
1.新建文件about.html 2.编写左边图片部分: 只需要插入一张图片: 3.编写右边文章部分: 4.css文件: body{ background: url("./static/images/bg.jpg"); } /*----padding----*/ .m-padded-mini{ padding: 0.2em !important; } .m-padded-tiny{ padding: 0.3em !important; } .m-padded-
SpringBoot--个人博客--7.页面设计与开发--关于我页
weixin_41988224的博客
02-11 359
7.1 笔记 <a href="#" class="ui circular icon button"><i class="github icon "></i></a> 圆角图标 <a href="#" class="ui wechat circular icon button"><i class="weixin ...
我的网站：关于我的页面
02-22
我的网站我的关于我的页面投资组合网站Github 完整网站目的和功能将创建一个网站，以显示我在html和css中的技能，并在在线空间上向未来的雇主介绍我自己。 使用多个页面和导航栏在页面上移动时，除非调整大小然后...
我的主页静态页面
06-22
网上找了好久静态页面，做后台。很难找，现在资源都加密了。
关于我
02-11
关于我页面 我的第一个代码研究员201课程实验项目。 这是一个使用HTML，CSS和JavaScript创建的简单的“关于我”页面。 它包括简短的传记，是/否测验提示和“前十名”列表。 还包括一个交互式猜谜游戏。
关于我猜游戏
02-14
关于我猜游戏**此页面是关于更多了解Khaled Bassam Dardour'此站点的所有者'****我们将通过猜测问题来了解有关他的更多信息。 并赋予客户提出问题的能力。 所有者提供了有关他的教育和梦想的一些详细信息以及一些...
commonmark-java插件使用：Markdown转HTML
Kaaaakaki的博客
11-29 1746
我们使用markdown语法存储在数据库中的文本 要取出来显示为HTML格式需要用到一个外部插件 不然它就是markdown语法的一堆字符串 Github插件地址 使用插件 1.在pom,xml引入需要用的依赖 <dependency> <groupId>com.atlassian.commonmark</groupId> <artifactId>commonmark</artifactId> <versi
1.semantic-ui的安装和引用学习总结
Kaaaakaki的博客
10-31 1709
课程地址：https://www.bilibili.com/video/BV13t411T72J?p=4 评论里有一个人做的博客 ：https://onestar.newstar.net.cn/
JPA报错（could not execute statement）
Kaaaakaki的博客
11-21 1323
在新增新的博客 即向t_blog添加第一条数据时 报错 [10501]SQLSTATE[HY000]: General error: 1364 Field ‘id’ doesn’t have a default value could not execute statement; nested exception is org.hibernate.exception.GenericJDBCException: could not execute statement 参考百度 一位大佬的 https:/
使用Thymeleaf为Html页面的公共部分创建fragment
Kaaaakaki的博客
11-11 624
自定义异常需要继承RuntimeException 运行时异常才可以捕获
使用Aspectj获取请求的相关信息
Kaaaakaki的博客
11-11 564
package com.example.blog.aspects; import org.aspectj.lang.JoinPoint; import org.aspectj.lang.annotation.*; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Component; import org.springframework.web.context.requ
springboot结合hibernate jpa自动创建数据表
Kaaaakaki的博客
11-14 559
实体类一定要写对 仔细检查实体类的注解 字段类型 之前一直可以正常启动 但就是创建不了表 也不提示错误 不知道是什么原因导致自动创建表失败 先仔细检查实体类 字段类型 各个实体类之间的联系字段有没有写对 pom.xml中的依赖有没有引入 检查application-dev,yml中数据库的链接配置有没有问题 之前在 Blog.java中 这个字段的类型写错了 @OneToMany(mappedBy = "blog") private Comment comments = new Comme
@GeneratedValue
Kaaaakaki的博客
11-19 255
@GeneratedValue 两个参数strategy generator 四种strategy https://www.jianshu.com/p/34d8199ac551 在 t_type 表中 添加的数据已经到了17条 id 到了17 在 t_tag 表中 添加的第一条数据的 id 就从18 开始 ？？？ 两个表公用一个主键计数器吗 为啥 第一条数据的 id 不是从 0 开始 后来在 Tag.java 中 添加了策略 说的是这是 主键自增策略 但是添加第
3.个人博客详情页
Kaaaakaki的博客
11-01 243
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"></meta> <title>首页</title> <link rel="stylesheet" href="https://cdn.jsdel
2.首页
Kaaaakaki的博客
10-31 134
bilibili springboot小而美博客系统首页前端代码及图 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"></meta> <title>首页</title> <link rel="
前端插件总结
Kaaaakaki的博客
11-14 124
https://github.com/flesler/jquery.scrollTo 平滑滚动插件 eg <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script> <script> $("#toTop-scroll").click(function(){ $(window).scrollTo(0,700) });<script
关于我页面纯html
最新发布
05-31
您想问关于如何使用 HTML 编写纯 HTML 页面的问题吗？如果是的话，以下是一个简单的 HTML 页面示例，您可以参考其中的代码： ```html <!DOCTYPE html> <html> <head> <title>我的页面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } nav { background-color: #eee; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { display: inline-block; margin-right: 20px; } nav li a { color: #333; text-decoration: none; } section { padding: 20px; } </style> </head> <body> <header> <h1>我的页面</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h2>欢迎来到我的页面</h2> <p>这是一个纯 HTML 页面示例。</p> <p>您可以在这里添加您自己的内容。</p> </section> </body> </html> ``` 这个示例页面包括一个简单的头部、导航和内容部分。您可以在 `<style>` 标签中定义页面的样式，可以在 `<body>` 标签中添加您自己的内容，例如文本、图片等等。希望这对您有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值