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="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="./css/me.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="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-large">
<div class="ui container">
<div class="ui stackable grid">
<div class="eleven wide column">
<div class="ui top attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<h2 class="ui teal header">博客</h2>
</div>
<div class="right aligned column">
共<h3 class="ui orange header m-inline-block">14</h3>篇
</div>
</div>
</div>
<div class="ui attached segment">
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid">
<div class="eleven wide column m-text">
<h3 class="ui header">第一篇博客</h3>
<p>这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客这是第一篇博客</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img class="ui avatar image" alt="" src="https://picsum.photos/id/10/100/100"/>
<div class="content"><a href="#" class="header">zhangyun</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2020-10-31
</div>
<div class="item">
<i class="eye icon"></i>23
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin m-padded-tiny">查看详情</a>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a herf="#">
<img src="https://picsum.photos/id/10/700/500" alt="" class="ui rounded image" />
</a>
</div>
</div>
</div>
<div class="ui padded vertical segment m-padded-tb-large">
<div class="ui mobile reversed stackable grid"><!--stcakable加在了 grid和menu上-->
<div class="eleven wide column m-text">
<h3 class="ui header">第二篇博客</h3>
<p>这是第二篇博客</p>
<div class="ui grid">
<div class="eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img class="ui avatar image" alt="" src="https://picsum.photos/id/1011/100/100"/>
<div class="content"><a href="#" class="header">zhangyun</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2020-10-31
</div>
<div class="item">
<i class="eye icon"></i>23
</div>
</div>
</div>
<div class="right aligned five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin m-padded-tiny">查看详情</a>
</div>
</div>
</div>
<div class="right aligned five wide column">
<a herf="#">
<img src="https://picsum.photos/id/1011/700/500" alt="" class="ui rounded image" />
</a>
</div>
</div>
</div>
</div>
<div class="ui bottom attached segment">
<div class="ui middle aligned two column grid">
<div class="column">
<a href="#" class="ui mini teal basic button">上一页</a>
</div>
<div class="right aligned column">
<a href="#" class="ui mini basic teal button">下一页</a>
</div>
</div>
</div>
</div>
<div class="five wide column">
<!--右边 分类-->
<div class="ui segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="idea icon"></i>分类</div>
<div class="right aligned column">
<a href="#">
more
<i class="angle double right icon"></i>
</a>
</div>
</div>
</div>
<div class="ui teal segment">
<div class="ui fluid vertical menu">
<a class="item" href="#">
spring boot学习笔记
<div class="ui teal basic left pointing label">13</div>
</a>
<a href="#" class="item">
爬虫学习笔记
<div class="ui teal basic left pointing label">24</div>
</a>
<a href="#" class="item">
Halo项目学习笔记
<div class="ui teal basic left pointing label">4</div>
</a>
<a href="#" class="item">
mall项目学习笔记
<div class="ui teal basic left pointing label">24</div>
</a>
</div>
</div>
</div>
<div class="ui segments m-margin-top">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="tags icon"></i>标签
</div>
<div class="right aligned column">
<a href="#">
more
<i class="angle double right icon "></i>
</a>
</div>
</div>
</div>
<div class="ui teal segment">
<a class="ui teal basic left pointing label m-margin-tb" href="#" target="_blank">
spring
<div class="detail">23</div>
</a>
<a class="ui teal basic left pointing label m-margin-tb" href="#" target="_blank">
java
<div class="detail">43</div>
</a>
<a class="ui teal basic left pointing label m-margin-tb" href="#" target="_blank">
爬虫
<div class="detail">23</div>
</a>
<a class="ui teal basic left pointing label m-margin-tb" href="#" target="_blank">
Halo
<div class="detail">23</div>
</a>
<a class="ui teal basic left pointing label m-margin-tb" href="#" target="_blank">
mall
<div class="detail">23</div>
</a>
</div>
</div>
<!--最新推荐-->
<div class="ui segments m-margin-top">
<div class="ui secondary segment">
<i class="bookmark icon"></i>最新推荐
</div>
<div class="ui teal segment ">
<a href="#" class="m-black m-text-thin" target="_blank">一篇新的文章</a>
</div>
<div class="ui segment">
<a href="#" class="m-black m-text-thin" target="_blank">一篇新的文章</a>
</div>
<div class="ui segment">
<a href="#" class="m-black m-text-thin" target="_blank">一篇新的文章</a>
</div>
<div class="ui segment">
<a href="#" class="m-black m-text-thin" target="_blank">一篇新的文章</a>
</div>
</div>
<h4 class="ui horizontal divider header">扫码关注我</h4>
<div class="ui centered card" style="width:10em">
<img class="ui rounded image" src="images/9.jpg" alt="" >
</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")在类名钱加了个点 就不行
});
</script>
</body>
</html>
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;
}
/* 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;
}
/********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-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;
}
}
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
