演练 网站的导航栏 0920

演练 网站的导航栏 0920_数据

素材

https://cloud.189.cn/t/qMVJzaAbea63

演练 网站的导航栏 0920_数据_02
演练 网站的导航栏 0920_数据_03
演练 网站的导航栏 0920_宽高_04
演练 网站的导航栏 0920_数据_02

数据

导航图的宽度

760

150

菜单图的宽高

760

32

制作过程

完成基本架构

演练 网站的导航栏 0920_水平垂直居中_06

制作菜单按钮

演练 网站的导航栏 0920_水平垂直居中_07
使用li>a的方式

效果

演练 网站的导航栏 0920_导航栏_08

去掉样式

演练 网站的导航栏 0920_宽高_09

让li浮动

演练 网站的导航栏 0920_数据_10

让a变为块级元素

演练 网站的导航栏 0920_下划线_11
演练 网站的导航栏 0920_数据_12

去掉链接下划线

演练 网站的导航栏 0920_导航栏_13

水平垂直居中

演练 网站的导航栏 0920_数据_14
鼠标经过后效果

演练 网站的导航栏 0920_宽高_15