我们来大概的说一下怎么做:
一、
创建一个新的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元素(设置每个文本后的图):
精灵图如下: