<!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-small m-padded-tb-big">
<div class="ui container">
<!--头部-->
<div class="ui top attached segment">
<div class="ui horizontal link list">
<div class="item">
<img class="ui avatar image" src="https://picsum.photos/id/103/100/100" alt=""></img>
<div class="content"><a class="item" href="#">李仁密</a></div>
</div>
<div class="item">
<i class="calendar icon"></i>2020-11-1
</div>
<div class="item">
<i class="eye icon"></i>45
</div>
</div>
</div>
<div class="ui attached segment">
<img src="https://picsum.photos/id/103/367/200" class="ui fluid rounded image" alt="" />
</div>
<!--文章内容-->
<div class="ui attached segment">
<div class="ui right aligned basic segment">
<a class="ui basic orange label">原创</a>
</div>
<h2 class="ui center aligned header">这是第一篇博客的题目</h4>
<div class="content m-padded-tb-big m-padded-lr-reponsitive ">
课程地址：httpswww.bilibili.comvideoBV13t411T72Jp=4
评论里有一个人做的博客 ：httpsonestar.newstar.net.cn
semantic-ui两种使用方式 ：
一种直接引入CDN加速
```html
link rel=stylesheet href=httpscdn.jsdelivr.netnpmsemantic-ui@2.4.2distsemantic.min.css
script src=httpscdn.jsdelivr.netnpmjquery@3.2distjquery.min.jsscript
script src=httpscdn.jsdelivr.netnpmsemantic-ui@2.4.2distsemantic.min.jsscript
```
另一种安装semanticui
semantic UI可以有两种方式安装
一种是直接下载压缩包，解压后调用就可以使用了，其实也就是说无需安装，另一种方式是用gulp进行安装。
用gulp安装的优点是，你可以自己修改sementic ui中的样式，这样就更灵活一点，而最简化安装方式下不能修改，只能用默认样式。
要先安装gulp,而安装gulp是NPM的一个模块，所以需要先安装NPM，而NPM又是node.js的一个模块，所以，就需要安装node.js， 所以：
第一步是安装node.js，提示：官网有两个版本可以选择，最好是选LTS版本，这个是长期支持版本。
第二步是安装gulp：cmd打开控制台，输入：
npm install -g gulp
第三步安装semantic UI CD到需要安装semantic的文件夹，然后输入：
```
npm install semantic-ui --save
cd semantic
gulp build
```
</div>
<div class=" m-padded-tb-big m-padded-lr">
<a class="ui teal basic left pointing label">spring boot</a>
</div>
<div class="ui center aligned basic segment">
<div id="payButton" class="ui orange basic circular button">打赏</div>
</div>
<div class="ui payQR flowing popup transition hidden">
<div class="ui basic orange label">
<div class="ui images" style="font-size: inherit !important;"><!--inherit继承父标签的属性 因为在semantic中 class为images的标签 禁用了字体 font-size属性是写的0 这样字体就显示不出来-->
<div class="image">
<img src="images/9.jpg" class="ui rounded bordered image" alt="" style="width: 120px;">
<div>支付宝</div>
</div>
<div class="image">
<img src="images/9.jpg" class="ui rounded bordered image" style="width: 120px;" alt="">
<div>微信</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui attached positive message">
<div class="ui middle aligned grid"><!--middle aligned 表示垂直居中-->
<div class="eleven wide column">
<div class="list">
<li>作者：不知名帅哥</li>
<li>发表时间：1999-09-09</li>
<li>联系我：12312312323</li>
</div>
</div>
<div class="five wide column">
<img class="ui right floated rounded bordered image" src="images/9.jpg" style="width: 120px;" alt=""/>
</div>
</div>
</div>
<div class="ui bottom attached segment">
<!--显示已经有的评论内容 用semantic views comment的组件-->
<div class="ui teal segment">
<div class="ui comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/id/103/100/100">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/id/103/100/100">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/id/103/100/100">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="https://picsum.photos/id/103/100/100">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">回复</a>
</div>
</div>
</div>
</div>
</div>
<!--用户输入评论的地方-->
<div class="ui form">
<div class="field">
<textarea name="content" placeholder="请输入评论内容"></textarea>
</div>
<div class="fields">
<div class="field m-mobile-wide m-mobile-margin-bottom-small">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="nickname" placeholder="ID" />
</div>
</div>
<div class="field m-mobile-wide m-mobile-margin-bottom-small">
<div class="ui left icon input">
<i class="email icon"></i>
<input type="text" name="email" placeholder="邮箱"/>
</div>
</div>
<div class="field m-mobile-wide m-mobile-margin-bottom-small">
<button class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
</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>
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;
}
/* 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-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;
}
}
扫一扫
490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
