查漏补缺1 -自定义列表、input样式、font复合属性

自定义列表

  <dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>
  </dl>

平时常用的是ul>li，需要使用 list-style: none;来特别去除默认样式的小圆点，
且针对下面的样式，使用自定义列表更加简洁。

自定义列表代码：
HTML

<dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
      </dl>

    dl dt {
      font-size: 18px;
      font-weight: 700;
      line-height: 30px;
      margin-bottom: 20px;
    }

    dl dd {
      margin: 0;
      font-size: 14px;
      line-height: 30px;
    }

若使用ol对标题做处理时，需要使用ul li:nth-child(1)或增加class、id，总之需要使用额外的选择器做处理。

input样式调整

1. 去除input框聚焦后新增的黑色边框：outline: none;；

2. 改变边框的颜色，如果使用border-color: bisque;会发现边框颜色对半开；

   
   查询资料发现这是一种边框样式 border-style: inset;
   
   调整border-style: solid;即可实现对全边框的修改。
   

3. 光标样式修改：当input框聚焦时，光标是大黑色，可以使用caret-color: rgb(248, 137, 122);调整；

   
   

font复合属性