HTML
简介：小程序开发定制本文用最简洁的语言，小程序开发定制来教会读者，如果用html+css来制作，侧边导航栏，本案例以手机商城中的部分为例子来制作。
第一步：构建框架
<body> <!-- 首先确定导航栏中的内容 每个内容用链接标签<a>表示 --> <a href="#">手机 电话卡</a> <a href="#">电视 盒子</a> <a href="#">笔记本 平板</a> <a href="#">出行 穿戴</a> <a href="#">智能 路由器</a> <a href="#">健康 儿童</a></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
运行结果：
第二步：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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
运行结果：