陈颖博 张丽

摘  要：本次网站项目采用了wampServer 服务器、webstorm编辑器、phpstorm编辑器、Avcode切图软件，使用了apache mysql 以及ECS服务器的运行环境，语言包括HTML5、CSS3、PHP、Less、Sql语句，网站首先采用ps以及CorelDraw进行logo的制作，Avcode和Fireworks设计网站前端的界面，在线配色器对网站进行配色，下来网站的前端界面采用webstorm开发完成后，利用phpstorm开发后台。

关键词：在线客服;公告轮询;后台数据

一、网站设计

网站前端界面的设计是一个网站整站开发中的一个重要的环节，本次网站开发前端界面首先使用了Avcode软件进行前端的界面切圖，利用fireworks软件进行网站的静态页面的设计和制作，WebStorm是本次网站的代码编辑软件。利用Html5 CSS3以及jQuery Less实现了网站前端界面的全部特效和部分效果。网站前端界面的Logo使用PhotoShop进行设计CD进行制作，Icon使用了Iconfont进行设计和取材，网站的字体使用Font Awesome字体库利用H5中的功能引入。

（一）功能设计

尚品铭居饰官网

网站的前端特效常见有前端的轮播图、按钮特效、图片特效等，本次论文采用H5  C3  jQuery来完成上述的前端特效，轮播图利用jQuery和CSS3实现了首页的焦点图，导航栏等网页其余特效都适当的采取了jQuery和CSS3实现。为了保证网页对于浏览器的兼容性，项目采取了响应式开发。

（二）前端设计

网页的布局是一个老生常谈的问题，一般网页的布局基础的是采取position定位，设置padding 或者margin外边距等CSS2的方法来实现网页图片的网格化布局或者居中布局、start布局等效果，为了网站的健壮性和网页布局的便捷，本次网站的布局大量的使用了flex布局，网格化布局采用了给……