HTML+CSS 仿写京东网站界面
在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识。
总结
- 整体的布局
在开始写网站之前,要考虑整体的布局,事先将每一块的内容框架搭建好,后期就可以将每一块的内容填充好,包括css的样式。这样思路就比较清晰,不至于后面越做越乱。
- 公共样式
针对一样的内容,可以设置相同的样式,在需要的时候可以直接引入,不需要重复敲css样式
- 命名,代码书写规范
命名要规范,提高代码的可读性。
- 图片
- 比如仿写淘宝,京东网站,我们可以去相应的矢量库找图标。
- 网上的图片可以下载下来,保存到同一个文件夹img中
- 雪碧图,事先把小图片切下来放在同一张页面,开发时就只需要把这张图片引入即可。然后再根据具体情况调整背景图片的位置,利用background-position这个属性可以设置。
京东网站的仿写
将整个网站按照功能分成多个部分进行总结
导航菜单的制作总结
- 首先要进行基本的样式清除: *{margin:0;padding:0}
- 用无序列表构建菜单,ul/li
- 定位问题,relation,absolute,static
- float:left;制作水平菜单
- 列表圆点去除:list-style:none
- 下划线去除&#x
pijiahua: 博主大大可以把京东完整的源代码发我嘛,谢谢邮箱3022673750@qq.com
啊七王子: 选择某一个元素那里 应该是第七个元素吧
m0_65873292: 博主大大可以把京东完整的源代码发我嘛,谢谢邮箱1780215674@qq.com
yy_queen: 有没有整个源码,想参考一下
树下的男爵: 大佬,可以麻烦你分享一下京东的完整源代码吗谢谢你 2870589205@qq.com