「前端架构师详解Css13」案例“类天猫电器城导航”

「前端架构师详解Css13」案例“类天猫电器城导航”并分享源代码

情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码，现在免费分享给大家，获取的方式为：

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ，（注意：css全是小写）即可得到源代码的获取方式。

此案例是页面，效果如下：

此页面的技术实现解析：

使用css浮动，float，来控制div左侧和右侧显示

第一步：编写导航的html，使用两个div块来书写，以便下面对两个块进行浮动样式设定

第二步：编写通用样式及最外层div容器的样式

第三步：编写左侧导航样式，使用float：left，让导航位置居左显示

第四步：编写右侧导航样式，使用float：rihgt，让导航位置靠右显示

第五步：定义选中状态下的选中条的特效

天学会html+css，第六天横向导航。

今天的学习目标是这部分横向导航菜单。

·找到中间盒子，在里面添加ul列表，结构跟昨天的纵向导航菜单一样。文本内容快速添加，看下效果。

·然后从外到内依次写css样式，ul的高度跟上一层一样，默认样式黑点去掉，看下效果。

·给 li添加左浮动，让它们从纵向排列变成横向排列。在给a标签写css样式之前，别忘了要添加这句代码。

·接着去掉默认样式下划线，文字颜色用黑色，文字水平居中的方法，让高度和行高一样，看下效果。

·再给每个a标签的右边都加上一定的内边距，让它们变宽，看起来就分开了。

·最后还有一个文字变色的效果，给a标签加上hove伪类，颜色设置为红色，看下效果。

到此，今天的学习完成。

*请认真填写需求信息，我们会在24小时内与您取得联系。