潘绳杰的技术博客

2018-04-22发表前端开发22 分钟读完 (大约3225个字)

css中关于background属性的用法，经常会使用到，并且老是记不清，这里做一下总结，方便后面开发查阅。

background是多个属性的简写，因此要了解background中各个属性的用法，才能理解其本身。background是按照以下的顺序进行设置的:
background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, 和background-attachment。

2017-04-03发表前端开发2 分钟读完 (大约240个字)

通过css实现锚点跳转后的位置调整

设计导航菜单的过程中，有时候会涉及到二级子菜单，外部的或者是内部页面页面的跳转，这个时候，锚点可能会派上场。

其中使用锚点进行页面的各部分内容跳转，有时候页面的导航栏是使用固定定位(fixed)的布局，可能会导致标题遮挡部分跳转后的内容，因此，需要对锚点调整后的位置进行偏移。

方法

通过使用css实现锚点跳转后的位置调整：

定义一个class:

.named-target {
  padding-top: 50px;
  margin-top: -50px;
}

将这个class赋给锚点或者锚点后的元素即可。

原理

字面上的原理可以理解为元素外边距向上移动了50像素，使用上内边距给抵消了。
内在的原理，我还没理解，待理解了再更新。

2017-03-23发表前端开发1 分钟读完 (大约118个字)

css弹性盒简介之一

css布局经历了使用table和float布局的过程，W3C推出了flexbox的布局方式。

Flexbox基础

flex container

使用div或者其他标签作为容器，用于放置其他子元素。

flex items

嵌套在容器中的直接元素自动转为flex item，子元素的子元素便不是flex item。

实例

<!-- html part -->
<div class="container">
  <div>A flex item</div>
  <div>Another flex item</div>
  <div>A third flex item</div>
</div>

/* css part */
.container {
  display: -webkit-flex;
  display: flex;
}

.container div {
  -webkit-flex: 1;
  flex: 1;
}

2017-03-08发表前端开发几秒读完 (大约70个字)

disable超链接的css样式

想要设置disabled的超链接，让用户不可点击，可添加一个class来设置。

.disabled-link {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled-link">link</a>

注意：
pointer-events这个属性对浏览器兼容性有一定的要求。

IE11
Edge 14
Firefox 51
Chrome 49
Safari 10
Opera 43

【以上】

2017-02-20发表前端开发1 分钟读完 (大约193个字)

自定义li的css样式

li的默认样式有几种，我们想要自定义li的样式，例如定义颜色或者显示的图标，以下是操作的两种方法。

方法一：

修改的原理，取消list默认的style，并通过伪元素before来设置新的样式。

ul {list-style: none}

li::before {
  content: "•"; color: red;
  display: inline-block; width: 1em;
  margin-left: -1em
}

特殊符号的一些输入可使用Unicode编码：• = “\2022”, ◦ = \25E6” and ▪ = “\25AA”

方法二：

修改的原理，通过自定义的class来区分标点和文字的颜色。

.listStyle {
  color: red;
}

.listStyle p {
  color: black;
}

<ul class="listStyle">
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
  <li>
    <p><strong>View :</strong> blah blah.</p>
  </li>
</ul>

参考：

2016-12-13发表前端开发1 分钟读完 (大约188个字)

loader.css的使用入门

Loaders.css是纯css的loading动画库。
Delightful and performance-focused pure css loading animations.

demo如下：

demo

安装

bower方式

1	bower install loaders.css

npm方式

1	npm i --save-dev loaders.css

使用

标准使用:

引入loaders.min.css
创建一个元素并添加动画的css类
插入适量的
到上一步创建的元素中

demo如下：

<!DOCTYPE html>
<html>
<head>
  <title>loaders css</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ConnorAtherton/loaders.css/master/loaders.min.css">

  <style type="text/css">
    .loader-demo {
      background-color: gray;
      color: blue;
      border-color: blue;
      height: 150px;
      padding-top: 50px;
      text-align: center;
      > div {
        display: inline-block;
      }
    }

    .ball-pulse > div {
      background-color: orange;
    }

  </style>
</head>
<body>
  <h3>loaders css</h3>

  <div class="loader-demo">
    <div class="ball-pulse">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</body>
</html>

另外，这个库也支持jQuery的使用，具体参考这里

定制

可改变动画图标的背景颜色

1
2
3

.ball-grid-pulse > div {
  background: orange;
}

浏览器兼容性

IE11
Firefox 36
Chrome 41
Safari 8

【全文完】

方法

原理