十天学会html+css,第六天横向导航。
今天的学习目标是这部分横向导航菜单。
·找到中间盒子,在里面添加ul列表,结构跟昨天的纵向导航菜单一样。文本内容快速添加,看下效果。
·然后从外到内依次写css样式,ul的高度跟上一层一样,默认样式黑点去掉,看下效果。
·给 li添加左浮动,让它们从纵向排列变成横向排列。在给a标签写css样式之前,别忘了要添加这句代码。
·接着去掉默认样式下划线,文字颜色用黑色,文字水平居中的方法,让高度和行高一样,看下效果。
·再给每个a标签的右边都加上一定的内边距,让它们变宽,看起来就分开了。
·最后还有一个文字变色的效果,给a标签加上hove伪类,颜色设置为红色,看下效果。
到此,今天的学习完成。