©2016-2024 Matools All rights reserved,
粤ICP备17059708号
一． 头部与轮播
*
头部页面整洁，各个功能部分要求不能静态，其中头部中的首页、华为官网等等文字，当鼠标移入就要字体颜色发生变化，而且搜索栏当鼠标点击，文字要自动消失。
*
轮播：不但要自动轮动，而且当鼠标移入，滚动就停止，右下角也要有五个小点选择，左右也要
*
上下按钮，满足上下切换，页面的切换。
图1 头部 以及 轮播
图1 轮播代码
点击 图1中的头部中Select Region 弹出遮罩层
当弹出遮罩层后，中间有一个白色文本框，文本框里面可以选择各种选择，而且鼠标移入选择项中也需要发生颜色的变化，作为显示给用户当前的鼠标位置，让人看起舒服而清晰。
二． 中间
图二 商品
*
中间作为商品信息，一张图片内不止要求可以显示价格的提示，而且也要简单描述功能的提示，每一张图也是有联系的，位置与空隙要保持优美的一致。
*
功能：每一张图片点击都要有跳到相应的页面，鼠标移入时，要有一个动漫效果。
图二 html的代码
三. 尾部
图三 信息相关
图三 布置代码
* 尾部不止要求排布一目了然 ，而且可以用来显示相关服务信息，和相关合作信息,和客服询问等等…
* 每一个文字都跳转链接与鼠标移入可以出现颜色发生变化。
四、 开发总结
图1
图1代码
第一次代码都是靠自己打的，我发现原来每一个项目之中的每一部分，可以多种代码方式来实现的，这无疑提高了我的实现每一个代码功能探索，比如图1中的五段文字要有高亮效果以及下划线高亮效果，首先我用的是js方式来实现，但是才发现下划线不可完美的实现效果，下划线的大小不好，文字与下划线距离不好，从而我想到用hover伪类实现这一效果，如图1代码：一开始我把每一个文字用span标签来，每一个span标签外面我都要用一个p标签来包裹着，为什么我要如此布局呢？因为这样方便我五个中只有后三个才有高亮效果的功能，虽然复杂，但是也让我对每一层代码布局的深入认识的了解哦。
用另外一种代码方式来做同一种的功能也不错哦！我觉得可以探索每一种代码实现方式，加深的了解，整体来我学习到了布局的多种方式。
热门工具 换一换