Web前端开发案例教程（HTML5+CSS3）课件 任务12 完整项目_制作爱心助农水果商城网站.pptxVIP

;;12.1任务描述;注册页面;12.2网站规划;;;相比过去，网站的设计风格发生了巨大变化，现在流行扁平化的设计风格，整齐美观和简单易用是网站设计的关键。本网站尽量采用简洁大方的设计风格，这对提高网页的搜索和加载速度也是极有利的。在配色上，为了展现水果自然健康的价值理念，采用绿色作为主色调。;;css目录存放样式表文件

images目录存放所有图像文件

iconfont目录存放从网上下载的图标字体文件。

;1．创建项目

在HBuilderX中，新建项目，项目名称：chapter12，位置位于“E:/Web前端开发/源码”目录下。

2．准备素材

将本例所用素材复制到chapter12文件夹中。

3．新建网页

在项目中新建一个网页文件，命名为“index.html”。;4．创建CSS样式表文件

在项目的CSS文件夹中创建CSS样式表文件，文件名：index.css，将该样式表文件链接到主页index.html中，另外，也将图标字体的样式表文件链接到主页中。

5．网站主页上部设计;分为主标题、副标题和产品三部分。

当鼠标指针悬停到产品图片上时，从图片上方下拉出遮罩效果。;7．“日特价”部分设计;8．“特产馆”部分设计;9．页脚及版权部分设计;12.4制作网站登录页面;该页面分为三部分，头部、中间部分和底部，头部内容又分为左右两部分，中间是表单，底部是公司名称。;12.5制作网站注册页面;该页面分为三部分，头部、中间部分和底部，头部内容又分为左右两部分，中间是表单，底部是公司名称。;任务小结