实习日记三

(还实习日记呢？改实习周记算了。。。)

上周的工作

• vuex的上手是一种什么样的体验？

  怎么说呢，我之前想到的是什么各个功能模块化，有统一的状态管理balabala什么的。但是实际改完基于vuex的代码之后，改到一半我就觉得不太对劲，现在还在想还怎么把剩下的部分完成。就好像是以前我是把所有的功能写在一个vue里，显得非常的臃肿和杂乱，现在不过是把以前写在一个vue里的逻辑代码又重新搬到了mutations里，代码还是那坨代码，看的挺恶心的，得想个办法解决。。

关于地图界面的问题

一直以来开发的项目都是为了在移动端实现功能，但是发现一个问题就是，界面该怎么布局优化？参考了一下各家地图应用的布局样式，整理一下发现。

1. Google Map

   • 先说劣势：相比于国内的地图应用软件来说，谷歌地图在国内的服务水平可能就是负分。我们平时所熟悉的地图应用，应该是可以查找地址，快速导航，查找附近（各种地点分类）。但是谷歌地图在国内好像只有驾车步行骑车导航，本地化的服务几乎没有，实时路况公交信息也几乎没有，除了卫星地图的数据好像比别家更新一些，似乎只是一个很好用的地图？
   • 再说说优势：横向比较各家的交互，谷歌地图是切换和浏览最舒适的，没有之一，全部吊打。地图基础交互的流畅度，在电脑视图和移动视图切换的顺滑程度，都是几家中最好的（其他的地图没有做响应式的切换，电脑版和移动版视图的功能性差太多）。

2. 百度地图

   • 先说劣势，功能多，但是交互不一定很好，体现在各个小细节上在，下边的小功能的对比中会有体现。在切换电脑和移动视图的时候，几乎是重新加载了一遍，交互完全换了一套，不能说这算是太大的缺陷，只是交互的变化来说，不像是一个应用一样：电脑版偏向工具的作用，手机版偏向服务的作用。
   • 优势：功能是真的多，想象不到的多，想要参考的功能，就全都在他的工具箱里了。。标记测距养养都有。移动版视图的目的性非常明确，直接显示的内容是周边页面，这个页面包含了美食酒店等等的生活服务功能，基本上能想到的功能这里全都有，而且见到了百度ai的落地产品：小度语音搜索。不过自己用语音助手的场景是在太少，就没有对比各家产品的语音助手这个小东西了。可以把移动版视图的百度地图理解成为一个生活服务的助手，他的目的不在于查看地图，而是你在这里能找到你想去的地点（有什么），他会告诉你路线（怎么去）。
   • 补充一点，百度地图可能有国内最全的街景数据，当然这只是猜测。

3. 高德地图

   整体看来，和百度地图差不多的逻辑。为什么是差不多也不清楚，就知道是同样的电脑移动布局逻辑，差不多的功能，差不多的交互，差距可能就在一些细节功能上和数据源上。
   （个人只是因为不想用百度才不用百度地图的额）

4. 腾讯地图

   相较于其他两家国内地图，腾讯地图起步时间晚得多，而且好像是soso地图团队在soso并入搜狗之后独立出来开发地图应用的。对于腾讯来说，地图应用应该是战略地位的，国内几家的地图应用，要么是百度，要么是收归在阿里旗下的高德地图，都没有那么好合作，或者说腾讯需要一个地图来填补地图服务的空白，至少地图数据不会那么受制于其他公司。

   • 那么劣势非常明显的就是，腾讯地图的标记数据没有其他两家那么全。很奇怪的是没有基础的交互动画？交互这点在手机APP上个人感觉是吊打的。。
   • 那么优势呢，移动版视图看起来挺简陋的，逻辑上还是以提供服务为主，但是交互上还真的挺好用的（捂脸笑.jpg）。（没有图片是有原因的，我没有图床啊…）小工具上的使用，应该也算是很好用的级别。

5. 天地图

   这就是一个单纯的工具地图，他真的是那种，他有的api恨不得全部都加到网页里，各种工具，各种想象不到的地图数据，他全都有（毕竟是是一个地理信息的公共平台，而且还是gov.cn）。但是没有移动版视图emmmmmm然后生活服务没有快捷入口，搜索得到的数据不清楚完善程度和更新频率，没怎么用过，不过多评价。

总结一下

• Google Map算是一个异类，众所周知的原因无法在国内提供更多的服务，能和广告、翻译业务一起在国内活着就算是幸运吧。
• 国内几家地图服务，总体的逻辑上是差不多的，电脑版以工具属性优先，其次是隐藏在二级菜单的生活服务。
• 那么问题来了，我要怎么做移动端的工具类型的地图呢？

一些亮点

腾讯的交互是真的np…

• 腾讯地图APP端，放大与缩小的控制条，可以去体验一下，个人最喜欢的一个放大缩小地图的一个控件。以前习惯用双击之后上下滑动改变放大缩小的层级，现在看来这个方案既不是一个可控的方案，也不是一个直观的方案，但是腾讯这个控件是真的好用。
• 测距小工具的交互来看，高德地图和腾讯地图的交互几乎一样，都是非常优秀的体验。点击测距，地图选点，实时显示当前距离，标注每次测量的距离，结束测距之前都可以将上一个点删除，不影响完整测距。双击测距完成后，最后一个点提供两个按钮，一个删除当前点，一个删除这个测距所有点。但是还是有一点点差别，腾讯地图在测距的时候可以按住拖动地图。。
• 谷歌地图zoom缩小到最小不是一个平面图，而是一个球，此处应该@Google earth。
• 谷歌的响应式交互，在不同的设备之间切换，使用同一套交互和设计。
• 百度地图街景图层，这方面百度的数据和体验，独一家。腾讯地图街景需要flash，直接pass。
• 打车服务，百度高德地图APP端，提供了十几种打车方式，到同一地点，从10块到50块全覆盖。。然后出行方式从步行骑行到火车飞机全覆盖，高德甚至提供了客车和货车的路线规划。。（以前是真没发现这两个东西的地图规划能力这么强。。）
• 语音助手没用过 不对比 不评价。

我的地图要怎么做啊emmm

交互可能会参考一些腾讯地图的设计方案，然后还是在想到底要确定哪些需求。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

摸鱼第二周

上周的工作

• vue再次本当上手23333也不知道什么时候收藏夹里收藏过得vue教程重新翻出来看，不过还好，以前写过微信小程序，基本思路都一样，上手没难度。
• 用vue写了一些小玩意，试了试一些好玩的功能，指路→https://icestains.github.io/vuetest/,之后可能会加一些新的好玩的东西上去，至少动画是要加上去的：）

上手GIS

• 空天信息研究所，画画地图咯。
• 文档指路→OpenLayers
• 官方api文档 指路→OpenLayers API

今天了什么

• 参照文档搭建出了一个基本的地图实现了定位，放大缩小，移动地图，添加标记等一系列基本功能。离线地图绘制也掌握了一些，用离线图片也绘制出了相应的地图模块。
• 写了一些小demo 指路→OpenLayers demo

需要填的抗

• vue踩坑与填坑

  • js引用图片问题
  • bootstrap引入问题
  • vuecli router的路径问题
  • 模块引用问题

• OpenLayers踩坑与填坑

  • baidu地图的偏移问题（坐标转换问题）
  • 地图的绘制与切换
  • 地图的标记方法参数解析
  • 矢量地图
  • 获取当前地图坐标信息
  • 瓦片地图

明天emmmm

明天看进度，后边东西还挺多的，两天看了还不到一半，后边熟悉之后应该会顺利一些

实习日记一

(摸鱼第四天)

记录一下最近做的事情吧

适应新的环境

• 新的宿舍，六人间，但是实际只到了三个人，于是三个人都可以住在下铺了，分配了三个桌子，六个椅子可以非常舒服的分配空间了哈哈。
• 组长今天刚回来，之前开会没他，然后这几天就完全就是在摸鱼状态，也没有什么具体的任务。

最近几天做的工作

• 这里的电脑只可以访问内网，文件只能拷入不能拷出，于是环境配置过程中的所有的软件源都要用内部的，但是比较难受的就是一些软件和插件的缺失不好解决。
• 大概了解了一下开发的内容，是一个地图加微信的软件，平台是魔改某为的一款手机，由于不是安卓，所以需要服务组的童靴们用C/C++去适配底层，我们组的主要任务就是用vue.js写界面和逻辑。
• 配置环境。vue.js, vue-cli, node/yarn, 软件：webstorm, chrome, cmder 插件： less.
• vue以前看过一部分，最近正在看完整的文档，算是填之前开的坑吧。。
• vue-cli这次重新搭建，和以前搭建的时候有了挺大区别，应该是3.0的原因，看了一些博客大概是精简了很多配置文件。
• node好像看emmm好像没看完呢。。。填坑填坑。。不过这边用的是yarn，常用的命令好像没有太大区别。
• less/sass。本来三个常用的css预处理器，去年就应该上手用的，一直拖着就没有看，然后选了一个sass都马上看完了，今天组长发了一个项目模板，用的less。ok，fine，都看都看QAQ。(stylus: 你看看我 →_→ 。)

个人在做的

• Django搭建的博客算是搭建（http://47.103.5.67/）完了，最近在想给博客添加一些元素或者是修改一些元素，暂时没有什么好的想法。
• vue-cli正在上手，这个链接是目前在练手的一个项目（就是一个vue模板应用），有可能会把这个修改完成的放在博客的首页。

明天应该会开一次小会，希望有点东西做。（摸鱼ing）

个人博客仓库
博客链接

run

虚拟环境

1

python manage.py runserver 8000

部署

使用了fabric来部署到远程服务器，通过github托管代码，将代码同步到服务器上。 参考博客使用 Fabric3 自动化部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

from fabric.api import env, run

from fabric.operations import sudo

GIT_REPO = "https://github.com/Icestains/myblog.git"

env.user = 'icestains'
env.password = '**********'

# 填写你自己的主机对应的域名
env.hosts = ['47.103.5.67']

# 一般情况下为 22 端口，如果非 22 端口请查看你的主机服务提供商提供的信息
env.port = '22'


# 由于一些奇怪的bug 这里的shell命令会出现一些奇怪的问题，于是就直接在这里进入了虚拟环境
# 从github仓库同步代码
# 更新依赖，收集静态文件，更新 最后退出虚拟环境环境
def deploy():
    source_folder = '/home/icestains/sites/icestains/myblog'
    run('cd %s && git pull' % source_folder)
    run("""
        cd {} &&
        source env/bin/activate &&
        pip3 install -r requirements.txt &&
        python3 manage.py collectstatic --noinput &&
        python3 manage.py migrate &&
        deactivate
        """.format(source_folder))
    sudo('systemctl restart lcblog.service')
    sudo('service nginx reload')

在febfile的目录下执行

fab deploy
参考：https://www.zmrenwu.com

Hello World

主要学习内容

• 前端基础介绍
• git的使用
• github的注册和搭建第一个仓库
• 搭建博客或注册博客
• 快应用和小程序的介绍

前端基础

HTML\css\JS相关教程链接

文档:

• w3school
• 廖雪峰JavaScript教程

视频教程:

• 2017暑期培训视频by李长航 密码：amb6
• 前端视频教程 密码：hhwq

git

参考文档

• 廖雪峰的git教程
• 我自己总结的git常用命令

github

github的注册和创建仓库,以及使用git命令行的方式操作git.

搭建博客

参考链接

Jekyll环境

• 搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门
• Jekyll搭建个人博客

hexo环境搭建方式

• Hexo搭建博客教程
• GitHub+Hexo 搭建个人网站详细教程
• 史上最详细的Hexo博客搭建图文教程

快应用与小程序

快应用

什么是快应用

1. 快应用是基于手机硬件平台的新型应用形态，标准是由主流手机厂商组成的快应用联盟联合制定。

2. 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台，以平台化的生态模式对个人开发者和企业开发者全品类开放。

3. 快应用具备传统APP完整的应用体验，无需安装、即点即用。

快应用开发文档

微信小程序

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序官方文档

转载自牢记31种CSS选择器用法

1 *

1
2
3
4

* {
  margin: 0;
  padding: 0;
}

星号选择器用于选取页面中的所有元素，可用于快速清除所有元素的 margin 与 padding，但最好只在测试的时候使用，而不要正式用在 CSS 文件中，否则会大大加重浏览器负担。此外，星号选择器也可以给父层的所有子元素设定样式，重复一遍，尽量少用这种方式：

1
2
3

#container * {
  border: 1px solid black;
}

兼容 IE6+

2 #X

1
2
3
4
5
6

#container {
  width: 960px;
  margin: auto;
}
id 选择器，最常见的选择器用法之一，不可重复使用。
兼容 IE6+

3 .X

1
2
3

.error {
  color: red;
}

class 选择器，也是最常见的选择器用法之一，与 id 选择器不同的是 class 选择器可同时选取多个元素，而 id 选择器只能给一个独一无二的元素设定样式。

兼容 IE6+

4　 X 　Y

1
2
3

li a {
  text-decoration: none;
}

后代选择器 (descendant selector)，选取 X 元素内的所有

Y 元素，比如上面这段代码将选取 li 标签内的所有链接。

兼容 IE6+

5 　X

1
2

a { color: red; }
ul { margin-left: 0; }

标签选择器 (type selector)，用于选取 HTML 标签 (tag)。

兼容 IE6+

6　X:visited and X:link

1
2

a:link { color: red; }
a:visted { color: purple; }

:link 伪类选择器 (pseudo class selector) 用于选取所有未点击过的链接，而 :visited 则用于选取所有已访问过的链接。

兼容 IE6+

7 X + Y

1
2
3

ul + p {
  color: red;
}

临近选择器 (adjacent selector)，选取紧邻在 X 元素后面出现的第一个元素，比如上面这段代码将选取 ul 元素后出现的第一个元素，也就是 p 元素。

兼容性 IE6+

8　X > Y

1
2
3

div#container > ul {
  border: 1px solid black;
}

在第 4 条中，后代选择器 X Y 选取父层 X 内的所有 Y 元素；子选择器 X > Y 则只选取直接出现在父层 X 内的 Y 元素。比如下面的 HTML 结构中，#container > ul 选取直接出现在 div#container 内的 ul 元素，不包含嵌套在 li 内的 ul 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="container">

 <ul>
<li> List Item
  <ul>
    <li> Child </li>
  </ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
 </ul>
</div>

兼容 IE6+

9　 X ~ Y

1
2
3

ul ~ p {
  color: red;
}

同样也是临近选择器，前面第 7 条 X + Y 选取紧邻在 X 后出现的第一个元素，而 X ~ Y 将选取 X 元素后出现的所有同级元素。上面这段代码将选取 ul 元素后出现的所有同级 p 元素，而不是像 ul + p 这样选取第一个出现的 p 元素。

兼容 IE7+

10 X[title]

a[title] {

color: green;

}

属性选择器 (attributes selector)，根据元素使用的属性进一步缩小选取范围，上面这段代码将选取所有使用了 title 属性的链接。或者使用a[title="title content"]{color:green}

再进一步缩小选取范围。

兼容 IE7+

11　X[href=”foo”]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

上面这段代码将选取所有跳转到

http://net.tutsplus.com

的链接，这些链接将显示为绿色，其他链接不受影响。

只是这种方式很严格不能相差一个字符，下面将会逐一介绍更灵活的用法。

兼容 IE7+

12 X[href*=”nettuts”]

1
2
3

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

*表示只要属性值中包含双引号内的内容就满足选取要求，这段代码将选取跳转到 nettuts.com，net.tutsplus.com，或者 tutsplus.com 等链接。

兼容 IE7+

13　X[href^=”http”]　

1
2
3
4

a[href^="http"] {
  background: url(path/to/external/icon.png) no-repeat;
  padding-left: 10px;
}

^

表示只要属性值以双引号内的内容开头就满足选取要求，这段代码也常用来给页面中所有外部接设定样式。

兼容 IE7+

14 X[href$=”.jpg”]

1
2
3

a[href$=".jpg"] {
  color: red;
}

$

表示只要属性值以双引号内的内容结尾就满足选取要求，这段代码将选取所有跳转到 jpg 图片的链接。

兼容 IE7+

15 X[data-*=”foo”]

上面第 14 条提到了如何选取所有跳转到 jpg 图片的链接，若要选取跳转到图片的所有链接可以用下面的方法：

1
2
3
4
5
6

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"]
{ color: red; }

或者，先给图片链接添加 data- 属性（注：HTML5 Custom Data Attributes）

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

然后再通过属性选择器选取：

1
2
3

a[data-filetype="image"] {
  color: red;
}

兼容 IE7+

16 X[foo~=”bar”]

1
2
3
4
5
6

a[data-info~="external"] {
  color: red;
}
a[data-info~="image"] {
  border: 1px solid black;
}

如果属性值中有用空格分隔的一连串属性值，~可以选取其中一个属性值，比如：

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

借助 ~ 选取包含 external 或者 image 属性值的元素：

/* Target data-info attr that contains the value "external" */

1
2
3
4
5
6
7

a[data-info~="external"] {
  color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

兼容 IE7+

17 X:checked

1
2
3

input[type=radio]:checked {
  border: 1px solid black;
}

:checked 伪类选择器用于选取所有标记为 checked 的元素，比如单选框 (radio button) 或复选框 (checkbox)。

兼容 IE9+

18 X:after

http://www.igooda.cn/jzjl/20131009384.html

:before 与 :after 是两个令人兴奋的伪类选择器，几乎每天都有人发明出一些新用法，这里简单介绍一下如何用它清除浮动：

1
2
3
4
5
6
7
8
9
10
11
12

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.clearfix {
  *display: inline-block;
  _height: 1%;
}

这种方式通过 :after 在元素后面添加一块区域，然后将其隐藏，可以弥补 overflow: hidden; 的缺陷。

根据 CSS3 选择器标准，理论上伪类选择器应该使用双冒号，但实际上浏览器也支持单冒号的形式，所以可以继续使用单冒号。

兼容 IE8+

19 X:hover

1
2
3

div:hover {
  background: #e3e3e3;
}

最常用的伪类选择器，不多解释了，只是需要注意 IE6 不支持将 :hover 作用于除 a 链接外的其他元素。

1
2
3

a:hover {
 border-bottom: 1px solid black;
}

另外提醒一点：border-bottom: 1px solid black;

的效果要比

text-decoration: underline;

好看一些。

兼容 IE6+ （在 IE6 中 :hover 只能作用于链接）

20 X:not(selector)

1
2
3

div:not(#container) {
  color: blue;
}

:not 伪类选择器有时会起到很重要的作用，假设现在要选取除 #contaienr 外的所有 div 元素，就可以用上面的代码实现。

兼容 IE9+

21　X::pseudoElement

1
2
3
4

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

通过伪元素（使用双冒号 ::）可以给元素的某一部分设定样式，比如第一行、或者第一个字母。需要注意的是，这只对块级元素 (block level elements) 生效。

提示：伪元素 (pseudo element) 使用双冒号 ::

选取段落的第一个字母

1
2
3
4
5
6
7

p::first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: cursive;
  padding-right: 2px;
}

这段代码将选取页面中所有 p 元素，然后再选取其中的第一个字母。

选取段落的第一行

1
2
3
4

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

与上面的例子类似，通过 ::first-line 选取页面的第一行。

为了兼容 CSS1 与 CSS2 中的伪元素（比如 :first-line, :first-letter, :before 以及 :after），浏览器接受单冒号与双冒号两种格式，但对于 CSS3 中最新引入的伪元素，必须使用双冒号。

兼容 IE6+

22 X:nth-child(n)

1
2
3

li:nth-child(3) {
  color: red;
}

:nth-child(n) 用于选取 stack 中的某一个元素，只接受整数作参数（参数从 1 开始计数），如果你想选取第二个 li 元素，只需这样写 li:nth-child(2)。

也可以设定可变的参数，比如 li:nth-child(4n) 将选取第 4, 8 , 12… 个元素（4*n, n=1, n++）。

兼容 IE9+

23 X:nth-last-child(n)

1
2
3

li:nth-last-child(2) {
  color: red;
}

除了正序（从上往下）选择，也可以使用 :nth-last-child(n) 倒序（从下往上）选择第几个元素，其他用法与第 22 条完全一样。

兼容 IE9+

24 X:nth-of-type(n)

1
2
3

ul:nth-of-type(3) {
  border: 1px solid black;
}

:nth-of-type(n) 的作用不是选取子元素 (child element)，而是选取同类元素 (type of element)。想象一下 HTML 文件中包含 5 个 ul 元素，现在要选取第三个，只需使用上面的代码，而不用再单独这个 ul 添加 id。

关于 :nth-child 与 :nth-of-type 的区别，具体请查看 CSS-Tricks 网站的解释，简单来说，如果父层内只包含一种元素（比如都是 p 元素）那两种用法是等效的，如果父层包含多种元素（比如 p 元素与同级的其他元素），需要选取第几个 p 元素时应该用 :nth-of-type。

兼容 IE9+

25 X:nth-last-of-type(n)

1
2
3

ul:nth-last-of-type(3) {
  border: 1px solid black;
}

与第 24 条用法相同，倒序选取同类元素。

兼容 IE9+

26 X:first-child

1
2
3

ul li:first-child {
  border-top: none;
}

选取父层内的第一个子元素。

兼容 IE7+

27 X:last-child

1
2
3

ul > li:last-child {
  color: green;
}

与第 26 条用法相同，区别在于 :last-child 选取父层元素内的最后一个子元素。

:first-child 与 :last-child 通常用来清除边框 (border)，比如

<ul></ul>

内每个

<li></li>

都使用了 border-top 与 border-bottom 边框，结果是，第一个元素的上方与最后一个元素的下方会是单边框效果。这种情况可以用 :first-child 与 :last-child 清除上下的边框，而不用给第一个元素添加id=”first” 或者给最后一个元素添加 id=”last”。

兼容 IE9+

28 X:only-child

1
2
3

div p:only-child {
  color: red;
}

这个伪类选择器不常用，它可以选取包含唯一指定子元素的父层。比如上面的代码中将选取下面第一个 div 元素，而不是第二个 div 中的 p 元素。

1
2
3
4
5
6
7
8

 <div><p> My paragraph here. </p></div>

 <div>

  <p> Two paragraphs total. </p>
  <p> Two paragraphs total. </p>

</div>

兼容 IE9+

29 X:only-of-type

1
2
3

li:only-of-type {
  font-weight: bold;
}

这个选择器会选取某个元素，并且这个元素在其父层内没有其他同级同类元素（不一定是唯一元素）。比如，要选取所有只包含一个

li 元素的 ul 元素该怎么做呢？如果使用 ul li 将选取所有 li 元素，应该使用 only-of-type。

兼容 IE9+

30 X:first-of-type

first-of-type 伪类可以选取某种元素的第一个同类元素。

为了更好地理解它的用法，现在思考一下如何在下面的 HTML 结构中选取 List Item 2 ？

1
2
3
4
5
6
7
8
9
10
11

<div>
  <p> My paragraph here. </p>
  <ul>
    <li> List Item 1 </li>
    <li> List Item 2 </li>
  </ul>
  <ul>
    <li> List Item 3 </li>
    <li> List Item 4 </li>
  </ul>
</div>

方法一

1
2
3

ul:first-of-type > li:nth-child(2) {
  font-weight: bold;
}

这段代码的意思是：首先选取第一个 ul 元素；然后选取其中的所有直接子元素，也就是 li；最后选取第二个子元素。

方法二

1
2
3

p + ul li:last-child {
  font-weight: bold;
}

找到 p 元素后第一个出现的 ul 元素，然后选取其中的最后一个子元素。

方法三

1
2
3

ul:first-of-type li:nth-last-child(1) {
  font-weight: bold;
}

找到第一个 ul 元素，然后从上往下选取第一个子元素。

兼容 IE9+

31 伪类选择器叠用

有些伪类选择器或者伪元素是可以叠用的，例如：

1
2
3
4
5
6
7

#post p:nth-of-type(2):first-letter {
  float: left;
  margin: 0 5px 0 1em;
  width: 1em;
  height: 1em;
  font-size: 2em;
}

目测兼容 IE9+，听说 IE10 有个小 bug

引用：http://www.cnblogs.com/moses/p/3436468.html

下面是摘自http://www.uisdc.com/css-selector的

1、元素选择器

这是最基本的CSS选择器，HTML文档中的元素本身就是一个选择器：

p {line-height:1.5em; margin-bottom:1em;}

2、关系选择器

E F：后代选择器，该选择器定位元素E的后代中所有元素F：

ul li {margin-bottom:0.5em;}

E > F：子选择器，该选择器定位元素E的直接子元素中的所有元素F，它将忽略任何进一步的嵌套：

ul > li {list-style:none;}

//仅限ul的直接子元素li，如果li里面还嵌套着另一个 ul 结构时，最里面的 li 将被忽略

E + F：相邻兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F：

li + li {border-top:1px solid #ddd;}

//定位具有相同父元素ul里除第一个li之外的所有li

E ~ F：一般兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中位于E之后的所有元素F：

h1 ~ p {color:#f00;}//定位具有相同父元素的，h1标签之后的所有p标签

3、属性选择器

E[attr]：该选择器定位具有属性attr的任何元素E：

input[required] {border:1px solid #f00;}

//定位页面里所有具有必填属性”required”的input

E[attr=val]：该选择器定位具有属性attr且属性值为val的任何元素E：

input[type=password] {border:1px solid #aaa;}

//定位页面里的密码输入框

E[attr|=avl]：该选择器定位具有属性attr且属性值为val或以val-开始的任何元素E：

p[class|=a] {color:#333;} //定位页面里所有的P段落里具有class属性且属性值为a或是a-开始的，比如class=”a”以及class=”a-b”

E[attr~=val]：该选择器定位具有属性attr且属性值为完整单词 val 的任何元素E：

div[title~=english] {color:#f88;}

//定位页面里所有具有属性title且属性值里拥有完整单词english的div容器，比如title=”english”以及title=”a english”

E[attr^=val]：该选择器定位具有属性attr且属性值以val开头的任何元素E：

div[class^=a] {color:#666;}

//定位页面里具有属性class且属性值以a开头的div容器，比如class=”a”以及class=”ab”

E[attr$=val]：该选择器与E[attr^=val]正好相反，定位具有属性attr且属性值以val结尾的任何元素E：

div[class$=a] {color:#f00;}

//定位页面里具有属性class且属性值以a结尾的div窗口，比如class=”nba”以及class=”cba”

E[attr*=val]：该选择器与E[attr~=val]相似，但更进一步，定位具有属性attr且属性值任意位置包含val的元素E，val可以是一个完整的单词，也可以是一个单词中的一部分：

a[title*=link] {text-decoration:underline;}

//定位所有title里具有link字符串的a链接

或者可以看

css_selectors.md

参考文档 廖雪峰的git教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

//命令行安装git
$ sudo apt install git 

//初始化仓库
$ git init 

设置你的名字和email地址
$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

//克隆仓库
//Git支持多种协议，包括https，但通过ssh支持的原生git协议速度最快。
$ git clone git@github.com:username/name.git
$ git clone https://github.com/username/name.git

//添加文件到git仓库
$ git add readme.md //添加单个文件
$ git add .  //添加所有文件
//把文件提交到仓库
$ git commit -m "describe your file"

//查看状态
$ git status
//查看更新对比内容
$ git diff
//查看历史记录
$ git log

//回退到上个版本
//上上个版本就是HEAD^^
//100个版本就是HEAD～100。
$ git reset --hard HEAD^

//查看命令历史
$ git reflog

//撤销修改
$ git checkout -- readme.txt

//删除文件
$ rm test.txt

//提交到远程库（github）
$ git push

//创建新的分支（dev）
$ git checkout -b dev //相当于以下两条命令
//新建分支
$ git branch dev
//切换分支
$ git checkout dev
//使用git branch查看分支

这时有两个分支，旧分支为master，新的分支为dev。
在更改了dev分支之后，需要把新的内容合并到master分支中去。
先把dev中的更新内容提交到版本库中，切换回master分支，然后合并分支。
$ git checkout master
$ git merge dev

//删除分支
$ git branch -d dev

一些“技巧”

有没有经常敲错命令？比如git status？status这个单词真心不好记。

如果敲git st就表示git status那就简单多了，当然这种偷懒的办法我们是极力赞成的。

我们只需要敲一行命令，告诉Git，以后st就表示status：

$ git config --global alias.st status
好了，现在敲git st看看效果。

当然还有别的命令可以简写，很多人都用co表示checkout，ci表示commit，br表示branch：

1
2
3

$ git config --global alias.co checkout
$ git config --global alias.ci commit
$ git config --global alias.br branch

以后提交就可以简写成：

$ git ci -m "bala bala bala..."
--global参数是全局参数，也就是这些命令在这台电脑的所有Git仓库下都有用。

Daum PotPlayer（朝鲜语：다음 팟플레이어），是KMPlayer的原作者姜勇囍进入Daum公司后的新一代作品，目前仍有更新。由于采用Delphi编译程序的KMPlayer有一些弊端，姜勇囍为改进播放器本身的一些性能而重新用VC++进行构架。
由于PotPlayer与KMPlayer同属一个开发者的产品，但它与KMPlayer所注重的地方并不同，能够满足不同用户的使用需求。Daum PotPlayer也可以在64位Windows系统上运行。

在1.6.62377版本中，PotPlayer官方正式发布多国语言稳定版安装包，并且支持中文、英文、波兰文、葡萄牙文以及俄文。

特点
捆绑了多媒体文件的解码器，不需要另外安装解码器也可以播放。
硬件加速，支持DxVA（DirectX Video Acceleration）。
提供更多的字幕输出选项。
支持播放50MB以下的ZIP/RAR压缩包内的多媒体内容。

安装

官网链接

下载链接

技巧一：倍速播放

作为学生，会用播放器来观看许多的视频教程，而在大量的视频中，为了节约时间，使用了播放器中的倍速播放，但是很多视频播放器中的此功能在使用中会让视频中的音调发生变化。而potplayer的加速播放的效果并不会让音调发生变化，所以可以用这款播放器来刷视频教程。

技巧二：插帧播放

简单的来说，就是让24帧的视频以48帧播放，30帧的视频以60帧播放。简直爽到飞起！

技巧三：强大的解码播放

这是这个视频播放器最基础的功能，几乎可以应对日常中使用的所有的视频格式。

技巧四：使用迅雷边下边播（占坑）

技巧五：使用potplayer录屏和截取视频片段（占坑）

技巧六：使用potplayer看直播（占坑）