1. 实践目的

1. 能够简述常见CSS选择器；

2. 能够使用图片、表格、列表等基本标记对网页进行设计和布局；

3. 能根据不同的需求，对不同的选择器进行组合；

4. 能够使用div和CSS联合布局完成页面设计。

2. 实践内容

1. 完成“小米商城帮助导航栏”仿写；

2. 完成“旧版微信导航栏”仿写。

实验所需图像素材：见课程资料-实验模板-实验素材。

3. 实践要求

【要求1】完成“小米商城帮助导航栏”仿写

参考网址：https://www.mi.com/shop

具体要求如下：

1. 网页中包含很多商品图片，帮助导航栏始终在网页右下角（不随鼠标滚动而滚动）。

2. 鼠标悬停在商品上时，为商品图片添加阴影，并让商品向上位移2px。

3. 鼠标悬停在导航栏图标上时，图标从灰色变成红色（更换图标），同时显示提示文字或二维码。

【要求2】完成“旧版微信导航栏”仿写

参考网址：http://data.pzhuweb.cn/weixin.html

具体要求如下：

1. 网页中有一个导航栏，导航栏背景为渐变色linear-gradient(#454545, #181818)。

2. 导航栏中有微信logo左浮动，菜单栏右浮动。

3. 当鼠标悬停在导航栏菜单上时，菜单选项显示背景。

提示：此背景参考“CSS滑动门”效果制作，即无论菜单选项文字多少，都能自适应背景。基本原理是为菜单栏选项（HTML结构为li>a>span）添加两张背景图，一张背景图附加给a元素，显示左侧圆角；一张背景图附加给span元素，显示右侧圆角。