【HTML入门】第二十课 - 【实战】做一个侧边栏菜单

经海路大白狗

已于 2024-08-03 10:40:31 修改

阅读量590

点赞数 10

分类专栏： WEB前端小白从这里出发文章标签： html 前端学习

于 2024-07-31 17:45:09 首次发布

本文链接：https://blog.csdn.net/xingyu_qie/article/details/140828561

版权

WEB前端小白从这里出发专栏收录该内容

33 篇文章 10 订阅

订阅专栏

这一小节，我们还是继续练习纯HTML标签的内容，多练一些，把HTML标签练熟。这就像练武功前的扎马步和一些基本功，功底越深，后边才能练更高深的武功。

这一小节，我们用纯HTML标签做一个侧边栏菜单的功能。就像这样：

1 设计需求分析

2 所用到的标签

3 实战代码

1 设计需求分析

我们看这张图，这是我从CSDN文章管理端截的图，你自己的管理端应该也能看到这个侧边栏。那么在做之前，我们分析一下布局：

这是一个纵向排列；
从首页、管理到数据，很明显，这是一个纵向的列表，我们可以想到ul li 列表标签，对吧；
首页，管理，数据左侧都有一个小图标，图标跟后面的文字是横向排列，我们很容易想起行内标签和块级标签；
然后内部的内容管理、评论管理、专栏管理这些呢，又是一个列表；
外部的大列表，都是可点可跳转的，内部的子列表呢，也都是可跳转的，我们想起了链接 a 标签。

2 所用到的标签

通过上面分析了布局，我们可以想到一些标签，比如

展示图标用的img
比如跳转需要的链接 a
比如列表需要的 ul li
比如为了使相近业务功能放于一个整体容器的div。

3 实战代码

那么我们最终通过以上布局，通过对所用到标签的回忆，可以开发出下面这样的代码内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <ul>
            <li>
                <a href="https://blog.csdn.net/xingyu_qie">
                    <img src="./files/imgs/home.png" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首页
                </a>
            </li>
            <li>
                <a href="https://blog.csdn.net/xingyu_qie">
                    <img src="./files/imgs/manage.png" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;管理
                </a>
                <div>
                    <ul>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">内容管理</a>
                        </li>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">评论管理</a>
                        </li>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">专栏管理</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="https://blog.csdn.net/xingyu_qie">
                    <img src="./files/imgs/manage.png" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数据
                </a>
                <div>
                    <ul>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
                        </li>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
                        </li>
                        <li>
                            <a href="https://blog.csdn.net/xingyu_qie">作品数据</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </body>

</html>