---
title: 任務：刻一個spring作品-從前端~後端=中端-文章內容
tags: 程式筆記-第36-1週
---
延續https://medium.com/p/98cb5187a566/edit
因為這些都是其他頁面的筆記~
ICON來源網址:
https://semantic-ui.com/elements/icon.html
和
https://fontawesome.com/v4.7.0/icons/
(這裡ICON名稱的-要改成""空格)
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
的angle-double-right要寫angle double right icon
1.做分類:
畫線那句重複幾次就有幾個標籤
長這樣

程式碼:
https://gist.github.com/jzs2home/bc3fbe0b38aa501b477dad9f26c22886

2.畫線那句重複幾次就有幾個標籤

長這樣

程式碼:
https://gist.github.com/jzs2home/1986cf90830bb7c3ee4d29ee220296ca

CSS增加m-margin-tb-tiny+m-margin-top-small+m-margin-top-top變數+顏色
增加關注的圖片fantasy_pixy2.png
https://gist.github.com/jzs2home/74eef68a43aaae3ed3f30526f6c84d69

程式碼:
https://gist.github.com/jzs2home/54deaa6ca2d667d57c77c8de7891e60d
ui inverted secondary stackable menu
讓手機看起來不會歪

長這樣:
手機看起來不會歪在文章內要mobile reversed
程式碼:
https://gist.github.com/jzs2home/9d4d320b245463bb9767ad8ddaac3be8

在手機時不要有
要加入按鈕.長這樣:

CSS增加絕對位置的"三"的按鈕
.m-right-top{
position: absolute;
top:0;
right:0;
}

在手機端隱藏在CSS加入語法
https://gist.github.com/jzs2home/36eb9cfab343bbc7ce289174eaf60f6b

@media screen and(max-width: 768px){
.m-mobile-hide{
display: none !important;
}
}

加入<script>語法menu toggle讓按"三"的按鈕也有內容明細出現

<script>
$('.menu.toggle').click(function () {
$('.m-item').toggleClass('m-mobile-hide');
}
);
</script>
html語法
https://gist.github.com/jzs2home/e39dd4e694f67f84ddf288ad8c4515b6

-----
背景圖片bg_natural_sougen.jpg-加在css語法:body{
background: url("../images/bg_natural_sougen.jpg");
}

長這樣:

-----
來做其他頁面:
1.文章內頁:
(直接從index.html附製成blog.html頁)
先把中間內容砍到剩下的原始碼:
https://gist.github.com/jzs2home/0c0aa26106529d2146d30df140c3f3fe
長這樣:
文章內頁-有圖片nouka_hiryou_sehi.png+文章+留言區:
blog.html頁

在CSS加入語法.m-container-small{
max-width:60em !important;
margin: auto !important;
}

按讚=打賞=使用SEMANTIC內容
blog.html頁語法
https://gist.github.com/jzs2home/45bc37d322389dbc06a09a5a3d805d1f

blog.html頁-按讚=打賞區:
打賞語法:(看SEMANTIC內容)

長這樣:
語法:
https://gist.github.com/jzs2home/c988cbf39511eab43f3ea2905b3c2e65


blog.html頁-留言區(使用在https://semantic-ui.com/views/comment.html 模板):貼在div class="ui teal segment-複製貼在這裡- /div

圖片改lucky_yotsuba_clover_girl.png可以顯示:
原來是:
有圖片:
語法:
https://gist.github.com/jzs2home/8a111004d82e78b8e219c054d834a6b1
長這樣:
為了讓在手機看起來比較舒服要在CSS檔李新增響應式語法:.m-padded-lr-responsive
.m-padded-lr-responsive{
padding-left: 0 !important;
padding-right: 0 !important;
}

html語法:
https://gist.github.com/jzs2home/19b1e186e84cf50d9399501ae7136ccf
css語法:
https://gist.github.com/jzs2home/18cb756575cc50ce7b3ae6e3ce24eaeb
手機看起來: