网页设计新手必备：画流程图如逛公园，让你一目了然

步骤条的作用

搞网页设计时，画个流程图就跟逛公园看标示牌似的，让你明明白白地知道现在在哪，接下来应该往哪儿去。就像在公园里提示的那样，告诉你距离刺激项目还有多远，好让你先放松一下，免得被吓到。所以流程图就是这么一回事，就是让你心里有数，知道下一步怎么办！

准备工作

  
步骤一
  
步骤二
  
步骤三
  
步骤四

咱们不如弄个小清单，就像上山前你得整理行囊那样。把细节列举好，读者看得明白，也不容易出错。

添加样式

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

来，给这些客官穿上新衣服，别让人家被惊到。先搞定基础设置，把那些默认的都清掉，然后用flex布局打扮得漂漂亮亮的。摆放时，利用justify-content这属性能让界面看着舒服些，不要离得太近也不要太远喔。

列表项样式设置

来！给各个项目打扮下！先把宽度跟高度定好了，这样子看上去会更加萌哒哒~接着就改改文字布局，字大小颜色，甚至行距这些都要注意喔。想点新花样儿？比如在每个项目前划个小破折号，这样每步操作一眼就能看到了！

.active类的应用

最后给你点惊喜，保证让你眼前一亮！给每个步骤加上”&active”类标签，再配上鲜艳的红底色和可爱小图标。这样哪怕步骤再多也不怕找不到地方了喔。

li {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: #fff;
  position: relative;
}
li:before {
  content: '';
  position: absolute;
  top: 15px;
  left: -50%;
  height: 1px;
  width: 50%;
  background-color: #ccc;
}
li:first-child:before {
  display: none;
}
li.active {
  background-color: #f00;
}
li.active:before {
  background-color: #f00;
}

使用方法

别瞎操心，解决这些问题超容易的！只需要给需要变为活动状态的那个部分加个’.active’样式不就好了？举个例子说，咱现在做的第二步，就按我说的做就对了：

html

<li class="active">第二步</li>

总结与展望

搞定那些花样百出的CSS样式后，我们就能拥有一个自定义的、漂亮好用的步骤栏！它不仅让你清楚自己在哪儿，还能告诉你接下来该干啥；而且在网页设计中，这种步骤栏可是很抢眼的。今后，这玩意儿肯定还会继续大显神通，帮大家在网络世界里畅行无阻。