Skip to content

Latest commit

 

History

History
181 lines (180 loc) · 6.96 KB

2018-12-26.md

File metadata and controls

181 lines (180 loc) · 6.96 KB
Raw

position: sticky; 注意事项

  • sticky 元素仅在其父元素内生效
  • 父元素的高度不能低于 sticky 元素的高度
  • 父元素不能指定 overflow: hidden; 或者 overflow: auto;、overflow: scroll;
  • sticky 元素必须指定 top、bottom、left、right 4个值之一,

background-size

写在 css 文件中的 background-size: cover; 被行内样式覆盖了 background: url('') center no-repeat/cover; no-repeat 后紧跟 / , 写上 background-size 的值

-webkit-box 和 sticky

<!-- 资讯导航 -->
<div class="news-nav">
  <!-- 这些是导航, 超出水平滑动滑起来 -->
  <div class="news-nav-item">今日楼讯</div>
  <div class="news-nav-item">新手买房</div>
  <div class="news-nav-item">房屋买卖</div>
  <div class="news-nav-item">城市片区</div>
  <div class="news-nav-item">明日预告</div>
  <!-- 搜索 固定在右侧的 -->
  <div class="fixed-search">
    <img src="/msite/news/images/[email protected]" width="12px" height="12px">
  </div>
</div>

原本的思路是给 .news-nav 设置 padding-right 的, 搜索框定位在父元素的右侧; 但是呢, padding-right 的区域一直在屏幕的右侧, 即使导航滚动, 那就不好处理了

/* 资讯的导航 */
.news-nav{
  /* -webkit-box 哦 */
  display: -webkit-box;
  height: 40px;
  background: #f7f7f7;
  padding-left:18px;
  /* 超出滚动, 避免整屏溢出 */
  overflow: scroll;
}
.news-nav-item{
  height: 100%;
  line-height: 40px;
  font-size: 14px;
  color: #999;
  margin-right: 28px;
}
.news-nav-item.active{
  color: #0d4e91;
}
/* 固定的搜索 */
.fixed-search{
  margin-top: 5px;
  /* 妙哉妙哉~ 别处bug~ 佛祖保佑 */
  position: sticky;
  /* 右侧是 0 哦 */
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 30px;
  border-radius: 15px 0 0 15px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

flex 布局

左右布局, 左侧是资讯的相关信息, 右侧是封面图片; 为了适应不同的封面大小, 全煞笔地设置成了背景图片, 显式声明右侧的宽高, 并且设置 background-size: cover; 实际显示的时候, 右侧背景图片并未 cover 而是 contain 的效果

  • 起初以为是样式设置的问题, 把 css 单独拆开来写还是一样的
  • 因为右侧的盒子是声明了宽高的, 背景图片也设置了 cover
  • 最后发现, 要为右侧的盒子显式声明 flex: none; 保持这个宽高, 不受左侧的影响

::after 伪元素

使用 ::after 伪元素时, 一定要设置 content 和 display

文字超出后显示省略号

普通的单行文本隐藏, 兼容性好

  • 必须同时设置 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;, 缺一不可 兼容性较差的 -webkit-box`
  • 不可以设置 white-space: nowrap;, 切记切记
.news-title{
  display: -webkit-box;
  /* 声明方向 */
  -webkit-box-orient: vertical;
  /* 指定行数 */
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 切记不要写不可折行, 所有内容显示在一行 */
  /* white-space: nowrap: */
}

jq 回到顶部

$('.go-top').click((e) => {
  $('html, body').animate({
    scrollTop: 0
  }, 400)
});

scrollTop 设置或获取一个元素垂直方向上的滚动像素数, 是一个元素的顶部到它的最顶部可见内容的距离, 此处 scroll 一定出现了 滚动条

运营 营销 公众号开发

  • 微信号的分类: 企业号、订阅号（个人和小团队）和服务号（企业服务）
  • 认证和非认证在权限上有很大的区别
  • 域名+服务器/ngrok配置本地环境
    • www.tunnel.mobi/www.utralhook.com
    • 起一个本地服务, 域名+端口号
    • localtunnel Nodejs 的一个模块(不稳定)
  • 测试的公众账号
    • 开发者工具 => 测试号申请
    • 配置公众号后台(URL Token EncodingAESKEY)
    • 验证公众号(token nonce timestamp echostr 排序后加密)
  • node 版本 12 以上才能使用 koa
  • 首先就是验证 token, 成功后才可以使用
  • QQ浏览器 安装微信开发插件, 直接在浏览器调试
  • 消息类型（xml格式）
    • 接收: 文本、图片、语音、视频、小视频、地理位置、链接(openId 是加密后的结果)
    • 回复: 文本、图片、语音、视频、音乐、图文
  • 只支持 80 端口, 全部都是 https 协议
  • 接口返回码错误, 排除错误
  • 规范、调用频率、敏感信息
  • koa 中间件
  • access_token 每两个小时(7200s)失效, 需要重新获取, 之前的就失效了
    • 系统每隔2小时自动更新票据(读取、写入静态文件)
    • 存储在全局可访问的地方
    • 把方法挂载到 prototype 上
    • 封装 Promise(bluebird)
    • 提前获取新 token, 确保过期前可用, 避免不必要的失误
  • Object.keys() 获取对象所有的 key
  • 微信交互流程
    • 公众号 => 微信服务器 => 自己的服务器 => 微信服务器 => 公众号
  • Generator 构造器
    • yield 暂停执行
    • next() 继续执行
    • 总是返回一个对象
  • express 和 koa(洋葱圈模型) co express koa 坑 跳坑
  • Generator 和 Promise 的区别
  • tpl.js 'use strict'
  • heredoc <% if() %> <% else if() %> 处理多种类型的消息

文案

  • 产品文案: 让消费者快速了解你的产品, 它的特点、优势, 让产品成为消费者购买的最佳选择
  • 品牌文案: 让大家知道这个品牌的个性、态度、情感等, 就像一个人的气质魅力。最后喜欢它, 支持它, 购买该品牌的产品
  • 没有世界观的文案, 不是好文案(读书)
  • 有故事的文案, 才是好文案(看电影, 写有画面感的文案, 电影就是使用最少的台词)
  • 和客户聊天(客户、用户、特色, 把真相告诉大家)
  • 多走, 多看, 接近消费者(身临其境)
  • 多些, 训练语感

从头到脚写好一个文案

    1. 标题: 一张美丽的脸孔
    • 传递 完整正确 的信息
    • 吸引读者的注意力(提问、矛盾、画饼、数字时间、大款、免费(组合使用))【标题优化师】
    • 明确读者
    1. 选题
    • 为什么要买这种产品? (说服消费者)
    • 为什么要买你家的产品? (特点、产品、元素)
    1. 结构
    • 总分总
    • 因果(自问自答)
    • 故事(开端、对抗、结尾)
    1. 技巧
    • 第一段, 最好是一句话, 点题
    • 短句, 不要使用过长的句子
    • 用“你”, 不要用“你们”
    • 把最吸引人的放在最前面
    1. 排版
    • 字体
    • 颜色
    • 留白

文案要有画面感

  • 多用动词, 少用形容词(一对多)
  • 多用具体名词, 少用抽象名字
  • 用分类名称, 不要用总类
  • 用比喻代替形容词
  • 具体到细节, 越聚焦越清晰
  • 用文字把画面渲染出来

好文案是有韵律的

  • 直奔主题
  • 积极向上
  • 并列, 平行结构
  • 押韵
  • 文字游戏