京东顶部导航条(html/css)

京东顶部导航条.png

思路:
1、引入重置样式表
2、引入font awesome样式表

    
    

3、创建外围容器、内部容器,绘制布局

基本布局.png

4、外部容器设置样式:宽度、背景颜色、行高(文字垂直居中)、下边框

外部容器.png

5、内部容器设置样式:宽度、外边距(水平居中)

内部容器.png

6、让北京左浮动,让其他整体右浮动,并解决高度塌陷问题;其他菜单内部左浮动

左右浮动.png
导航栏.png

7、在body上设置样式:字体,颜色最好不要设置在body中,因为在body中设置会运用到全局中
8、设置字体样式:颜色、风格

颜色.png

9、北京设置样式:小图标颜色、外右边距
10、设置字体固定红色和鼠标移入变红色
11、设置线的位置、颜色、宽高、外边距

22.png

12、下拉框制作
当鼠标移入location,让city-list显示,一般这种效果hover给父元素,设置绝对定位,使其脱离文档流,不占据页面的位置,设置阴影,设置北京背景、边框

效果图.png

【html】


    

【css】


你可能感兴趣的:(京东顶部导航条(html/css))