css基础教程-列表【笔记】_css教程笔记-CSDN博客

本文链接：https://blog.csdn.net/netweng/article/details/44786127

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="container">
    <ul>
        <li>Drinnks Menu</li>
        <li>Beer</li>
        <li>Spirits</li>
        <li>Cola</li>
        <li>Lemonade</li>
        <li>Tea</li>
        <li>Coffee</li>
    </ul>
</div>
</body>
</html>

首先，打入要学习编辑的基本列表的html出来。

1.list-style-type

取值：none / disc / circle / square / latin / upper-alpha / lower-alpha / upper-roman

2.外边距与内边距

基表列表项符设置未none：大部分浏览器将列表现置于距离无序列表左边框30像素。列表本身距离容器的上边框约10像素。可以通过内边距来调整。注意，每个列表项都是一个块级元素，会拉伸并填充容器的宽度。

ul{
            list-style-type: none;
            margin: 0 0 0 20px;
            padding: 0;
            width: 200px;
        }

3.list-style-position

设置为inside,必要时使列表项符置于文本中。

4.list-sytle-image

list-style-image:url(......)

将要设置为列表项符的图标/图形的图片进行相应设置。通过line-heigh来设置列表项之间的行距。

5.list-sytle

通过一行代码，整合list-sytle-type，list-style-position，list-style-image

ul{
             list-style:none inside url(....)
}

6.单独设置列表项的样式

        ul{
            list-style: none;
        }
        li{
            background:  transparent url(....) no-repeat left center;
            padding:  0 0 0 20px;
        }

transparent：防止白色背景色不防止自定义的列表项目符图像显示

7.内联列表

改变列表项的display的值，将原来块元素的列表选项装换为inline。

8集合与分散

多个列表项，通过ul 和 li的设置，设置大体的样式。再通过给每个列表的ul设置id，设置各个列表的区别设计。在通过对列表项经行不同的class声明，然后应用class来进行样式设计。

9嵌套列表

  ul{
            column-rule: #000000;
        }
        ul li ul{
            list-style-type: none;
            color: #666666;
        }
        ul li ul li{
            padding: 0 0 0 15px;
        }

层层嵌套，灵活应用上下文选择器进行样式设计。

10.垂直导航栏：

ul{
            list-style-type: none;
            margin: 0;
        }
        li{
            background: #dddddd;
            margin: 0;
            padding: 2px 10px;
            border-left: 1px solid #ffffff;
            border-top:1px solid #ffffff;
            border-right: 1px solid #666666;
            border-bottom: 1px solid #aaaaaa;
        }

通过设置边框的色差，配合背景颜色，来制造出三维按钮的效果。

=========================================================================================================================

牢记嵌套。以及id和类与大边框之间的灵活应用。要多关注一些阴影效果，三维按钮的设计。