任务3——7.8

根据提供图片,重构小米官网,完成基本样式及要求的交互效果。

任务要求

要求使用 Git 进行版本管理,须在bingyan-camp-[你的名字全拼]下的task2文件夹中编写代码。

效果图如下图所示,可以参考小米官网上对应区域进行开发。

保证在内容宽度固定的情况下,内容整体于页面居中,当窗口宽度小于内容宽度时才允许出现横向滚动条。

参考或自行分析页面结构,完成 HTML 文件的编写,以下提出的样式表及脚本文件需要外部引用。

根据图片或原网站,完成静态无任何交互的样式(鼠标悬浮、页面切换等);如选购手机,企业团购部分的图标,可以尝试使用Iconfont上的字体 icon 实现。

在商品元素卡片上利用 CSS 实现鼠标悬浮时的动画效果。

利用 JavaScript,实现在鼠标单击轮播图左右按钮时切换展示页。

参考原网站实现,尝试利用 CSS 或 JavaScript 其中一种方法实现鼠标滑过时显示分类所属商品效果(如果有时间可以都尝试一下)。


学习感想:

块级元素实现水平居中:margin:0 auto;

水平居中:text-align:center;

竖直居中:line-height:高度px;

块级元素以及行内元素实现水平竖直居中:http://blog.csdn.net/xsp_login/article/details/44736201

非间断空格:&nbsp

不同宽度的空格:&ensp,&emsp=4&ensp

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,801评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,314评论 25 708
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,094评论 0 1
  • 我所理解的文艺是:“用你喜欢的方式,去让所有的存在都变得有气质。" 文艺是和摄影有关的。说起摄影,很多人都...
    suger南方姑娘阅读 1,501评论 1 4
  • 景,镜头 一*画面,景,镜头 。1 画面,景 1概念 1画面 1活动影像,屏幕 2基本构成要素,电影 3最小构成单...
    092wiy阅读 91评论 0 0