已分配 UL 和 LI 时的要点

Question

我正在为课堂构建一个网页。 ul 和 li 元素已经分配给顶部的导航栏，以导航我网站的不同页面。 由于已经定义了这些元素，如何在不弄乱导航栏的情况下为网页中的某些文本创建项目符号？ 下面是我的 css 文件的片段。 我正在尝试添加要点

 ul { margin:0; padding:0; overflow:hidden; background-color: #f0d8eb; /* play around with color */ list-style-type: none; border: 1px solid black; } li { float:left; padding-left: 100px; } li a { color:black; display:block; text-align: center; padding:10px 10px; text-decoration: none; } li a:hover{ background-color: red;

这是我想要要点的 html 页面的片段

 <h1>CLASSES TAKEN</h1> <p> <!--trying to get bullet points here */--> </p>

Answer 1

要将 ul 与导航分开，请在无序列表中添加一个类，以便在更新 ul css 时不会影响您的导航。

你的无序列表必须是这样的

<ul class="my-bulleted-list"> all list goes  here </ul>

你的css一定是这样的

    my-bulleted-list.ul {
    margin:0;
    padding:0;
    overflow:hidden;
    background-color: #f0d8eb; /* play around with color */
    list-style-type: none;
    border: 1px solid black; 
}
my-bulleted-list.ul li {
    float:left;
    padding-left: 100px;
    }
my-bulleted-list.ul li a {
    color:black;
    display:block;
    text-align: center;
    padding:10px 10px;
    text-decoration: none;
}
my-bulleted-list.ul li a:hover{
    background-color: red;

干杯!