CSS样式是一个前端开发者不可或缺的技能，目录样式是页面布局中一个非常重要的元素。那么，如何使用CSS来设计好看的目录样式呢？

首先，我们可以使用列表元素来实现目录的排版，并通过CSS样式来美化它。可以为列表元素添加外边距和内边距，在样式表中使用pre标签嵌套样式选择器去实现，如下：

ul {margin: 0;padding: 0;}li {list-style: none;margin: 5px 0;padding-left: 20px;position: relative;}li:before {content: "";position: absolute;width: 6px;height: 6px;border-radius: 50%;left: 0px;top: 10px;background-color: #ccc;}

通过上面的CSS样式，我们可以看到列表元素样式已经得到了美化，每个目录项都添加了一个小圆点作为标记，看起来更加的简洁和整洁。

同时，我们还可以为目录的不同级别设置不同的样式效果，使它们在视觉上更容易区分。我们可以使用CSS层次选择器来实现这个效果：

ul ul li:before {content: "";position: absolute;width: 4px;height: 4px;border-radius: 50%;left: 0px;top: 7px;background-color: #ccc;}ul ul ul li:before {width: 2px;height: 2px;top: 5px;}

通过使用层次选择器，我们可以为三级目录项设置不同的样式，就可以实现样式多样化而统一的效果，更加完美的呈现出来。

除了基本的样式设置，我们还可以为目录项添加一些交互效果，如鼠标悬浮的背景颜色变化等。可以使用CSS伪类来实现这个效果：

li:hover {background-color: #eee;}

通过这种方式，我们可以实现在鼠标悬浮在目录项上时，背景颜色发生改变的效果，为用户带来更加友好和舒适的交互体验。

总结：通过上述的方法，我们可以实现一个比较美观的目录样式，不仅整体的美化了页面的视觉效果，而且具备多样化的布局效果，以及一些基本的交互效果，更加的人性化和便利。