HTML+CSS淘宝首页[web课设代码+模块说明+效果图]
文章目录
- 前言
- 一、HTML结构图
- 二、CSS部分代码图
- 三、每部分效果图展示
- 总结
前言
用时差不多一个星期，抽空把前端课设做完了。html代码量696行，css代码量960行，因为有轮播图(加了100多行js代码)。写了一个淘宝首页用了1800行代码。里面避免不了有冗余的代码，第一次做这种首页。还是不太会做。。。过几天我会把完整代码文件发上来滴。每个css样式修饰都有注释，阅读起来会很方便。
一、HTML结构图
这是总体的结构，用div盒子装起来
二、CSS部分代码图
这是最后一部分的代码 每个样式都会有注释，方便阅读
三、每部分效果图展示
第一部分效果图 这是上方的导航条部分 图片插入部分比较费劲
第二部分效果图 这个时背景然后图片居中展示
第三部分效果图 这是搜索框部分 主要还是布局定位
第四部分效果图 这是下方导航条部分 直接一个ul搞定
第五、六、七、八部分效果图 这是中心部分(代码量最多的一部分) 轮播部分 左列表 还有一些图片样式布局等
第九部分效果图 这是下方商品展示模块直接li里套图片文字等
第十部分效果图 这是最后的一部分效果
总结
自己写代码过程中也是把常见的知识点都运用了一遍，尤其是对于相对定位、绝对定位、样式布局方面有了很大的了解，基本把淘宝首页的布局分析的差不多了，主要还是div布局方面，其他的修饰也比较简单，仔细点看哪里鼠标经过会变颜色，鼠标变成小手等。感觉越写越熟练。。。过几天我会把完整代码+图片素材发上来供大家参考。每个模块都写了注释。。。
HTML+CSS淘宝首页[web课设代码+模块说明+效果图]相关推荐
- HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作 ...
- HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览 模拟淘宝首页(静态) 一.项目重难点 二.效果图及源码 模拟淘宝首页(静态) 一.项目重难点 样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
- 利用Html与css从零开始制作基础静态网页(web课设）
首先打好单个网页的基础结构 本次我们制作网页主要使用的是外部样式表 本次静态网页的主题是合金装备(由个人喜好而定,你可以根据其自己修改) 先定义外部样式表 <link rel="sty ...
- HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历 简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的 首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
- 淘宝首页html css
自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教 在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...
- 7.25 web前端-淘宝首页设计
hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了 ...
- 山东大学Web课设——课程学习网站的搭建
关于web的一些感悟,web这门课程真的收获很多(虽然最后成绩不太理想),从一开始单纯的应付课设到自己看网课学习,可以说这门课如果认真学习的话还是能收获很多的,所以如果正在浏览这篇博文的是SDU的话, ...
- 山东大学Web课设一——课程网站的搭建
关于web的一些感悟,web这门课程真的收获很多(虽然最后成绩不太理想),从一开始单纯的应付课设到自己看网课学习,可以说这门课如果认真学习的话还是能收获很多的,所以如果正在浏览这篇博文的是SDU的话, ...
- 还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下 原始导 ...
- html+css淘宝静态网页
引言 暑假自学了HTML和CSS,找了个淘宝首页来验证自己的学习成果. 项目源码百度网盘链接:https://pan.baidu.com/s/1Lwoddqk6YwfjSa9W-P_f4g 提取码:f ...
最新文章
- Ant Design Pro 网络请求，视图绑定model并且渲染到页面 umi-request
- 系统一定要做成中台吗？
- gradle 指定springcloud 版本_springcloud小技能：服务注册发现如何隔离
- 利用一维数组输出杨辉三角
- mysql备份恢复数据库据/表
- 驴子圈资讯：携程移动端酒店预订首超PC端
- Go 处理PCAP文件
- 【千峰网安学习】利用PE破解系统密码
- ios icon 自动生成
- Spring的事务传播特性
- Java 中status意思_struts的status属性
- [02/Dec/2019:12:59:10 +0800]之日期转换
- 手机测试软件对手机有影响吗,智能手机测试软件的猫腻
- hdu 3535 AreYouBusy 经典混合背包
- 初出茅庐的小李第73篇博客之offsetof(type, member-designator)使用
- android 的导入crosswalk 用xwalkview 替换webview
- Sublime Text 3 装了Anaconda 写Python代码出现框框的解决办法
- Linux用户权限特殊权限
- ETL工具KETTLE常用设计之——作业设计思路模板
- [转] ChatGPT热引发年薪千万高管辞职潮