[分享]css中div下的ul列表

CSS中的div和ul是两个非常重要的元素。div元素可以用来将网页内容划分成不同的区域，使网页结构更加清晰。ul元素则可以用来创建列表（list），常用于显示导航菜单、文章目录等。 列表项1 列...

CSS中的div和ul是两个非常重要的元素。

div元素可以用来将网页内容划分成不同的区域，使网页结构更加清晰。

ul元素则可以用来创建列表（list），常用于显示导航菜单、文章目录等。

 <div>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div> 

上面的代码展示了一个div下的ul列表。

通常我们会对列表进行一些样式上的调整，比如改变字体大小、颜色、背景色等。

 <div style="background-color: #F5F5F5;">
    <ul style="list-style-type: none; padding: 0; font-size: 18px;">
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
    </ul>
  </div> 

上面的代码展示了如何添加一些简单的样式。通过设置list-style-type为none，我们可以去掉默认的列表标记；通过设置padding为0，我们可以让列表项之间没有空白；通过设置font-size，我们可以改变字体大小。

当然，想要精确控制列表样式还需要使用CSS的一些高级技巧，比如使用伪类选择器、使用媒体查询等。