已分配 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;

干杯!