HTML侧边导航栏
简介：本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
第一步：构建框架
<body><!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 --><ahref="#">手机 电话卡</a><ahref="#">电视 盒子</a><ahref="#">笔记本 平板</a><ahref="#">出行 穿戴</a><ahref="#">智能 路由器</a><ahref="#">健康 儿童</a></body>
运行结果：
第二步：CSS渲染
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>简单版商城侧边栏</title><style>a{/* 1.把a转换为块级元素 这样就可以让链接竖着表示了*/display: block;/* 设置长度与宽度 */width: 200px;height: 40px;/* 设置背景颜色 */background-color: #55585a;/* 设置字体大小 */font-size: 14px;/* 设置字体颜色 */color: #fff;/* 链接没有下划线 */text-decoration: none;/* 设置左边的内边距 */padding-left: 30px;/* 设置文本边距 */line-height: 40px;}/* 2.鼠标经过链接变换背景颜色 */a:hover{background-color: #ff6700;}</style></head><body><!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 --><ahref="#">手机 电话卡</a><ahref="#">电视 盒子</a><ahref="#">笔记本 平板</a><ahref="#">出行 穿戴</a><ahref="#">智能 路由器</a><ahref="#">健康 儿童</a></body></html>
运行结果：
本文转载自: https://blog.csdn.net/qq_51447496/article/details/127399523
版权归原作者 极客李华 所有， 如有侵权，请联系我们删除。
版权归原作者 极客李华 所有， 如有侵权，请联系我们删除。