者 | 大澈

大家好，我是大澈！

就在昨天，在家里跑步運動，被樓下人找了上來，說是我整的動靜太大，影響到了他們。

雖然事情是我的問題，但還是整的我十分郁悶，畢竟敲代碼一天，晚上想在家稍微活動活動，都搞不成了。

說實話程序員太難了，畢竟下班后真的沒有時間來做點別的事。不知道大家在下班后這短暫的時間里，是怎樣運動的。

言歸正傳，一起來看一下，大澈今日分享的問題。

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