前端设计技术

 

系统说明

1、Index.html ：

头部：包括网站logo和主要导航栏，设有搜索框以及登陆注册入口。

导航栏：采用嵌套列表实现主导航和二级导航菜单，支持鼠标悬停显示二级菜单，用户可以快速定位到具体产品类别或相关页面，并且主导航栏前四个都有相对应的页面可以跳转。

轮播图：展示多张产品或促销广告图片，配有左右箭头按钮用于手动切换图片，增强页面的视觉吸引力和动态效果。

活动专区：展示当前的促销活动或特别产品，通过图片展示吸引用户参与。

手机专区：详细列出各类手机产品的图片、名称和价格，提供直观的产品比较和选择功能。

资讯专区：展示公司最新的新闻和技术动态，以文字和相关图片的形式呈现，增加用户对公司及其产品的了解和信任。

底部专区：展示公司版权信息，联系电话，以及图标。

CSS 样式：

定义了页面的整体布局和各个元素的样式，包括导航栏的背景色、按钮的样式和轮播图的布局等。通过媒体查询实现了响应式布局，确保在不同尺寸的设备上都能有良好的显示效果，提升了用户体验和页面的可访问性。

JavaScript 功能：

页面引用了一个JavaScript文件，用于实现轮播图的交互功能，包括自动播放、手动切换和循环显示等功能。轮播图的JavaScript会通过定时器控制图片切换，增强页面的动态效果和用户的浏览体验。

2、Web1.html:（点击导航栏Xiaomi即可跳转）

3、Web2.html:（点击导航栏/头部登录即可跳转）

4、Web3.html:(点击导航栏/头部注册即可跳转)

5、Web5.html:（点击导航栏新闻即可跳转）