自定义列表
<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样式调整
-
去除input框聚焦后新增的黑色边框:
outline: none;
; -
改变边框的颜色,如果使用
border-color: bisque;
会发现边框颜色对半开;
查询资料发现这是一种边框样式border-style: inset;
调整border-style: solid;
即可实现对全边框的修改。
-
光标样式修改:当input框聚焦时,光标是大黑色,可以使用
caret-color: rgb(248, 137, 122);
调整;