日誌總結 - 2018-05-29

一、PS切圖要點

1. 安裝新版的PSCC, 2014版本以上才可以用cutterman
2. 註冊使用cutterman賬戶, 或者使用gmail
3. 安裝破解教程及檔案已經上傳到網盤
4. 切圖時選擇所需要切圖的檔案或者組, 然後在cutterman皮膚匯出

二、http-server的使用

1. 前期：nodejs環境必備
2. 全域性安裝： npm install http-server -g
3. 使用：進入當前資料夾 輸入命令 http-server [path] [options] // [path]預設為./public資料夾
4. 可選配置：

       -p 埠（8080）
       -a ip(0.0.0.0)
       -d 顯示目錄列表（true）
       -i 顯示autoIndex（true）
       -g或--gzip啟用時（預設為“False”），它將用於./public/some-file.js.gz代替./public/some-file.jsgzip壓縮版本的檔案，並且該請求接受gzip編碼。
       -e或--ext預設副檔名（如果沒有提供）（預設為'html'）
       -s或--silent從輸出中抑制日誌訊息
       --cors通過Access-Control-Allow-Origin標題啟用CORS
       -o 啟動伺服器後開啟瀏覽器視窗
       -c設定快取控制max-age頭的快取時間（以秒為單位），例如-c10 10秒（預設為'3600'）。要禁用快取，請使用-c-1。
       -U或--utc在日誌訊息中使用UTC時間格式。
       -P或--proxy代理無法在本地解決給定網址的所有請求。例如：-P http://someurl.com
       -S或--ssl啟用https。
       -C或--certssl證書檔案的路徑（預設值：cert.pem）。
       -K或--keyssl金鑰檔案的路徑（預設值：key.pem）。
       -r或者--robots提供一個/robots.txt（其內容預設為'User-agent：* \ nDisallow：/'）
       -h或--help列印此列表並退出。
   

5. 參考附文

   nodejs：本地資料夾http伺服器http-server

   http-server:一個簡單的零配置命令列的http伺服器

   使用http-server零配置在本地開啟http伺服器

   npm - http-server

三、切圖引發的思考

1. 日常切圖儘可能切最小的一部分，然後壓縮，其他能用程式碼實現的用程式碼實現
2. css中::before & ::after的使用 —— 橫批title的使用
   1. 一個橫批, 左右有兩個耳朵;
   2. 給這個橫批定義一個title, 設定為flex且flex-direction為row; 因為.title::before和.title::after是在這個div的子元素中顯示的;
   3. html程式碼大概如下

          <div class="title">
            <p>hello world!</p>
          </div>
      

   4. css程式碼大概如下

          .title {
            width: ;
            height: ;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
          }
          .title::before, .title::after {
            content: '';
            width: ;
            height: ;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
          }
          .title::before {
            background-image: url();
            background-position: right center;
            left: 負值;
          }
          .title::after {
            background-image: url();
            background-position: left center;
            right: 負值;
          }
      

   5. after和before還有好多炫酷的用法,可以參照

      :after和:before炫酷用法總結