前言
用时差不多一个星期，抽空把前端课设做完了。html代码量696行，css代码量960行，因为有轮播图(加了100多行js代码)。写了一个淘宝首页用了1800行代码。里面避免不了有冗余的代码，第一次做这种首页。还是不太会做。。。过几天我会把完整代码文件发上来滴。每个css样式修饰都有注释，阅读起来会很方便。
一、HTML结构图
这是总体的结构，用div盒子装起来
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/b1d2c65b900d499294fa2373d2da31c2.png)
二、CSS部分代码图
这是最后一部分的代码 每个样式都会有注释，方便阅读
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/ad04c3fdd5474c809f7f1d1f353c6a6f.png)
三、每部分效果图展示
第一部分效果图 这是上方的导航条部分 图片插入部分比较费劲
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/dfd5ea17bcd84117ab8a81b4bb80e43d.png)
第二部分效果图 这个时背景然后图片居中展示
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/12389ff3efeb4d2f90ddc08909005216.png)
第三部分效果图 这是搜索框部分 主要还是布局定位
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/0c287534110e412c8cc6069a7a87838b.png)
第四部分效果图 这是下方导航条部分 直接一个ul搞定
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/5c37e9c971ad43b79d2cc319bb3123e8.png)
第五、六、七、八部分效果图 这是中心部分(代码量最多的一部分) 轮播部分 左列表 还有一些图片样式布局等
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/f4fa7ca9299546b7a3932c85fcdbd3b7.png)
第九部分效果图 这是下方商品展示模块直接li里套图片文字等
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/5b1ef46336374099b5439f47ceb5d147.png)
第十部分效果图 这是最后的一部分效果
![HTML+CSS淘宝首页[web课设代码+模块说明+效果图]](https://img-blog.csdnimg.cn/cb297ae10bc14034b9db1cb8bc1aa1a5.png)
总结
自己写代码过程中也是把常见的知识点都运用了一遍，尤其是对于相对定位、绝对定位、样式布局方面有了很大的了解，基本把淘宝首页的布局分析的差不多了，主要还是div布局方面，其他的修饰也比较简单，仔细点看哪里鼠标经过会变颜色，鼠标变成小手等。感觉越写越熟练。。。过几天我会把完整代码+图片素材发上来供大家参考。每个模块都写了注释。。。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/114667.html
