本文介绍了如何使用CSS模拟京东导航栏。首先创建HTML结构，包含多个超链接表示导航选项。接着，通过CSS设置ID选择器，分别定义nav、link和div元素的样式，包括背景颜色、文字样式、布局等。最终结合所有代码，实现了类似京东导航栏的效果。
我们来大概的说一下怎么做：
一、
创建一个新的html文件，添加一个nav元素，id设置为nav，在nav里面添加一个a标记超链接id为link，在a标记里面添加文本"商品分类"并创建多个a标记超链接添加文本分别为“秒杀”、“优惠券”、”PLUS会员“、”品牌闪购“、”拍卖“、“京东时尚”、“京东超市“、”京东生鲜“、”海囤全球“和"京东金融"。
代码实现如下：
我们打开html文件看一看效果：
效果如下图：
二、
接下来我们来写选择器
在<head></head>中添加<style></style>，在<style></style>中添加我们所需要的选择器。
1.添加id选择器id为nav，这里控制的是id为nav的元素：
宽为1100px，高为40px，背景颜色为#E64346颜色。
代码实现如下：
效果如下图：
2.添加id选择器id为link，这里是控制的是nav中的a标签：
文本字体为微软雅黑、文本大小为8px、背景为#CD2A2C颜色、文本颜色为白色、行高为40px(这里设置为40px的原因是让字体居中)、文本缩进为5px、设置为左浮动、宽为100px、高为40px、取消下划线、文本对齐方式为右对齐。
代码实现如下：
效果如下图：
3.添加id选择器选择nav里面的div元素(设置每个文本后的图)：
精灵图如下：
最低0.47元/天 解锁文章
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
