一． 头部与轮播

头部页面整洁，各个功能部分要求不能静态，其中头部中的首页、华为官网等等文字，当鼠标移入就要字体颜色发生变化，而且搜索栏当鼠标点击，文字要自动消失。轮播：不但要自动轮动，而且当鼠标移入，滚动就停止，右下角也要有五个小点选择，左右也要上下按钮，满足上下切换，页面的切换。

图1 头部 以及 轮播

 图1 轮播代码1

点击 图1中的头部中Select Region 弹出遮罩层

当弹出遮罩层后，中间有一个白色文本框，文本框里面可以选择各种选择，而且鼠标移入选择项中也需要发生颜色的变化，作为显示给用户当前的鼠标位置，让人看起舒服而清晰。1

二． 中间

图二 商品

中间作为商品信息，一张图片内不止要求可以显示价格的提示，而且也要简单描述功能的提示，每一张图也是有联系的，位置与空隙要保持优美的一致。功能：每一张图片点击都要有跳到相应的页面，鼠标移入时，要有一个动漫效果。

 图二 html的代码1

三. 尾部

图三 信息相关

 图三 布置代码1

四、 开发总结

本人从事在线教育十年工作经验现在精心整理了一套从小白到项目实践开发各种学习资料如果你想学想加入我们请关注我在私信回复“编程”就可以领取学习资料！！！

图1

图1代码

第一次代码都是靠自己打的，我发现原来每一个项目之中的每一部分，可以多种代码方式来实现的，这无疑提高了我的实现每一个代码功能探索，比如图1中的五段文字要有高亮效果以及下划线高亮效果，首先我用的是js方式来实现，但是才发现下划线不可完美的实现效果，下划线的大小不好，文字与下划线距离不好，从而我想到用hover伪类实现这一效果，如图1代码：一开始我把每一个文字用span标签来，每一个span标签外面我都要用一个p标签来包裹着，为什么我要如此布局呢？因为这样方便我五个中只有后三个才有高亮效果的功能，虽然复杂，但是也让我对每一层代码布局的深入认识的了解哦。

用另外一种代码方式来做同一种的功能也不错哦！我觉得可以探索每一种代码实现方式，加深的了解，整体来我学习到了布局的多种方式。