首页 > 网站 > WEB开发 > 正文

阿里巴巴头部

2024-04-27 15:07:24
字体:
来源:转载
供稿:网友

  这次开讲的是阿里巴巴头部的制作 效果图:

要求头部的logo与导航栏的文字对齐、导航栏对应的背景色或者背景图、字体的颜色以及鼠标经过显示白色背景框+文字颜色的改变。

首先 左上方插入一张logo图 并且给到它相应的样式

然后在下方导航插入一张橙色的背景图(素材里面有),一开始我还没有发现  就用了背景色,所以要认真观察,善于运用素材了!

背景图:                        导航栏部分的样式:             

文字:         

鼠标经过的效果:

由于背景图的高度设置了38px,导航里面的文字设置了32px,多出的6px自然就变成了橙色,鼠标经过文字显示出来的白色背景框就有这个效果了。 

无论是课堂的作业还是晚上的作业,都离不开老师的教学以及同学们的沟通、互相帮忙学习的一个过程,谢谢大家!


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表