日志总结 - 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炫酷用法总结