练习：京东商城左侧导航栏，运用了css的简单布局，以及当鼠标移到li标签时有一个背景效果，练习源文件下面有链接。

前言

该练习，可以采用nav(div)、div(div)、ul(li)等几种结构，看个人喜欢，我下面用的是ul(li)。

一、练习

1、效果图：

2、文件目录：

二、效果实现

1、源码：

1_index.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><link rel="stylesheet" href="./css/reset.css"><style>body{background-color: #bbffaa;}.nav-left{width: 190px;height: 450px;            padding: 10px 0;font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\\5b8b体", sans-serif;margin: 50px auto;background-color: #ffffff;}/* 元素选择器不用“.”设置了padding-left时，尽量不要设置width，不然会造成背景溢出*/li{                 height: 25px;padding-left: 18px;line-height: 25px;           }/* 给鼠标选中的li设置背景颜色 */li:hover{background-color:#d9d9d9;/* 伪类选择器":"左右不留空格，否则样式无效或者出现偏差 */}li a{color: #333333;font-size: 14px;text-decoration: none;  /* 下划线 */}li span{font-size: 12px;padding-left: 2px;}/* -hover鼠标移过去时，元素的样式—visted访问后的属性样式 */li a:hover{color: #c81623;}      </style>
</head>
<body><div class="nav-left"><!-- 网页中任何元素都用个标签将其套用 --><ul><li><a href="javascript:;">家用电器</a></li><li><a href="javascript:;">手机</a><span>/</span><a href="javascript:;">运营商</a><span>/</span><a href="javascript:;">数码</a></li><li><a href="javascript:;">电脑</a><span>/</span><a href="javascript:;">办公</a></li><li><a href="javascript:;">家居</a><span>/</span><a href="javascript:;">家具</a><span>/</span><a href="javascript:;">家装</a><span>/</span><a href="javascript:;">厨具</a ></li><li><a href="javascript:;">男装</a><span>/</span><a href="javascript:;">女装</a><span>/</span><a href="javascript:;">童装</a><span>/</span><a href="javascript:;">内衣</a></li><li><a href="javascript:;">美妆</a><span>/</span><a href="javascript:;">个性清洁</a><span>/</span><a href="javascript:;">宠物</a></li><li><a href="javascript:;">女鞋</a><span>/</span><a href="javascript:;">箱包</a><span>/</span><a href="javascript:;">钟表</a><span>/</span><a href="javascript:;">珠宝</a></li><li><a href="javascript:;">男鞋</a><span>/</span><a href="javascript:;">运动</a><span>/</span><a href="javascript:;">户外</a></li><li><a href="javascript:;">房产</a><span>/</span><a href="javascript:;">汽车</a><span>/</span><a href="javascript:;">汽车用品</a></li><li><a href="javascript:;">母婴</a><span>/</span><a href="javascript:;">玩具乐器</a></li><li><a href="javascript:;">食品</a><span>/</span><a href="javascript:;">酒类</a><span>/</span><a href="javascript:;">生鲜</a><span>/</span><a href="javascript:;">特产</a></li><li><a href="javascript:;">艺术</a><span>/</span><a href="javascript:;">礼品鲜花</a><span>/</span><a href="javascript:;">农资绿植</a></li><li><a href="javascript:;">医药保健</a><span>/</span>      <a href="javascript:;">计生情趣</a></li><li><a href="javascript:;">图书</a><span>/</span><a href="javascript:;">文娱</a><span>/</span><a href="javascript:;">教育</a><span>/</span><a href="javascript:;">电子书</a></li><li><a href="javascript:;">机票</a><span>/</span><a href="javascript:;">酒店</a><span>/</span><a href="javascript:;">旅游</a><span>/</span><a href="javascript:;">生活</a></li><li><a href="javascript:;">理财</a><span>/</span><a href="javascript:;">众筹</a><span>/</span><a href="javascript:;">白条</a><span>/</span><a href="javascript:;">保险</a></li><li><a href="javascript:;">安装</a><span>/</span><a href="javascript:;">维修</a><span>/</span><a href="javascript:;">清洗</a><span>/</span><a href="javascript:;">二手</a></li><li><a href="javascript:;">工业品</a></li></ul></div>
</body>
</html>

2、运行效果：

总结

上面就是京东左侧导航栏的简单实现，还要注意下面几点：
1、在设置li标签样式时，尽量不设置li的具体宽度，容易造成background-color溢出，因为li标签设置了padding值。
2、“/”用span标签将其包裹，方便设置样式，如果想要改变其符号大小，可另外设置字体大小。
3、使用伪类选择器时，注意没有空格，例“a:hover”。

下载链接

https://download.csdn.net/download/weixin_45336315/13096601

练习：京东商城左侧导航栏_1相关推荐

商城左侧导航栏如何制作？
结构分析: 该导航栏主要由a标签和超链接伪类标签构成,但是a标签是行内元素,如何将a标签竖向排列是首先考虑的问题: 解决办法:先把a标签转成块元素,然后再设置背景颜色和行高. 代码具体如下: < ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
京东图片列表、左侧导航栏、网易新闻列表、京东页面布局、京东轮播图
文章目录京东图片列表京东左侧导航栏网易新闻列表: 京东页面布局京东轮播图京东图片列表代码如下: <head><meta charset="UTF-8" ...
仿京东商城左侧商品分类导航-JS网页特效
网页特效:仿京东商城左侧商品分类导航演示地址:http://www.iiwnet.com/js_menu/976.html <html xmlns="http://www.w3.or ...
HTML5+CSS3学习笔记（三）文档流和盒子模型【附练习：图片列表、左侧导航栏】
HTML5+CSS3学习笔记(三) 本系列更多文章,可以查看专栏 HTML+CSS学习笔记文章目录 HTML5+CSS3学习笔记(三) 一.CSS布局 1. 文档流(块级元素.行内元素.行内块元素) ...
点击左侧导航栏切换右侧商品（左右联动）
点击左侧导航栏切换右侧商品(左右联动) 菜单栏主要以 A,B,C,D等字母为主,即A,B,C,D等字母为对应该项携带的 id(id不能为汉字或纯数字). 实现该功能的思路:通过点击左侧滑栏的某一项,获 ...
CSS3构建左侧导航栏
废话不说,先上图代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
vue项目中处理左侧导航栏问题的分享
2019独角兽企业重金招聘Python工程师标准>>> 相信左侧导航栏大家都不陌生,几乎每个项目都会存在.以前用jquery做的时候,某些本不是什么问题的地方就突然变成阻碍了.下面就 ...
xcode 左侧导航栏 no finder results 问题的解决方法
第一天使用xcode就遇到个很郁闷的问题,刚建的新工程,不知道怎么操作了,左侧导航栏的文件夹和文件等资源都没有了,只显示个"no finder results",试了各种方法都弄不 ...

练习：京东商城左侧导航栏_1

目录

前言