---
# System prepended metadata

title: 任務：刻一個spring作品-從前端~後端=中端-文章內容
tags: [程式筆記-第36-1週]

---

---
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://i.imgur.com/o5TmvoW.jpg)
長這樣
![](https://i.imgur.com/KUAyara.jpg)

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

2.畫線那句重複幾次就有幾個標籤
![](https://i.imgur.com/0QgmM3H.jpg)

長這樣
![](https://i.imgur.com/5a3VopH.jpg)


程式碼:
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
 讓手機看起來不會歪
![](https://i.imgur.com/UwGCoQt.jpg)

長這樣:
![](https://i.imgur.com/moHRNgR.jpg)
手機看起來不會歪在文章內要mobile reversed
程式碼:
https://gist.github.com/jzs2home/9d4d320b245463bb9767ad8ddaac3be8

在手機時不要有![](https://i.imgur.com/JhJlJ97.jpg)
要加入按鈕.長這樣:
![](https://i.imgur.com/X7JNdc3.jpg)

CSS增加絕對位置的"三"的按鈕
.m-right-top{
    position: absolute;
    top:0;
    right:0;
}
![](https://i.imgur.com/zs2KEu1.jpg)

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

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

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

![](https://i.imgur.com/0jjoJyF.jpg)
<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");
}

長這樣:
![](https://i.imgur.com/Trkrqht.jpg)
![](https://i.imgur.com/c4kO630.jpg)

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

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

按讚=打賞=使用SEMANTIC內容
![](https://i.imgur.com/rErDC54.jpg)
blog.html頁語法
https://gist.github.com/jzs2home/45bc37d322389dbc06a09a5a3d805d1f

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

 長這樣:
 ![](https://i.imgur.com/oUjbgDb.jpg)
 語法:
 https://gist.github.com/jzs2home/c988cbf39511eab43f3ea2905b3c2e65
 
 ![](https://i.imgur.com/3H1neG0.jpg)

 blog.html頁-留言區(使用在https://semantic-ui.com/views/comment.html 模板):貼在div class="ui teal segment-複製貼在這裡- /div
 
 圖片改lucky_yotsuba_clover_girl.png可以顯示:
 原來是:
![](https://i.imgur.com/QfRsoq8.jpg)
有圖片:
![](https://i.imgur.com/10F05M4.jpg)
語法:
https://gist.github.com/jzs2home/8a111004d82e78b8e219c054d834a6b1
 長這樣:
 ![](https://i.imgur.com/kiwPgze.jpg)
為了讓在手機看起來比較舒服要在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
手機看起來:
![](https://i.imgur.com/NvAT9aI.jpg)
