5.7学习笔记
导航:上午所学习的一级导航写出后整体效果如图所示:
左侧是三个部分中的第一个部分,命名为logo区代码如下:
中间为导航部分,它是由无序列表写出来的,并且使用了css样式进行装饰代码如下:
右侧这里为第三部分登录的部分,这个部分分为左侧的logo和右侧的文字左侧logo外还加了一个圆形作为修饰代码如下:
整体css代码如下所示:
下面是二级导航
红色部分为二级导航它是用无序列表写出来的并且进行了居中对齐,去掉列表风格等一系列修饰
代码如下:
蓝色箭头所代表的是用js写出的动画移入移出动画其具体表现为:先写二级导航隐藏,然后写鼠标移入一级导航的事件来弹出二级导航,再写一个鼠标移出事件给二级导航当鼠标从二级导航移出的时候二级导航弹回隐藏
js代码如下:
红色框住的地方这个红色的小球是通过截图确定的宽和高然后使用偏移事件来在一张大图片中提取到我想要的红色小球。
Css代码如下: