前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

十天学会html+css第六天 横向导航菜单 #程序员

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

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

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

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

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

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

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

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

到此,今天的学习完成。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言