位置: IT常识 - 正文
HTML侧边导航栏(html导航栏边框)
发布时间：2024-01-16HTML侧边导航栏 HTML侧边导航栏
本文链接地址:https://www.jiuchutong.com/zhishi/297734.html
转载请保留说明！
推荐整理分享HTML侧边导航栏(html导航栏边框)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html侧边导航栏设计,html侧边导航栏设计,html侧边栏导航栏网页,html侧边栏导航栏网页,html侧边导航栏代码,html 侧边栏导航,html侧面导航栏,html侧边导航栏设计,内容如对您有帮助，希望把文章链接给更多的朋友！
简介：本文用最简洁的语言，来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
第一步：构建框架<body> <!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 --> <a href="#">手机 电话卡</a> <a href="#">电视 盒子</a> <a href="#">笔记本 平板</a> <a href="#">出行 穿戴</a> <a href="#">智能 路由器</a> <a href="#">健康 儿童</a></body>运行结果：
第二步：CSS渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="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>表示 --> <a href="#">手机 电话卡</a> <a href="#">电视 盒子</a> <a href="#">笔记本 平板</a> <a href="#">出行 穿戴</a> <a href="#">智能 路由器</a> <a href="#">健康 儿童</a></body></html>运行结果：
上一篇：Python 计算机视觉（八）—— OpenCV 进行图像增强
下一篇：【node进阶】深入浅出websocket即时通讯(二)-实现简易的群聊&私聊(node实战)
