者 | 大澈

大家好，我是大澈！

就在昨天，在家里跑步运动，被楼下人找了上来，说是我整的动静太大，影响到了他们。

虽然事情是我的问题，但还是整的我十分郁闷，毕竟敲代码一天，晚上想在家稍微活动活动，都搞不成了。

说实话程序员太难了，毕竟下班后真的没有时间来做点别的事。不知道大家在下班后这短暂的时间里，是怎样运动的。

言归正传，一起来看一下，大澈今日分享的问题。

ONE

需求分析，问题描述

一、需求

详情页有许多文字，在每一行文字前都添加一个黑色实心小圆点，并且要保持与黑色标题左对齐。

二、问题

1、有哪些方式添加黑色实心小圆点？各有什么优缺点？

2、怎样让黑色实心小圆点与后面的文字保持垂直居中对齐？

TWO

解决问题，答案速览

一、如果公司有UI切图

如果有切图，这是最高效、最灵活的实现方式，只需一个img元素扔上去，然后让图标和后面的文字垂直水平居中即可。

这种方式不仅可以添加黑色实心小圆点，还可以加任意形状的图标，不过前提是要有人给你切图。

<ul class="blackText">
  <li>
      <img class="xingIcon" src="images/PromotionIcon.png">
      <span class="va-middle">The</span>
  </li>
  <li>
     <img class="xingIcon" src="images/PromotionIcon.png">
     <span class="va-middle">The</span>
  </li>
</ul>

.xingIcon{
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 10px;
}
.va-middle{
  vertical-align: middle;
}

二、如果公司没有UI切图

如果没有人给你切图，那只能老老实实自己画了。这里最高效的当然是使用ul元素的list-style-type属性，加上此属性，轻轻松松添加黑色小圆点，还能整个空心的。注意要往左边缩进1rem距离。

<ul class="feature-list">
  <li>App Functions</li>
  <ul>
      <li>App Functions</li>
      <li>App Functions</li>
  </ul>
  <li>App Functions</li>
<ul>

.feature-list {
  font-weight: 400;
  color: @black-color;
  font-size: 16px;
  line-height: 30px;
  margin-left: 1rem;
  list-style-type: disc;
  ul{
    margin-left: 1rem;
    list-style-type: circle;
  }
}

THREE

问题解析，知识总结

一、有哪些方式添加黑色实心小圆点？各有什么优缺点？

1、切图+img元素

最高效、最灵活的方式，不过需要有人切图。

2、使用ul元素的list-style-type属性

高效，不过不太不灵活，只适用于实心圆、空心圆、实心方块形状的图标。

具体list-style-type属性值如下图：

3、使用伪元素::before或::after

在需要加点的元素上添加一个伪元素，设置它的content属性为>在需要加点的元素上添加一个伪元素，设置它的content属性为\002B，再设置背景颜色和圆角，最后将它的位置和大小调整到恰当的位置即可。这个方式操作比较繁琐，有点花里胡哨。<2B，再设置背景颜色和圆角，最后将它的位置和大小调整到恰当的位置即可。这个方式操作比较繁琐，有点花里胡哨。

li::before {
content: "\002B";
background-color: black;
border-radius: 50%;
display: inline-block;
height: 8px;
width: 8px;
margin-right: 8px;
}

二、怎样让黑色实心小圆点与后面的文字保持垂直居中对齐？

1、将小圆点和文字整成行块元素或行元素，然后给两者都加上vertical-align: middle;属性。

2、用margin属性生顶。

3、用flex布局。

- END -

迎观看indesign页面排版教程，小编带大家学习 InDesign 的基本工具和使用技巧，了解如何从页面中提取关键词或引文。然后将其作为设计元素重新加入版面，吸引读者。

打开文件，一开始 InDesign 会在「文档」窗口中显示文档的第 1 页，可以使用页面左侧的黑色文本，创建标注。首先在左侧的「工具」面板中选择「文字工具」，然后选择左侧文本。

文本格式可以在文档右侧的「属性」面板中找到。如果文档中没有显示「属性」面板，依次选择「窗口」-「属性」。

在「属」面板的「字符」部分更改字体、样式、大小及其他属性。

在左侧的「工具」面板中选择「选择工具」，点击选中标注文本框。

选择「窗口」-「文本绕排」。

在「文本绕排」对话框中选择「沿对象绕排」选项。

现在，将标注拖放到文本上，放置到正确位置。尝试用颜色和渐变填充标注框，现在使用「颜色」填充，依次选择「窗口」-「描边」。

打开「描边」窗口，「粗细」设置为「2」点。

「类型」有多种选项，可以选择「圆点」。

到工具栏的底部，双击打开「拾色器」，更改描边的填充颜色。

可以在第 2 页查看我们尝试过的其他方法，选择「窗口」-「页面」。

在「页面」面板中，通过双击第 2 页缩略图，转到文档的第 2 页，将看到描边的不同样式，颜色和渐变填充标注框。

返回第一页，根据选择的文本绕排选项，可能需要增加标注文本框周围的间距。可使用「文本绕排」面板中的「偏移」选项，在标注的一侧或多侧周围添加边距。点击中间的链接图标，单独调整偏移量设置。

以上就是在inDesign软件中创建杂志风标注的方法，现在就来尝试一下，引用故事或文章中的某个片段，改善页面效果，来吸引读者。

indesign软件下载地址：Indesign 2021 for mac(Id 2021)

https://www.macz.com/mac/7645.html?id=NzY4OTYwJl8mMjcuMTg2LjEwLjg2