京东项目案例

长时间没有写前端了,一上手就是一个京东项目,磨蹭了好几天。有了这次的基础下面的代码写出来会更快吧!

下面是效果图

1 初始化文件

  • 新建项目的基本文件夹,创建工作环境
  • 新建首页文件index.html
  • normalize.css的初始化文件拖到css文件夹中

对于浏览器的兼容性的问题有做初始化处理,以及其他的基本样式

京东项目案例_第1张图片

2  头部实现

  •  小图标

https://www.jd.com/favicon.ico 

一般的小图标都是网址加favicon.ico结尾就可以找到

对与自己想要生成的ico图标可以用专用的网站将图片转换为ico图标: 可用比特虫

  • 初始化的文件

一定要charset 负责会一直link无效

  • hover注意细节

:hover前不可以加空格

hover失效的几个原因

 

  • 代码
    
    
  • 实现效果截图:

京东项目案例_第2张图片

 

3 底部实现

使用fw生成切片会比截图清晰多了,开始一直在原图上截图导致截取结果总是标准。

  • 我的代码
  
    
    
  • 实现效果截图

京东项目案例_第3张图片

4 中间分类

  • 我的代码
   
    
    
  • 注意要点:

我在这里写的轮播图只是静态的,现实是要用js实现。期待后期更新。

  • 实现效果:

京东项目案例_第4张图片

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(项目实战,css,html)