【前端寻宝之路】学习和总结有无序列表的实现和样式修改，web设计与开发

用户57923016702
32 阅读4分钟

](img-blog.csdnimg.cn/21dd41dce63…)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
​💫个人格言:“没有罗马,那就自己创造罗马~”

#mermaid-svg-WuZk6y8cqVpDsE8W {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .error-icon{fill:#552222;}#mermaid-svg-WuZk6y8cqVpDsE8W .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-WuZk6y8cqVpDsE8W .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-WuZk6y8cqVpDsE8W .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-WuZk6y8cqVpDsE8W .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-WuZk6y8cqVpDsE8W .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-WuZk6y8cqVpDsE8W .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-WuZk6y8cqVpDsE8W .marker{fill:#333333;stroke:#333333;}#mermaid-svg-WuZk6y8cqVpDsE8W .marker.cross{stroke:#333333;}#mermaid-svg-WuZk6y8cqVpDsE8W svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-WuZk6y8cqVpDsE8W .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .cluster-label text{fill:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .cluster-label span{color:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .label text,#mermaid-svg-WuZk6y8cqVpDsE8W span{fill:#333;color:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .node rect,#mermaid-svg-WuZk6y8cqVpDsE8W .node circle,#mermaid-svg-WuZk6y8cqVpDsE8W .node ellipse,#mermaid-svg-WuZk6y8cqVpDsE8W .node polygon,#mermaid-svg-WuZk6y8cqVpDsE8W .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-WuZk6y8cqVpDsE8W .node .label{text-align:center;}#mermaid-svg-WuZk6y8cqVpDsE8W .node.clickable{cursor:pointer;}#mermaid-svg-WuZk6y8cqVpDsE8W .arrowheadPath{fill:#333333;}#mermaid-svg-WuZk6y8cqVpDsE8W .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-WuZk6y8cqVpDsE8W .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-WuZk6y8cqVpDsE8W .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-WuZk6y8cqVpDsE8W .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-WuZk6y8cqVpDsE8W .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-WuZk6y8cqVpDsE8W .cluster text{fill:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W .cluster span{color:#333;}#mermaid-svg-WuZk6y8cqVpDsE8W div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-WuZk6y8cqVpDsE8W :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

beat around the bush 拐弯没角

文章目录

列表标签

无序列表

无序列表:ul li, 快速生成无序列:Ul>li*行数＋回车键.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是无序列表</h1>
    <!-- <disc
 square
 circle> -->
    <ul>
        <li>这是内容1</li>
        <li>这是内容2</li>
        <li>这是内容3</li>
        <li>这是内容4</li>
    </ul>
</body>
</html>

在这里插入图片描述

无序列表标签修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是无序列表</h1>
    <!-- <disc
 square
 circle> -->
    <ul type="circle">
        <li>这是内容1</li>
        <li>这是内容2</li>
        <li>这是内容3</li>
        <li>这是内容4</li>
    </ul>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

有序列表

有序列表:ol li,
快速生成无序列:Ol>li*行数＋回车键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>这是无序列表</h1>
    <!-- <disc
 square


### 文末

js前端的重头戏，值得花大部分时间学习。

![JavaScript知识](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9993b7e35f8648708a6c010246e400a7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407009&x-signature=1A6ff6oBQLSCwgPfQWaIr0NM2Q8%3D)

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

![前端电子书](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fd46028f1b804b24bc070b0024468acc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407009&x-signature=wp7U1XLkOTJ3Qi24ND4tEnHT2lg%3D)



另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。



学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/84e6fac237e34005ac4a22ca498033f4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1771407009&x-signature=bwfQegkfJm22bkzA5T7tx8tRNzM%3D)
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
avatar
文章
阅读
粉丝